- 浏览: 5820949 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (890)
- WindowsPhone (0)
- android (88)
- android快速迭代 (17)
- android基础 (34)
- android进阶 (172)
- android高级 (0)
- android拾遗 (85)
- android动画&效果 (68)
- Material Design (13)
- LUA (5)
- j2me (32)
- jQuery (39)
- spring (26)
- hibernate (20)
- struts (26)
- tomcat (9)
- javascript+css+html (62)
- jsp+servlet+javabean (14)
- java (37)
- velocity+FCKeditor (13)
- linux+批处理 (9)
- mysql (19)
- MyEclipse (9)
- ajax (7)
- wap (8)
- j2ee+apache (24)
- 其他 (13)
- phonegap (35)
最新评论
-
Memories_NC:
本地lua脚本终于执行成功了,虽然不是通过redis
java中调用lua脚本语言1 -
ZHOU452840622:
大神://处理返回的接收状态 这个好像没有监听到 遇 ...
android 发送短信的两种方式 -
PXY:
拦截部分地址,怎么写的for(int i=0;i<lis ...
判断是否登录的拦截器SessionFilter -
maotou1988:
Android控件之带清空按钮(功能)的AutoComplet ...
自定义AutoCompleteTextView -
yangmaolinpl:
希望有表例子更好。。。,不过也看明白了。
浅谈onInterceptTouchEvent、onTouchEvent与onTouch
在JQM中使用导航栏Navbar是简单的。
只需要将data-role="navbar"赋给div即可:
class="ui-btn-active"用于表示该nav呈选中状态,还可以使用ui-state-persist保持这种选中状态,以免每次进入该page选中状态复位的问题。
navbar一行上最多显示5个,多余5个的话会换行显示。
navbar可以放在header,footer,content中。
你可以让每个nav都有一个icon,并且可以指定icon的位置
还可以自定义icon,设置data-icon="custom",然后为每个a设置background即可:
当然如果想换皮肤的话也很简单,需要设置class="ui-body-a ui-body",把其中的a改成b,c,c,e....:
如果想设置单个navbar的话,需要使用data-theme属性:
==============================================================================
后面更精彩
==============================================================================
上面谈到的Navbar无非就是换不同的内容的,注意:不是换page!!!如果换page的话只需要用button就可以了。Navbar一般用于在同一界面显示不同的内容的!
既然是同一界面显示不同的内容,那么像下面的代码如何实现呢?
上面的代码的问题:将连接指向了新的page,既然是新的page,就不会有navbar,难道再新page中重复写一个一模一样的?Bad idea!
为了解决这个问题,需要引入Tabs
在tabs中使用navbar:
上面这种是最普通的写法。呈现的是上下结构的Tabs。
如果是左右结构需要在listview中添加data-inset="true"和class="tablist-left"
完整的代码如下:
用到的CSS:
over!
navbar动态生成不刷新?
http://blog.csdn.net/danielinbiti/article/details/27333311
只需要将data-role="navbar"赋给div即可:
<div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">One</a></li> <li><a href="#">Two</a></li> </ul> </div><!-- /navbar -->
class="ui-btn-active"用于表示该nav呈选中状态,还可以使用ui-state-persist保持这种选中状态,以免每次进入该page选中状态复位的问题。
navbar一行上最多显示5个,多余5个的话会换行显示。
navbar可以放在header,footer,content中。
你可以让每个nav都有一个icon,并且可以指定icon的位置
<div data-role="footer"> <div data-role="navbar" data-iconpos="bottom"> <ul> <li><a href="#" data-icon="grid">Summary</a></li> <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li> <li><a href="#" data-icon="gear">Setup</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer -->
还可以自定义icon,设置data-icon="custom",然后为每个a设置background即可:
<div data-role="footer" class="nav-glyphish-example" data-theme="b"> <div data-role="navbar" class="nav-glyphish-example" data-grid="d"> <ul> <li><a href="#" id="chat" data-icon="custom">Chat</a></li> <li><a href="#" id="email" data-icon="custom">Email</a></li> <li><a href="#" id="skull" data-icon="custom">Danger</a></li> <li><a href="#" id="beer" data-icon="custom">Beer</a></li> <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li> </ul> </div> </div>
.nav-glyphish-example .ui-btn { padding-top: 40px !important; } .nav-glyphish-example .ui-btn:after { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; } #chat:after { background: url("../_assets/img/glyphish-icons/09-chat2.png") 50% 50% no-repeat; background-size: 24px 22px; } #email:after { background: url("../_assets/img/glyphish-icons/18-envelope.png") 50% 50% no-repeat; background-size: 24px 16px; } #login:after { background: url("../_assets/img/glyphish-icons/30-key.png") 50% 50% no-repeat; background-size: 12px 26px; } #beer:after { background: url("../_assets/img/glyphish-icons/88-beermug.png") 50% 50% no-repeat; background-size: 22px 27px; } #coffee:after { background: url("../_assets/img/glyphish-icons/100-coffee.png") 50% 50% no-repeat; background-size: 20px 24px; } #skull:after { background: url("../_assets/img/glyphish-icons/21-skull.png") 50% 50% no-repeat; background-size: 22px 24px; }
当然如果想换皮肤的话也很简单,需要设置class="ui-body-a ui-body",把其中的a改成b,c,c,e....:
<div class="ui-body-a ui-body"> <h3>Swatch "a"</h3> <div data-role="navbar"> <ul> <li><a href="#" data-icon="grid">A</a></li> <li><a href="#" data-icon="star">B</a></li> <li><a href="#" data-icon="gear">C</a></li> <li><a href="#" data-icon="arrow-l">D</a></li> <li><a href="#" data-icon="arrow-r">E</a></li> </ul> </div><!-- /navbar --> </div><!-- /container -->
如果想设置单个navbar的话,需要使用data-theme属性:
<div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="grid" data-theme="a">A</a></li> <li><a href="#" data-icon="star" data-theme="b">B</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer -->
==============================================================================
后面更精彩
==============================================================================
上面谈到的Navbar无非就是换不同的内容的,注意:不是换page!!!如果换page的话只需要用button就可以了。Navbar一般用于在同一界面显示不同的内容的!
既然是同一界面显示不同的内容,那么像下面的代码如何实现呢?
<div data-role="footer"> <div data-role="navbar" data-iconpos="bottom"> <ul> <li><a href="#page0" data-icon="grid">Summary</a></li> <li><a href="#page1" data-icon="star" class="ui-btn-active">Favs</a></li> <li><a href="#page2" data-icon="gear">Setup</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer -->
上面的代码的问题:将连接指向了新的page,既然是新的page,就不会有navbar,难道再新page中重复写一个一模一样的?Bad idea!
为了解决这个问题,需要引入Tabs
在tabs中使用navbar:
<div data-role="tabs" id="tabs"> <div data-role="navbar"> <ul> <li><a href="#one" data-ajax="false">one</a></li> <li><a href="#two" data-ajax="false">two</a></li> <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li> </ul> </div> <div id="one" class="ui-body-d ui-content"> <h1>First tab contents</h1> </div> <div id="two"> <ul data-role="listview" data-inset="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul> </div> </div>
上面这种是最普通的写法。呈现的是上下结构的Tabs。
如果是左右结构需要在listview中添加data-inset="true"和class="tablist-left"
完整的代码如下:
<h2>Use inset listview for tabs</h2> <div data-role="tabs"> <ul data-role="listview" data-inset="true" class="tablist-left"> <li><a href="#one" data-ajax="false">one</a></li> <li><a href="#two" data-ajax="false">two</a></li> <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li> </ul> <div id="one" class="ui-body-d tablist-content"> <h1>First tab contents</h1> </div> <ul id="two" class="tablist-content" data-role="listview" data-inset="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul> </div>
用到的CSS:
.tablist-left { width: 25%; display: inline-block; } .tablist-content { width: 60%; display: inline-block; vertical-align: top; margin-left: 5%; }
over!
navbar动态生成不刷新?
http://blog.csdn.net/danielinbiti/article/details/27333311
发表评论
-
JQ插件:radiosToSlider
2014-09-11 17:43 1376demo: http://rubentd.com/radios ... -
Javascript常用正则表达式集合
2014-09-06 22:08 14921.匹配正整数:/^[0-9]*[1-9][0-9]*$/ 2 ... -
关于CSS细节集合
2014-09-05 12:23 1409以后可能会用到,记一下 原址:http://www.iteye ... -
cordova插件InAppBrowser在iPhone上显示url和Done、Back/Forward键的问题
2014-09-02 14:11 12040I am currently building a News ... -
CSS实现简单动态渐变闪烁效果
2014-08-28 15:57 4102CSS练习用例: .event { border ... -
JQ插件:nicescroll自定义滚动条
2014-08-27 15:53 2106参考: http://www.areaaperta.com/n ... -
jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码
2014-08-27 14:55 1701<!DOCTYPE html PUBLIC &quo ... -
JQ插件:qrcode生成二维码
2014-08-27 14:51 7557jquery.qrcode.js 是把它用jquery方式封装 ... -
JQ插件:日期时间选择器date picker
2014-08-27 13:59 2433这个控件关键是它能支持在mobile中显示。iPhone和an ... -
JQ插件:Knob旋钮按钮
2014-08-27 10:33 2533在线演示 用法介绍: 分享一款超棒的jQuery旋钮插件 ... -
使用google map显示地图,并标注InfoWindow
2014-08-22 17:53 8195首先导入google map JS(需要VPN): <s ... -
JQM:如何点击footer中的navbar只切换content的内容
2014-08-22 10:53 5208在JQM运用中想固定Header与Footer,当然Foote ... -
各种JS jQuery CSS资源等
2014-08-15 23:53 13582014年最酷的30个JavaScript库 http://w ... -
CSS将图片和文字垂直居中
2014-08-15 16:56 1244这个问题说起来有点惭 ... -
jQuery 中使用 JSON
2014-08-15 11:29 3268在 jQuery 中已经提供了对于解析 JSON 的内在支持, ... -
JQM Toggle switch、selectmenu动态设置默认选中值时没有效果的问题
2014-08-14 13:21 2175静态时,ok,没问题,如下: <label for=&q ... -
cordova读写文件(2)
2014-08-13 17:53 3155上一篇讲的是如何将数据写入文件 这篇讲如何读取文件。 v ... -
cordova读写文件(1)
2014-08-13 17:44 23570使用cordova可以很方便的在手机sdcard中读写文件。 ... -
JQM自动提示插件autoComplete.js
2014-08-11 17:33 1416JQM自动提示插件: https://github.com/c ... -
Jquery mobile 新手问题总汇
2014-08-05 14:43 1530http://www.wglong.com/main/arti ...
相关推荐
在使用这个控件时,开发者首先需要在HTML文件中引入jQuery、jQuery Mobile和控件所需的CSS及JavaScript文件。接着,通过在HTML元素上添加特定的class或者data属性,来激活时间控件。例如,你可以创建一个input元素,...
jqm的核心特性之一就是基于Ajax的页面导航。在文件上传场景下,可以利用Ajax来实现无刷新上传。通过`.ajax()`方法,你可以发送POST请求到服务器,将文件数据和任何其他参数一起传递。记得在请求成功或失败时处理回...
jqm模仿iPhone桌面菜单,jqm实战开发,jqm开发例子Demo jqm模仿iPhone jqmDemo jqm例子 jqm实战开发 jqm选项卡 使用jqm实现iPhone桌面功能,jQuery Mobile实现选项卡功能
综上所述,"jqm开发的音乐播放器"项目不仅展示了 jqMobi 在移动前端开发中的实用性,也体现了其在构建交互式音乐播放应用方面的潜力。开发者可以通过这个实例学习如何结合 jqMobi 的特性和 HTML5 的音频 API 来创建...
jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮jQueryMobile jqm jqm按钮隐藏 jqm按钮显示 jqm按钮事件 jQuery Mobile(jqm)input按钮的隐藏和显示 a标签的隐藏和显示 圆角按钮的css样式控制
它提供了丰富的UI组件,如导航栏、页签、下拉菜单、表单控件等,同时支持触摸事件和动画效果。通过单一的代码库,jQuery Mobile可以适应各种屏幕大小和分辨率,适应手机、平板电脑甚至是桌面浏览器。 **GWT (Google...
1. **导航条(Navbar)**:`<div data-role="navbar">`用于创建顶部或底部的导航栏,可包含多个链接按钮。 2. **表单(Forms)**:jQuery Mobile 自动美化表单元素,如输入框、选择器和按钮,并支持触摸优化的滑块...
按照zepto插件的形式编写的用于移动端的日期选择插件,参照了JQM提供的日期控件的样式。使用iscroll插件来支持滑动。代码结构通俗易懂,方便编写zepto插件的初学者学习参考。在这里分享资源也只是抛砖引玉,希望能帮...
事实上,当 JQM 致力于统一和优化这个代码基时,jQuery 核心库受到了极大关注。这种关注充分说明,移动浏览器技术在极短的时间内取得了多么大的发展。 与 jQuery 核心库一样,您的开发计算机上不需要安装任何东西;...
标题 "24时区APK+源码, android+JQM" 提供了一个关于Android应用程序开发的项目,其中结合了Java和jQuery Mobile(JQM)技术。这个项目旨在帮助初学者理解如何在Android平台上利用HTML来构建用户界面,并且通过JQM...
总之,JQM1.4.5-DEMOS为开发者提供了一个丰富的学习和实践平台,通过这个演示集,可以快速掌握jQuery Mobile的功能和用法,从而高效地构建高质量的移动Web应用。无论你是初学者还是经验丰富的开发者,这个资源都将是...
http://blog.csdn.net/chelen_jak/article/details/19397569 源码
本项目利用jqm的UI框架和PhoneGap的混合应用特性,构建了一个简单的联系人管理应用,旨在帮助用户实现对手机联系人的动态读取、添加和删除功能。虽然修改联系人功能尚未实现,但这个实例已经足以展示如何整合这两项...
WebSocket 和 jQuery Mobile(jqm)是两种在现代Web开发中常用的技术。WebSocket提供了一种双向通信协议,使得浏览器和服务器可以进行实时、低延迟的数据交换,而jQuery Mobile(jqm)则是一个轻量级的移动设备框架...
jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解
jqm 模板则是一套预先设计好的页面布局和组件配置,帮助开发者快速搭建项目框架,减少重复工作,提高开发效率。 【jQuery Mobile 的核心特点】 1. **响应式设计**:jqm 自动适应不同设备的屏幕尺寸,确保在手机、...
2. **响应式设计**:jQM的核心特性之一就是响应式布局,可以根据用户的设备屏幕大小和方向自动调整界面,确保在各种设备上都能提供良好的用户体验。 3. **HTML5**:jQM利用HTML5的新特性,如数据属性(data- ...
JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片.pdf
在这个框架中,jqm chart组件允许开发者创建各种类型的数据可视化图表,如线形图、柱状图和饼状图,以直观地展示数据。 **1. jqm chart的基本概念** jqm chart是jQuery Mobile的一个扩展,它基于HTML5、CSS3和...