一.Button 组件及 jQuery Mobile 如何丰富组件样式
在 jQuery Mobile 里,可以通过给任意链接添加 data-role=“button” 来产生一个 button 组件,jQuery Mobile 会追加一定的样式到链接,值得注意的是,jQuery Mobile 在给组件元素追加样式时不一定只在原有的元素上添加 CSS 和 Javascript 响应,一般还会追加一些新的元素使到组件的样式更接近于原生的 App 组件样式。下面给出一个例子:
这是一个添加了 data-role=“button” 属性的链接,原 HTML 如下
<a href="#page2" data-role="button">Link button</a>
在浏览器上显示的样式如下:
这时用 DOM 查看工具查看实际得到的 HTML ,可以发现 jQuery Mobile 不仅给原来的 a 元素添加了 CSS 以丰富按钮样式,还另外追加了一些 HTML 使到样式更加丰富,当然这个部分由 jQuery Mobile 自动完成,并不需要开发者操心太多。
注:带链接的按钮元素和表单中的 button 元素会被自动渲染,无需另外添加 data-role="button" 属性。
二.带图标按钮
jQuery Mobile 允许开发者通过在链接中添加 data-icon="" 属性来为 button 组件添加一个标准的 Web 图标,并且支持通过 data-iconpos="" 属性设置图标相对于文字的位置( top, bottom, right ,默认为 left )。
<a href="#page2" data-role="button" data-icon="check">Check</a>
<a href="#page2" data-role="button" data-icon="check" data-iconpos="top">Check</a>
data-icon 属性的可取值(来源于 jQuery Mobile 中文手册)
.按钮组
如果你希望把一些按钮放到一个容器内,构建一个导航之类的独立部件(按钮组),可以将按钮放到一个容器内并给容器设置 data-role="controlgroup" 属性,如果希望得到水平式的按钮组,则添加 data-type="horizontal" 属性到容器里。
<div data-role="controlgroup"> <a href="#page2" data-role="button">是</a> <a href="#page2" data-role="button">否</a> <a href="#page2" data-role="button">取消</a> </div>
四.其他按钮组件可用属性
1. data-theme=“” , 所有的 jQuery Mobile 组件均支持该属性,用于设置组件的颜色, 该属性默认有五个值 a, b, c, d, e,分别代表由深到浅五种颜色,另外开发者还可以通过在 CSS 里添加相应的 Class 来自定义颜色。
2. data-inline="" ,内联按钮,button 组件添加该属性后会自动改成内联的形式, jQuery Mobile 会给链接添加 display: inline-block 的 CSS ,让链接按照文字的长度来控制自身长度,并且可以与其他内联元素共行。
五.按钮绑定事件
我们以例子来讲,直接上代码:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <script src="/UploadFiles/2021-04-02/jquery-1.10.2.min.js">看看运行效果:
- hashchange 启用可标记 #hash 历史,哈希值会在一次独立的点击时发生时变化,比如一个用户点击后退按钮,会通过 hashchange事件进行处理。
- navigate 包裹了 hashchange 和 popstate 的事件
- orientationchange 方向改变事件,在用户垂直或者水平旋转移动设备时触发。
- pagebeforechange 在页面切换之前,触发的事件。使用$.mobile.changePage()来切换页面,此方法触发2个事件,切换之前的pagebeforechange事件,和切换完成后pagechange(成功)或者pagechangefailed(失败)。
- pagebeforecreate 页面初始化时,初始化之前触发。
- pagebeforehide 在页面切换后旧页面隐藏之前,触发的事件。
- pagebeforeload 在加载请求发出之前触发
- pagebeforeshow 在页面切换后显示之前,触发的事件。
- pagechange 在页面切换成功后,触发的事件。使用$.mobile.changePage()来切换页面,此方法触发2个事件,切换之前的pagebeforechange事件,和切换完成后pagechange(成功)或者pagechangefailed(失败)。
- pagechangefailed 在页面切换失败时,触发的事件。使用$.mobile.changePage()来切换页面,此方法触发2个事件,切换之前的pagebeforechange事件,和切换完成后pagechange(成功)或者pagechangefailed(失败)。
- pagecreate 在页面创建成功之后,触发的事件,但增强完成之前。
- pagehide 在页面切换后老页面隐藏之后,触发的事件。
- pageinit 在页面页面初始化时,触发的事件。
- pageload 在页面完全加载成功后触发。
- pageloadfailed 如果页面请求失败触发。
- pageremove 在窗口视图从 DOM 中移除外部页面之前触发。
- pageshow 在过渡动画完成后,在"到达"页面触发。
- scrollstart 当用户开始滚动页面时触发。
- scrollstop 当用户停止滚动页面时触发。
- swipe 当用户在元素上水平滑动时触发。
- swipeleft 当用户从左划过元素超过 30px 时触发。
- swiperight 当用户从右划过元素超过 30px 时触发。
- tap 当用户敲击某元素时触发。
- taphold 当元素敲击某元素并保持一秒时触发。
- throttledresize 启用可标记 #hash 历史记录
- updatelayout 由动态显示/隐藏内容的 jQuery Mobile 组件触发。
- vclick 虚拟化的 click 事件处理器
- vmousecancel 虚拟化的 mousecancel 事件处理器
- vmousedown 虚拟化的 mousedown 事件处理器
- vmousemove 虚拟化的 mousemove 事件处理器
- vmouseout 虚拟化的 mouseout 事件处理器
- vmouseover 虚拟化的 mouseover 事件处理器
- vmouseup 虚拟化的 mouseup 事件处理器
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]