jquery手机版 jquery mobile教程

转载

jkfox 2023-08-02 09:27:42

文章标签 jquery手机版 javascript ViewUI ico jquery 文章分类 jQuery 前端开发

准备了解下jQuery Mobile，写下一些学习过程的总结和感悟，起到加深记忆和以后方便查看的作用，也希望能和其他程序猿朋友交流。

jQuery Moblile 是jQuery框架的一个组件，它几乎可以工作于所有移动平台。因为他使用了Html5、css和JS，所以学习之前，希望你先拥有这方便的知识。

1、 jQuery Mobile 安装，非常简单，可以不用下载，在html页面中引入相关js和css就可以了。

<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>

2、 jQuery Mobile 页面，data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。一个页面可以使用多个data-role="page", 通过唯一id来区分它们。用href来跳转。也可以使用data-ref=‘另一个的id’，来弹出其他一个一个page的对话框。

data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏
data-ref = "" 弹出一个对话框

下面是一个基本的JQuery Mobile页面。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="content">
    <p>内容</p>
  </div>

  <div data-role="footer" data-position='fixed' data=fullscreen = 'true'>
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="plus">更多</a></li>
        <li><a href="#" data-icon="minus">更少</a></li>
        <li><a href="#" data-icon="delete">删除</a></li>
        <li><a href="#" data-icon="check">喜爱</a></li>
        <li><a href="#" data-icon="info">信息</a></li>
      </ul>
    </div>
  </div>
</div> 

</body>
</html>

3、jQuery Mobile 页面过渡效果。从一个页面过渡到另一个页面有很多效果，比如淡入淡出、翻转、上滑和下滑等。需要浏览器支持，IE需要10及以上。

<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>

使用data-transition 属性，值包括：fade、flip、flow、pop、slide、slidefade、slideup、slidedown、turn、和none。

使用data-direction = “reverse” 会使效果相反。

4、 jQuery Mobile 按钮。三种：input、button、a标签。 input和button常用于表单提交。a标签用于页面跳转。a标签的按钮默认适应屏幕，加上data-line = 'true' 则自适应大小。

<button>按钮</button>

<input type="button" value="按钮">

<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a>

4.1 组合按钮，使用data-role = 'controlgroup'。data-type = 'horizontal' 代表水平，data-tye = 'vertical'代表垂直。

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">按钮 1</a>
  <a href="#anylink" data-role="button">按钮 2</a>
  <a href="#anylink" data-role="button">按钮 3</a>
</div>

4.2 后退按钮，使用属性data-rel = 'back'.

<a href="#" data-role="button" data-rel="back">返回</a>

还有一些其它的按钮属性：data-corners,data-mini, data-shadow, 值均为true和false。

4.3 含有图标的按钮，使用data-icon属性，值有：arrow-l、arrow-r、delete、info、home、back、search、grid等等。data-iconpos 规定图标的位置，值有top、botton、left、right。notext，表示只显示图标，不显示文字。

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>

5、jQuery Mobile 工具栏。工具栏一般都放在页眉或页脚。

标题栏一般构成包括：左边的logo首页、logo返回；中间的title；右边的搜索、选项。如果只有一个按钮，还要在右侧显示，需添加class='ui-btn-right' 。页眉一般就是1-2个按钮。

<div data-role="header">
  <a href="#" data-role="button">首页</a>
  <h1>欢迎来到我的主页</h1>
  <a href="#" data-role="button">搜索</a>
</div>

页脚，可添加的按钮更多，也更灵活。class='ui-btn'可使居中。

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>
    <a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>
    <a href="#" data-role="button" data-icon="plus">转播到 QQ 空间</a>
  </div>
</div>

定位页眉页脚。data-position 值包括：inline,fixed。 data-fullscreen=“true”属性为全面定位，可使页眉页脚半透明。

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

6、jQuery mobile 导航栏。一般由一组水平排列的链接组成(超过5个会换行)，位于页眉页脚。使用data-role="navbar”属性（会自动转为button,无需data-role='button'）；

ui-btn-active 、ui-state-persist 选中的样式。

页眉的导航栏

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink"   class="ui-btn-active ui-state-persist">首页</a></li>
      <li><a href="#anylink">页面二</a></li>
      <li><a href="#anylink">搜索</a></li>
    </ul>
  </div>
</div>

页脚的导航栏。data-iconpos='left' 表示图片居左。

<div data-role="footer">
    <div data-role="navbar" data-iconpos="left">
      <ul>
        <li><a href="#" data-icon="plus">更多</a></li>
        <li><a href="#" data-icon="minus">更少</a></li>
        <li><a href="#" data-icon="delete">删除</a></li>
        <li><a href="#" data-icon="check">喜爱</a></li>
        <li><a href="#" data-icon="info">信息</a></li>
      </ul>
    </div>
  </div>

7、 jQuery mobile 折叠

div 使用 data-role = 'collapsible', 添加一个h1-h6标签，其后就是折叠的内容。折叠内容默认隐藏。如果需要显示，可添加data-collapsed='false'。

折叠可嵌套。

折叠集合data-role = 'collapsible-set'

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>点击我 - 我可以折叠！</h1>
    <p>我是被展开的内容。</p>
          <div data-role="collapsible">
             <h1>点击我 - 我是嵌套的可折叠块！</h1>
             <p>我是嵌套的可折叠块中被展开的内容。</p>
         </div>
  </div>
  <div data-role="collapsible">
    <h1>点击我 - 我可以折叠！</h1>
    <p>我是被展开的内容。</p>
  </div>
</div>

div添加 data-insert=‘false’ ：取掉圆角。data-mini = 'true'：更小巧。data-callapsed-icon='arrow-u' data-expanded-icon='arrow-d' 更换前面的默认+ -图标。

8、 jQuery Mobile 网格布局。

网格类	列	列宽度	对应
ui-grid-a	2	50% / 50%	ui-block-a\|b
ui-grid-b	3	33% / 33% / 33%	ui-block-a\|b\|c
ui-grid-c	4	25% / 25% / 25% / 25%	ui-block-a\|b\|c\|d
ui-grid-d	5	20% / 20% / 20% / 20% / 20%	ui-block-a\|b\|c\|d\|e

<div class="ui-grid-b">
     <div class="ui-block-a" style="border: 1px solid black;"><span>Some Text</span></div>
     <div class="ui-block-b" style="border: 1px solid black;"><span>Some Text</span></div>
     <div class="ui-block-c" style="border: 1px solid black;"><span>Some Text</span></div>
   </div>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。