您的位置:首页 - 教程 - jQuery - 正文
jQueryMobile知识总结

1、jQueryMobile与jQuery的区别

jQueryMobile是一个为触控优化的框架,用于创建移动Web应用程序;构建于jQuery之上,适用于流行的智能手机和平板

基于jQuery的手机网页制作工具,jQuery Mobile的网站上包含了网页的设计工具、主题设计工具。另外jQuery Mobile的js插件包含了换页、事件等的多项功能

 

  • Android 和 Blackberry 用 Java 编写
  • iOS 用 Objective C 编写
  • Windows Phone 用 C# 和 .net 编写

jQuery Mobile 解决了这个问题,因为它只用 HTML、CSS 和 JavaScript,这些技术都是所有移动 web 浏览器的标准

 

2、data-role

  • data-role="page" 是显示在浏览器中的页面
  • data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮)
  • data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等
  • data-role="footer" 创建页面底部的工具栏

在这些容器中,您可以添加任意 HTML 元素 - 段落、图像、标题、列表等等。

提示:HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。

 

3、对话框

如需在用户点击(轻触)链接时创建一个对话框(对话框是用来显示信息或请求输入的视窗类型。),请向该链接添加 data-rel="dialog"

<!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>
    <br/>

    <!--hello-->
    <!--<div date-role="content">-->
        <!--<a href="#pagetwo" >跳转到页面2</a>-->
    <!--</div>-->

    hello
    <br/>

    <div date-role="content">
        <a href="#pagetwo" data-rel="dialog">以对话框的形式跳转到页面2</a>
    </div>



    <div data-role="footer">
        <h1> 尾部 </h1>
    </div>
</div>

<div data-role="page" id="pagetwo">

    <div data-role="header">
        <h1>页面2标题栏</h1>
    </div>
    <br/>
    world
    <br/>
    <div date-role="content">
        <a href="#pageone">跳转到页面1</a>
    </div>
    <div data-role="footer">
        <h1>页面2 尾部 </h1>
    </div>
</div>

</body>
</html>

 

4、过渡

jQuery Mobile 包含了允许您选择页面打开方式的 CSS 效果。如需实现过渡效果,浏览器必须支持 CSS3 3D 转换:

fade是默认效果,如果想反着来,需要指定:data-direction="reverse

fade 默认。淡入淡出到下一页。 测试
flip 从后向前翻动到下一页。 测试
flow 抛出当前页面,引入下一页。 测试
pop 像弹出窗口那样转到下一页。 测试
slide 从右向左滑动到下一页。 测试
slidefade 从右向左滑动并淡入到下一页。 测试
slideup 从下到上滑动到下一页。 测试
slidedown 从上到下滑动到下一页。 测试
turn 转向下一页。 测试
none 无过渡效果。

 

 <!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>
     <br/>
 
     hello
     <div date-role="content">
         <a href="#pagetwo" data-transition="slide">跳转到页面2</a>
     </div>
     
 
 
     <div data-role="footer">
         <h1> 尾部 </h1>
     </div>
 </div>
 
 <div data-role="page" id="pagetwo">
 
     <div data-role="header">
         <h1>页面2标题栏</h1>
     </div>
     <br/>
     world
     <br/>
 
     <div date-role="content">
         <a href="#pageone" data-transition="slide" data-direction="reverse">跳转到页面1</a>
     </div>
     <div data-role="footer">
         <h1>页面2 尾部 </h1>
     </div>
 </div>
 
 </body>
 </html>

 

5、按钮

 <!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>
     <script src="demo.js"></script>
 </head>
 <body>
 
 <div data-role="page" id="pageone">
     <div data-role="header">
         <h1>按钮</h1>
     </div>
 
     <div data-role="content" data-inline="true">
         <button>按钮</button>
     </div>
 
     <div data-role="content">
         <input type="button" value="button" data-inline="true"></input>
     </div>
 
     <div data-role="content">
         <a href="#" data-role="button" data-corner="true" data-inline="true">button</a>
         <a href="#" data-role="button" data-corner="false" data-inline="true">button</a>
         <a href="#" data-role="button" data-inline="true">button</a>
         <a href="#" data-role="button" data-inline="true">button</a>
     </div>
 
     <div data-role="controlgroup" data-type="horizontal">
         <a href="#pagetwo" data-role="button" id="button1">button</a>
         <a href="#" data-role="button" >button</a>
         <a href="#" data-role="button" data-corner="false">button</a>
         <a href="#" data-role="button">button</a>
 
 
     </div>
 
     <div data-role="content">
         <p>带有和不带有圆角的按钮:</p>
         <a href="#" data-role="button">按钮 1</a>
         <a href="#" data-role="button" data-corners="false">按钮 2</a>
         <br>
     </div>
 
     <div data-role="content">
         <p>带有和不带有shadow的按钮:</p>
         <a href="#" data-role="button">按钮 1</a>
         <a href="#" data-role="button" data-shadow="false">按钮 2</a>
         <br>
     </div>
 
 
     <div data-role="content">
         <p>是否为小型按钮:</p>
         <a href="#" data-inline="true" data-role="button">按钮 1</a>
         <a href="#" data-inline="true" data-role="button" data-mini="true">按钮 2</a>
         <br>
     </div>
 
 
     <p>带有和不带有圆角的行内按钮:</p>
     <a href="#" data-role="button" data-inline="true">按钮 1</a>
     <a href="#" data-role="button" data-inline="true">按钮 2</a>
     <br>
     <a href="#" data-role="button" data-inline="true" data-corners="false">按钮 1</a>
     <a href="#" data-role="button" data-inline="true" data-corners="false">按钮 2</a>
 
 
     <div data-role="footer">
     <h1>页脚文本</h1>
 </div>
 </div>
 
 <>
 <div data-role="page" id="pagetwo">
 
     <div data-role="header">header</div>
     <div data-role="content">
         <a href="#" data-role="button" data-rel="back" >后退</a>
     </div>
     <div data-role="footer">footer</div>
 </div>
 
 
 </body>
 </html>

 


评论: