jQuery Mobile笔记

2016-12-17 08:54:53来源:cnblogs.com作者:张晓洵人点击

第七城市
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,none6.页眉添加按钮在header页面中添加按钮,添加a连接只在页眉右边添加一个按钮:class=“ui-btn-right”可以在按钮中添加图标  data-icon7.添加返回按钮添加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事件       
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台