jQuery Mobile学习笔记

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事件
posted @ 2016-12-22 21:18  W+7  阅读(211)  评论(1)  编辑  收藏  举报