jQuery Mobile学习笔记

Posted 2020-08-24 Pеcu❤lian

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定义了多种主题，也可以自定义

http://www.runoob.com/jquerymobile/jquerymobile-themes.html

 

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事件