1.获取jQuery mobile 文件,访问jQuerymobile网站下载
(貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!)
2.需要使用数据属性,数据属性是HTML5引入的,以data-开头
比如data-role可以用于定义页眉,页脚,内容,页面等
  • data-role="page" 是在浏览器中显示的页面。
  • data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
  • data-role="main" 定义了页面的内容,比如文本, 图片,表单,按钮等。
  • "ui-content" 类用于在页面添加内边距和外边距。
  • data-role="footer" 用于创建页面底部工具条。
3.当jquery mobile中定义多个页面,:page时,在移动端会默认只出现一个页面
4.当遇到连接时,如果是同一个页面的其他内容,或者是同个服务器上的其他内容,会使用ajax加载页面
而当遇到外部网站,会执行常规的连接操作
如果要禁用jquery mobile 的操作,则用数据属性:data-ajax=“false”
5.jquery页面设置
页面标题:在页面标签中用data-title设置,也可以在header标签中设置
预取内容
在一个站点中,有几个网页是经常被用户加载的,为了提高加载速度,可以让浏览器后台在主页面加载时预先读取。具体设置为在相应连接中添加data-prefetch=“true”
修改页面的过度方式
data-transition:poo(弹出窗口),fade,flip,flow,slide(从右到左滑动),slidedown(从上到下滑动),slidefade,turn,none
6.页眉添加按钮
在header页面中添加按钮,添加a连接
只在页眉右边添加一个按钮:class=“ui-btn-right”
可以在按钮中添加图标  data-icon
7.添加返回按钮
添加data-add-back-btn="true"
设置a连接为空,并设置data-rel=“back”
在页脚中添加按钮,他不会在按钮四周保持空间,需添加“ui-bar类型
 
8.固定页眉和页脚
在页眉页脚中添加data-position=“fixed”
全屏的页眉页脚:data-fullscreen="true"
9.创建导航栏
在div标签中添加data-role=“navbar”,然后创建无序列表
在激活的按钮加上“uibtn-active”的类型标签
一行最多只能添加五个按钮,过多按钮会被拆分
10.多页面持久页脚
所有页面使用的data-id相同
需要添加“ui-btn-active,ui-state-persist”
class标签
11.列表功能
无序列表中ul添加data-role=“listview”
在li中添加a连接后,列表中会添加箭头icon
内嵌列表:ul中添加data-inset=“true”
列表分隔符:li中添加data-role=“listdriver”或ul中加data-autodrivers=“true”
 
12.在列表中添加缩略图或图标
在li中添加img,或在添加“ui-li-icon”的class类型,图标要指定位置,不然图标不显示: ui-btn-icon-top/bottom/left
拆分行的列表,在ul中添加data-spliticon=“delete”
13.列表的搜索过滤
在ul中添加data-filter=“true”
默认不去分大小写,通过ajax方式检索
14.使用tel和mailto自动调用手机的拨号和电子邮件功能 
15.表单的提交功能
在jquery-lmobie中都是通过ajax提交的
表单组件会自动优化
表单提交的div中添加data-role="fieldcontain"
 
16.选择菜单
如需隐藏标签,请使用 class ui-hidden-accessible。这在您把元素的 placeholder 属性作为标签时经常用到
我们可以使用 data-clear-btn="true" 属性来添加清除输入框内容的按钮 (一个在输入框右侧的 X 图标)
jQuery Mobile 通过 AJAX 自动处理表单提交,并将试图集成服务器响应到应用程序的 DOM 中。
  • <form> 元素必须有一个 method 和一个 action 属性
  • 每个表单元素必须有一个唯一的 "id" 属性。id 必须是整个站点所有页面上唯一的。这是因为 jQuery Mobile 的单页导航机制使得多个不同页面在同一时间被呈现
  • 每个表单元素必须有一个标签。设置标签的 for 属性来匹配元素的 id
使用效果与使用平台有关
17.搜索组件与滑块组件
 
开关组件
<form method="post" action="demoform.php">
  <label for="switch">切换开关:</label>
    <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False"  checked>(默认选中)
</form>
 
滑块组件,类型改为range
 
18.禁用原生表单控件
data-role="none"
迷你组件:data-mini="true"
 
19.创建模态对话框(以下两种办法都可以)
a链接中添加data-rel="dialog"
page中添加data-dialog="true"
 
20.使用网格进行内容布局
在div标签中添加class=“ui-grid-a”,(a表示两列网格,b表示三列网格,以此类推)
在div标签中再添加class=“ui-block-a”(从a到d)
 
21.让html元件响应式的只能适应不同尺寸
在现有网格中添加class=“ui-reponsive”
折叠框:data-role=“collapsible”(初始情况下展开:再添加data-collapsible=“false”)
可将收缩icon挪到右边:data-iconpos=“right”
可折叠集合: data-role=“collapsible-set”
 
22.弹出式窗口
首先写一个区块:data-role=“popup”
然后写一个a链接作为按钮(以启动事件):
<a href="#f" data-role="button" data-rel="popup" data-position-to="window">sss</a>
 
23.表格(响应式:列回流和列切换)
在table标签中添加data-role=“table” class="ui-responsive table-stroke"(分别是响应式和出现表格边框)
(添加响应式后,原先横版的表格,会在分辨率改变时变为竖版的)
 
可以根据用户需要过滤性的显示数据
添加data-mode="columntoggle"
然后在thead中给列标题添加权重:data-priority="1~10"
对按钮文本改变:data-column-btn-text=“??”
 
24.添加面板
添加data-role=“panel”,而且必须在content外添加
data-position=“left/right”可以设置面板的方向
通过设置data-display属性来订正显示方式:reveal、push、overveal
 
25.创建按钮
  • 使用 <button> 元素
  • 使用 <input> 元素
  • 使用带有 data-role="button" 的 <a> 元素
组合按钮(水平/竖直): data-role="controlgroup" 和 data-type="horizontal|vertical"
后退按钮: <a href="#" data-role="button" data-rel="back">返回</a>
 
26.juqery mobile定义了多种主题,也可以自定义
 
27.jquery mobile事件
 
 jQuery on() 方法用于绑定事件到选中的元素上。
 
<script>
$(document).on("pagecreate","#pageone",function(){

   // jQuery 事件...

});
</script>

 
旋转事件:

window.orientation 属性针对纵向视图返回 0,针对横向视图返回 90 或 -90。

页面加载:
jquery应用一般都是用$(document).ready来进行初始化,但是jquery mobile这一点却不怎么好用,因为jquery mobile使用ajax加载页面,

$(document).ready只对第一个页面有效

因此需要使用pagecreate事件
 
 
 
 
 
 
 

jQuery Mobile笔记的更多相关文章

  1. Jquery Mobile笔记之一

    jQuery Mobile 在你的网页中添加 jQuery Mobile 你可以通过以下几种方式将jQuery Mobile添加到你的网页中: 从 CDN 中加载 jQuery Mobile (推荐) ...

  2. 【jquery mobile笔记二】jquery mobile调用豆瓣api示例

    页面主要代码如下 <div data-role="page" id="page1">     <div data-role="hea ...

  3. jquery mobile 笔记

    1.navbar 相关 <nav data-role="navbar">    <ul>      <li><a href="# ...

  4. jquery mobile开发笔记之Ajax提交数据(转)

    http://my.oschina.net/xiahuawuyu/blog/81763 这两天学习了下,jquery mobile(以下简称jqm)的开发相关的内容.可能之前有过web的开发基础,相对 ...

  5. jQuery Mobile学习笔记

    1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...

  6. Jquery Mobile 学习笔记(一)

    1.模拟器,IOS:XCODE GENYMOTION  ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role=page 代表一个页面 data-po ...

  7. Jquery mobile 学习笔记

    最近学习移动开发,接触到了phonegap,然后又需要开始学习jquery mobile.掌握两者是开发轻应用的前提 在学习jquery mobile中,遇到了许多问题让初学者很是头疼,无意间找到这个 ...

  8. PhoneGap+JQuery Mobile移动应用开发学习笔记

    最近一直在学习使用PhoneGap+JQuery Mobile的开发框架开发Android应用,抛开这个框架的运行效率不说,暂且将使用中遇到的问题进行一下整理. 1.JS文件引用顺序 也许在进行web ...

  9. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

随机推荐

  1. POJ 3903 Stock Exchange

    Stock Exchange Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2954   Accepted: 1082 De ...

  2. NSString Byte NSData 字节(字符)字符串

    NSUTF8StringEncoding 3个字节(字符)一个中文字符 一个字节一个英文字符

  3. Apache2.4为什么启动报错Cannot load php5apache2_4.dll into server

    最近学习php,按照书上的描述,下载好apache和php后,按照其中配置进行,结果遇到了上述问题.花费了近一个半小时的时间解决了上述问题.现把解决问题过程中看到的方法总结如下.  最先肯定是一定要注 ...

  4. ireport 导出工具类

    Ireport 报表导出 Poi + ireport 导出pdf, word ,excel ,html 格式 下面是报表导出工具类 Ireport 报表导出 Poi + ireport 导出pdf,  ...

  5. nginx url自动加斜杠的问题

    nginx url自动加斜杠问题及301重定向 时间:2016-02-04 15:14:28来源:网络 导读:nginx url自动加斜杠问题及301重定向,URL指向一个目录并且在最后没有包含斜杠, ...

  6. Session丢失的解决办法小结

    最近在做ASP.NET项目时,测试网站老是取不出Session中的值,在网上搜索了一下,找到一些解决方法,记录在这里.最后使用存储在StateServer中的办法解决了问题. SessionState ...

  7. java攻城狮之路(Android篇)--MP3 MP4、拍照、国际化、样式主题、图片移动和缩放

    一.MP3播放器 查看Android API文档可以看到MediaPlayer状态转换图: 练习: package com.shellway.mp3player; import java.io.Fil ...

  8. SNF开发平台WinForm之五-高级查询使用说明-SNF快速开发平台3.3-Spring.Net.Framework

    5.1运行效果: 5.2开发实现: 1.按上面效果来说,先来看一下在程序当中如果调用.第一步在页面拖拽一个按钮为“高级查询”,事件上写下如下代码: 如果是单表查询的话,只需要传GridView就行,如 ...

  9. iOS开发工具——网络封包分析工具Charles

    简介 Charles是在Mac下常用的截取网络封包的工具,在做iOS开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析.Charles通过将自己设置成系统的网络访问代理服务器,使 ...

  10. 二叉堆(三)之 Java的实现

    概要 前面分别通过C和C++实现了二叉堆,本章给出二叉堆的Java版本.还是那句话,它们的原理一样,择其一了解即可. 目录1. 二叉堆的介绍2. 二叉堆的图文解析3. 二叉堆的Java实现(完整源码) ...