jquery mobile 移动web(3)】的更多相关文章

工欲善其事,必先利其器. UI工具可以提高我们开发界面的效率,下面对几款工具做个对比: 1. Codiqa,在JQuery Mobile主页能看到这款工具,看到网上这么多人吹捧这个工具,不过是收费的. 2. Tiggzi,也是网上众多人推荐的,不过也是收费的. 3. RID,无意间搜索到的,https://01.org/rib/,免费的,是sourceforge项目. RID简单介绍 RID(Rapid Interface Builder,快速界面构建)是一款基于浏览器的移动Web应用用户界面设…
什么是web app web app 是基于web的应用程序,是针对移动设备优化后的web站点,它具有 开发成本低——采用web开发技术,不需要考虑跨平台以及底层适配问题: 升级简单——不需要通知用户,在服务端更新文件即可: 维护方便——本质是站点,所以维护方式于web站点相同 等优点.开发web app使用的技术:前端 html5 + css + JavaScript / 后端 php | java | .net. 随着 html5 的发展,我们能使用越来越多的功能,比如:地理定位.本地数据储…
轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mobile-1.1.2.css"/> <script type="text/javascript" src="jquery.mobile-1.1.2/jquery-1.6.4.js"></script> jquery 应放在 mob…
在这里我们主要讲一下如何引用jQuery Mobile(引用了jQuery Mobile,你就能引用jQuery Mobile里已经封装好的代码,让开发更加快捷简单) 从 CDN 引用 jQuery Mobile(推荐)——也就是以http外部链接调用jQuery Mobile库 从 jQuerymobile.com 下载 jQuery Mobile 库 下载jQuery Mobile库网址:http://jquerymobile.com/download/ 下载的库里包含着jQuerymobi…
jquery mobile 针对移动端设备的事件类型. 1.touch 事件. tap 快速触摸屏幕并且离开,类似一种完整的点击操作. taphold 触摸屏幕并保持一段时间. swipe 在1秒内水平移动30px屏幕像素上时触发. swipeleft 向左侧滑动 swiperight 像右侧滑动. 2.方向改变事件 orientationchange 事件函数当移动设备的方向发生改变触发,在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数, 该参数有两种返回值:portrait(纵向…
有序列表 <div data-role="content"> <ol data-role="listview" data-theme="g"> <li><a href="#"> List 1</a></li> <li><a href="#"> List 2</a></li> <li&…
button 按钮 data-role="button" 将超链接变成button. 具有icon 图标的button 组件. 提供了18常用的图标 data-icon ="" 1.arrow-1左箭头 2.arrow-r 右箭头 3.arrow-u 上箭头 4.arrow-d 下箭头 5.delete 删除 6.plus 加号 7.minus 减号 8.check 对号 9.gear 齿轮 10.refresh 刷新 11.forward 前进 12.back 返…
轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mobile-1.1.2.css"/> <script type="text/javascript" src="jquery.mobile-1.1.2/jquery-1.6.4.js"></script> jquery 应放在 mob…
下拉菜单: 设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fieldcontain. <div data-role="controlgroup"> <label for="select" class="select">请选择你的兴趣</label> <select name="select"…
可折叠功能块. div 元素的 data-role 属性设置为 collapsible 代码如下: <div data-role="collapsible"> <h3>可折叠区域标题</h3> <p>这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容, 这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容, 这是一个折叠区域的内容…