RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
jQueryMobile快速入门

what

jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。
jQueryMobile快速入门

成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站建设、网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的平陆网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

使用

要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容：

  • CSS文件jquery.mobile-1.4.5.min.css

  • jQuery类库文件 jquery.min.js

  • jQuery Mobile文件 jquery.mobile-1.4.5.min.js

结构

一个jQuery Mobile页面时你需要创建三块基本内容（头，正文，尾），要在html文档中的 head 标签内填写：

在body标签内填写：

Page Title

Jquery mobile Test

Page Footer

代码解释：

  • data-role="page" 是显示在浏览器中的页面

  • data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）

  • data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等

  • data-role="footer" 创建页面底部的工具栏

在jQuery Mobile中，可以在单一 HTML 文件中创建多个页面。通过唯一的id来分隔每张页面，在后面的代码编写中，推荐使用以上的构建方法来建立页面。

超链接

jQuery Mobile中的一个“page”结构一般使用一个DIV来组织。现在你可以使用前一节中的模板来创建一个包含三个跳转到其他页面的链接的导航页面：


   
Menu
             

What vehicles do you like?

             

Cars

      

Trains

      

Planes

          
   
Page Footer

上面创建的导航页是我们在浏览器看到的第一个页面，接下来我们再添加三个“page”，他们有不同的id：Cars， Planes，Trains。


   
      
Cars

   
             

We can add a list of cars

   
          
Page Footer
   
          

Trains

                 

We can add a list of trains

              
Page Footer
              

Planes

             

We can add a list of planes

           
Page Footer

现在我们已经建立完成了，去试一试吧

button

jQueryMobile快速入门
　　在jQuery Mobile中，按钮可通过三种方式创建：

使用 < button > 元素
使用 < input > 元素
使用带有 data-role="button" 的 < a >元素

按钮

在 jQuery Mobile 中，按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。我们推荐使用带有 data-role="button" 的< a >元素在页面间进行链接，使用< input >或< button >元素进行表单提交。

默认情况下，按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加 data-inline="true"，如果想组合按钮，可以使用 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮。

访问第二个页面
    按钮 1
    按钮 2
    按钮 3

可折叠块

jQueryMobile快速入门

可折叠块允许您隐藏或显示内容 - 对于存储部分信息很有用。如需创建一个可折叠的内容块，需要为容器添加 data-role="collapsible" 属性。在容器（div）内，添加一个标题元素（H1-H6），后跟您想要进行扩展的 HTML 标记，默认情况下，内容是被折叠起来的。如需在页面加载时展开内容，请使用 data-collapsed="false"：


    
点击我 - 我可以折叠!

    
我是可折叠的内容。

当然可折叠块允许嵌套，如下代码：


    
点击我 - 我可以折叠!

    
我是被展开的内容。

    
        
点击我 - 我是嵌套的可折叠块！

        
我是嵌套的可折叠块中被展开的内容。

    

panel

jQueryMobile快速入门

jQuery Mobile中的面板会在屏幕的左侧向右侧划出。可以通过指定id的div元素添加 data-role="panel" 属性来创建面板。


  
面板标题..

  
文本内容..

panel标记必须置于头部、内容、底部组成的页面之前或之后。


   
    
面板头部..

    
面板中的一些文本内容..

  
  
      
汇智网

   
 

要访问面板，需要创建一个指向面板的链接，点击该链接即可打开面板：

打开面板

默认情况下，面板会显示在屏幕的左侧。如果想让面板出现在屏幕的右侧，可以指定 data-position="right" 属性。

打开面板

可以通过使用 data-display 属性来控制面板的展示方式:

           

可以使用按钮来关闭面板：仅需要在面板的div中添加 data-rel="close" 属性。

 
  
面板头部..

  
面板中的一些文本内容..

  关闭面板

更多示例内容及在线练习参考：
http://www.hubwiz.com/course/5640589f9bb934437751117b/


分享名称：jQueryMobile快速入门
转载来于：http://lswzjz.com/article/pgecss.html

其他资讯

快速导航
友情链接
网站建设
联系方式
  • 企业：青羊区大橙子信息咨询工作室
  • 地址：成都市青羊区太升南路288号
  • 电话：18980820575
  • 网址：www.lswzjz.com

公司名称：青羊区大橙子信息咨询工作室 联系电话：18980820575

网站备案号：蜀ICP备2022028542号-13

乐山大橙子建站 乐山网站建设 乐山网站设计 乐山网站制作 成都做网站