13、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>

6、icon

 <!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">header</div>

     <div data-role="content">

         <div data-role="controlgroup" data-type="horizontal">

             <a href="#" data-role="button" data-icon="grid"></a>

             <a href="#" data-role="button" data-icon="arrow-l"></a>

             <a href="#" data-role="button" data-icon="arrow-r"></a>

             <a href="#" data-role="button" data-icon="delete"></a>

             <a href="#" data-role="button" data-icon="info"></a>

             <a href="#" data-role="button" data-icon="home"></a>

             <a href="#" data-role="button" data-icon="back"></a>

             <a href="#" data-role="button" data-icon="search"></a>

             <br/>

             <br/>

             <br/>

             <br/>

             <a href="#" data-role="button" data-icon="search" value="search" data-iconpos="top"></a>

             <a href="#" data-role="button" data-icon="search" data-iconpos="bottom"></a>

             <a href="#" data-role="button" data-icon="search" data-iconpos="left"></a>

             <a href="#" data-role="button" data-icon="search" data-iconpos="right"></a>

         </div>

     </div>

     <div data-role="footer">footer</div>

 </div>

 </body>

 </html>

7、widget

<div data-role="page">

    <div data-role="header">

        <h1>

            header in page

        </h1>

    </div>

    <div class="ui-content">

        hello world

        <a href="3-3.html">跳转到页面3</a>

        <a data-rel="back">返回到上一个页面</a>

        <!--ui-grid-a代表整个栅格系统分为两列 同理 ui-grid-b代表两列-->

        <div class="ui-grid-a">

            <!-- ui-block-a ui-block-b、cde 分别代表第一、二345列-->

            <div class="ui-block-a">

                <div class="ui-bar ui-bar-a">

                    hello a

                </div>

            </div>

            <div class="ui-block-b">

                <div class="ui-bar ui-bar-a">

                    hello b

                </div>

            </div>

        </div>

        <!-- 可以放置按钮-->

        <div class="ui-grid-b">

            <div class="ui-block-a">

                <input type="button" class="ui-btn" data-theme='a' value="按钮">

                <input type="button" class="ui-btn" data-theme='a' value="按钮">

                <input type="button" class="ui-btn" data-theme='b' value="按钮">

            </div>

            <div class="ui-block-b">

                <div class="ui-bar ui-bar-a">

                    hello b

                </div>

            </div>

        </div>

        <!--如何值放置一列-->

        <div class="ui-grid-solo">

            <div class="ui-block-a">

                <button>hello</button>

            </div>

        </div>

    </div>

    <ol data-role="listview">

        <li>A</li>

        <li>B</li>

        <li>C</li>

    </ol>

    <ui data-role="listview">

        <li><a href="#">A</a></li>

        <li><a href="#">A</a></li>

        <li><a href="#">A</a></li>

    </ui>

    <!-- data-filter='true' 允许过滤 data--inset='true'允许插入，因为过滤后返回是允许插入的-->

    <ul data-role="listview" data-filter="true" data-inset="true">

        <li><a href="#">A</a></li>

        <li><a href="#">B</a></li>

        <li><a href="#">C</a></li>

    </ul>

    <br/>

    <form class="ui-filterable">

        <input id="autoInput" data-type="search">

    </form>

    <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autoInput" data-inset="true">

        <li><a href="#">A</a></li>

        <li><a href="#">B</a></li>

        <li><a href="#">C</a></li>

        <li><a href="#">D</a></li>

        <li><a href="#">E</a></li>

        <li><a href="#">F</a></li>

    </ul>

    <br/>

    <br/>

    <!-- data-autodividers='true'-->

    <ul data-role='listview' data-autodividers='true' data-filter="true" data-inset="true">

        <li><a href="#">alpha</a></li>

        <li><a href="#">blue</a></li>

        <li><a href="#">black</a></li>

        <li><a href="#">bitch</a></li>

        <li><a href="#">color</a></li>

        <li><a href="#">dark</a></li>

        <li><a href="#">energy</a></li>

        <li><a href="#">full</a></li>

        <li><a href="#">ada</a></li>

    </ul>

    <div data-role="navbar">

        <ul>

            <li><a href="#">one</a></li>

            <li><a href="#">ttwo</a></li>

            <li><a href="#">three</a></li>

        </ul>

    </div>

    <div data-role="footer" data-position="fixed">

        <h1>footer</h1>

    </div>

</div>

13、jQueryMobile知识总结的更多相关文章

OpenLayers2.13.1知识整理
对于地图的默认加载等,网上很多资料,就不细说了,主要整理解决一些api不明显或不全的内容因玩webgis只有一周左右,肯定很水~~ 我资料中的目录结构如下: html map js(自己封装的js目 ...
Pthon面向对象-补充知识
Pthon面向对象-补充知识作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.tracemalloc 标准库tracemalloc,可以统计内存使用情况,通过下面的案例可以看出内 ...
Atitit 编程语言原理与概论attilax总结三大书籍总结
Atitit 编程语言原理与概论attilax总结三大书籍总结编程语言原理(第10版) 目录: 第1章预备知识第2章主要程序设计语言的发展第3章描述语法和语义第4章词法分析和语法分析第5章 ...
Atitit 编程语言原理与概论attilax总结
Atitit 编程语言原理与概论attilax总结 1. 语言的分类1 2. 语言评价标准1 3. 编程语言原理(第10版) 目录: 2 4. 代码之髓:编程语言核心概念2 5. <编程语言实现 ...
《编程语言实现模式》【PDF】下载
<编程语言实现模式> 编程语言实现模式旨在传授构建语言应用(工具)的经验和理念,教读者构建自己的语言应用.这里的语言应用并非特指用编译器或解释器实现编程语言,而是泛指任何处理.分析.翻译输 ...
Leetcode-颠倒整数
给定一个范围为 32 位 int 的整数,将其颠倒. 例 1: 输入: 123 输出: 321 例 2: 输入: -123 输出: -321 例 3: 输入: 120 输出: 21 注意: 假设我们的 ...
文本分布式表示（二）：用tensorflow和word2vec训练词向量
看了几天word2vec的理论,终于是懂了一些.理论部分我推荐以下几篇教程,有博客也有视频: 1.<word2vec中的数学原理>:http://www.cnblogs.com/pegho ...
FreeMaker入门介绍
一.FreeMaker介绍 FreeMarker是一款免费的Java模板引擎,是一种基于模板和数据生成文本(HMLT.电子邮件.配置文件.源代码等)的工具,它不是面向最终用户的,而是一款程序员使用的组 ...
Spring Boot （三）模板引擎FreeMarker集成
一.FreeMaker介绍 FreeMarker是一款免费的Java模板引擎,是一种基于模板和数据生成文本(HMLT.电子邮件.配置文件.源代码等)的工具,它不是面向最终用户的,而是一款程序员使用的组 ...

随机推荐

lintcode中等难度5道题
1.整数转罗马数字对任一个罗马数字可以由12个罗马字符进行加法操作完成,且大数在左,小数在右,可以将一个数字进行拆分来求解 2.买卖股票的最佳时机 II 可将问题转换为只要相连的两天prices[ ...
又一例网卡mtu值引发的问题
通过php上传文件到云存储,很小的文件都无法上传,在别的服务器上测试可以,本机环境是ESXI虚机安装的centos 7版本解决思路过程 1.让开发写一个单独测试上传的文件,不调php nginx配置 ...
Metasploitable渗透测试实战——Windows漏洞 MS08-067复现
Ms08-067 攻防环境: 攻击机:kali ip:198.168.12.212 靶机:Window XP 未打过ms08-067补丁 ip:198.168.12.209
HDU1043 八数码(BFS + 打表)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1043 , 康托展开 + BFS + 打表. 经典八数码问题,传说此题不做人生不完整,关于八数码的八境界 ...
富文本编辑器Ueditor的使用
1.下载:http://ueditor.baidu.com/website/download.html. 2.解压,并放到项目webapp下. 3.jsp页面的配置. 4.配置根路径. 5.页面展示: ...
【洛谷1486】[NOI2004] 郁闷的出纳员（Splay的小运用）
点此看题面大致题意: 你是一个公司的出纳员,现在有\(n\)个操作,操作有4种:新来一个员工.增加全体员工工资.减少全体员工工资.查询第\(k\)多的工资.若一个员工的工资在某一时刻低于合同上的工资 ...
iOS 常用正则表达式
今天看到一个正则表达式的文章,总结的挺好的,就自己转载一下,我还会陆续加入一些我自己看到常用的正则表达式 (原地址:http://www.code4app.com/blog-721976-112.ht ...
PS 厘米与像素切换
方法一: 快捷键 ctrl + r 打开标尺将鼠标放在标尺刻度上右键出现菜单里修改即可: 方法二: 编辑---首选项---单位与标尺修改即可:
Videos
Videos 时间限制: 1 Sec 内存限制: 128 MB提交: 17 解决: 7[提交] [状态] [讨论版] [命题人:admin] 题目描述 C-bacteria takes charg ...
什么是SAD，SAE，SATD，SSD，SSE，MAD，MAE，MSD，MSE？
SAD(Sum of Absolute Difference)=SAE(Sum of Absolute Error)即绝对误差和 SATD(Sum of Absolute Transformed Di ...

13、jQueryMobile知识总结

13、jQueryMobile知识总结的更多相关文章

随机推荐

热门专题