jquery mobile 笔记

1、navbar 相关

<nav data-role="navbar">
    <ul>
      <li><a href="#home"  data-icon="home">首页</a></li>
      <li><a href="#email" data-rel="dialog" data-icon="grid">邮件</a></li>
      <li><a href="#phonebook" data-rel="dialog" data-icon="search">通讯录</a></li>
      <li><a href="#calendar" data-rel="dialog" data-icon="star">日历</a></li>
    </ul>

</nav>

data-rel=  是控制 navbar 弹出风格的

以上这个页面默认是弹出 一个窗口, 去掉 data-rel="dialog" 之后,就是弹出整个页面

2、关于动态生成之后的刷新

jqm很奇怪的地方就是,他不会自己刷新动态程序的html代码,需要手动刷新

代码如下:

$("#pageone").trigger("create");

在每次动态生成之后,走要执行这个,不然html特效不对应用,包括赋值等。

3、未完待续

时间: 2024-10-27 13:55:17

jquery mobile 笔记的相关文章

jQuery Mobile笔记

1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) 2.需要使用数据属性,数据属性是HTML5引入的,以data-开头 比如data-role可以用于定义页眉,页脚,内容,页面等 data-role="page" 是在浏览器中显示的页面. data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者

jQuery Mobile学习笔记

1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) 2.需要使用数据属性,数据属性是HTML5引入的,以data-开头 比如data-role可以用于定义页眉,页脚,内容,页面等 data-role="page" 是在浏览器中显示的页面. data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者

Jquery Mobile 学习笔记(一)

1.模拟器,IOS:XCODE GENYMOTION  ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role:page 代表一个页面 data-position:fixed 代表固定工具栏 data-transition:slide 跳转动画效果 data-rel:dialog 弹窗口 button:A <button>  B <input type="button" />  C <a class=&qu

jquery mobile学习笔记一

先看下面几个属性 ui-body ui-bar ui-corner-all ui-body-[a-z] custom-corners ui-bar创建一个通栏的块,可以作为内容块的区分,通过ui-bar-[a-z]用户可以修改皮肤. ui-body的用法跟ui-bar的用法一样 ui-corner-all给块添加圆角属性 custom-corners内部的元素,也继承父级元素的圆角属性. 2.按钮部分 默认情况 <input type="button" value="b

(四)Jquery Mobile表单

Jquery Mobile表单与列表 一.JM表单      1.表单      普通html表单            效果:          2.只能输入数字的表单           效果:              说明:label中的for="number-pattern" 就是说,当我们点击label是就会获取到id="number-pattern"的焦点,也就是下面input框的焦点. 3.文件文本框            效果:       4.密

(五)Jquery Mobile列表

Jquery Mobile列表 一.JM列表 1.普通列表            效果:            带序号的列表 将ul换成ol      效果:       2.data-inset="true" 增加列表的上下左右的距离       3.带小图标的列表      设置class="ui-li-icon"显示图标为中间      效果:       4.带大图的列表            效果:      5.带分割的列表           效果: 

(二)Jquery Mobile介绍以及Jquery Mobile页面与对话框

Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地址:http://www.phonegap100.com/article-79-1.html 下载地址说明:http://bbs.phonegap100.com/thread-135-1-1.html  二.JM说明 默认data-ajax="true"jquery mobile 是默认通

(三)Jquery Mobile按钮详细讲解

Jquery Mobile按钮详细讲解 一.JM按钮说明 按钮如下图所示           1.HTML5中的button      效果:      2. JM中的普通button              此中显示和HTML5是系统的.      3.JM中button内联样式 data-inline      说到内联样式和block样式,大家估计都不知道怎么回事,内联inline是说,外面的框会根据内部的文字来改变,block则正好相反,上面展示的按钮占据了整个一行的效果,现在我们需要

jquery modile 笔记

接触移动端开发很长时间了,今天做下笔记,几下所学到的,今天的笔记是关于jquery modile滴. 首先,大家要知道: jQuery Mobile 是创建移动 web 应用程序的框架. jQuery Mobile 适用于所有流行的智能手机和平板电脑. jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局. 代码: <link rel="stylesheet" href="jquery.mobile-1.4.5.css"