jQuery Mobile中按钮组件基本用法教程

1.按钮组件和jQuery Mobile如何丰富组件样式在jQuery Mobile中，可以通过在任意链接上添加data-role=“button”来生成一个按钮组件，jQuery Mobile会在链接上追加一定的样式。值得注意的是，jQuery Mobile在给组件元素追加样式时，并不一定只在原来的元素上添加CSS和Javascript响应，还会追加一些新的元素，让组件的样式更接近原来的App组件样式。下面举个例子：这是一个添加了data-role=“button”属性的链接。原HTML如下。

a href=' # page 2 ' data-role=' button ' link button/a在浏览器上显示以下样式：

这时，使用DOM查看工具查看实际得到的HTML，可以发现jQuery Mobile不仅在原来的A元素中添加了CSS来丰富按钮样式，还添加了一些HTML来丰富样式。当然，这部分是由jQuery Mobile自动完成的，不需要开发人员过多担心。

注意：带有链接的按钮元素和表单中的按钮元素将自动呈现，而不添加data-role='button '属性。Ii .带图标的按钮jQuery Mobile允许开发人员通过在链接中添加data-icon=' '属性来为按钮组件添加标准的Web图标，并支持使用data-iconpos=' '属性来设置图标相对于文本的位置(顶部、底部、右侧，默认为左侧)。

a href='#page2 '数据-角色='按钮'数据-图标='检查'检查/a

a href='#page2 '数据-角色='按钮'数据-图标='检查'数据-图标='顶部'检查/a

数据图标属性的值(来自jQuery手机中文手册)。

。button group如果您想将一些按钮放在容器中并构建一个独立的部分(按钮组)，如导航，您可以将按钮放在容器中，并将data-role='controlgroup '属性设置到容器中。如果您想获得一个水平按钮组，请将data-type='水平'属性添加到容器中。

Div数据-角色='控制组' a href=' # page2 '数据-角色='按钮'是/a href=' # page 2 '数据-角色='按钮'否/a a href=' # page2 '数据-角色='按钮'取消/a/div 。

4.其他按钮组件可以使用属性1。data-theme="，所有jQuery Mobile组件都支持它，用于设置组件的颜色。默认情况下，该属性有五个值，A、B、C、D和E，代表从暗到亮的五种颜色。此外，开发人员可以通过在CSS中添加相应的类来自定义颜色。2.data-inline=' '，inline按钮。添加此属性后，按钮组件将自动更改为内联形式。jQuery Mobile会给链接添加Display3360Inline-block的CSS，这样链接就可以根据文本的长度来控制自己的长度，并且可以和其他的Inline元素进行内联。5.按钮绑定事件让我们举个例子，直接编码：

！' DOCTYPE htmlhtmlheadlink rel='样式表href=' http://代码。jquery。com/mobile/1。4 .2/jquery。移动一号。4 .2 .量滴CSS ' script src=' http :3358代码。jquery。com/jquery-1。10 .2 .量滴js '/script script src=' http 33603358代码。jquery。com/mobile/1。4 .2/jquery组合按钮/h1 /div数据-角色=“内容”分区数据-角色='controlgroup '数据-类型='水平' p水平组合按钮：/p a href='# '数据-角色='按钮id='btn1 '我绑定事件了/a a href=' # ' data-role=' button ' id=' BTN 2 '方法2绑定事件/a a href=' # ' data-role=' button ' id=' BTN 3 '按钮3模糊/a /divbr分区数据-角色='controlgroup '数据-类型='垂直' p垂直组合按钮（默认):/p a href=' # ' data-role=' button '按钮1/a a href='# '数据-角色='按钮'按钮2/a a href='# '数据-角色='按钮'按钮3/a /div p内联按钮且不带圆角：/p a href='# '数据-角色='按钮'数据-内联='真'按钮1/a a href=' # data-role=' button ' data-inline=' true '按钮2/a br a href=' # ' data-role=' button ' data-inline=' true ' data-corners=' false '按钮1/a a href=' # ' data-role=' button ' data-inline=' true ' data-corners=' false '按钮2/a p内联按钮：普通与迷你/p a href=' # ' data-role=' button ' data-inline=' true '按钮1/a a href=' # data-role=' button ' data-inline=' true '按钮2/a br a href=' # ' data-role=' button ' data-inline=' true ' data-mini=' true '按钮1/a a href=' # ' data-role=' button ' data-inline=' true ' data-mini=' true '按钮2/a分区数据-角色="页脚“h1底部文本/h1 /div/div脚本类型='text/javascript' //先解绑，再绑定$('#btn1 '). 解除绑定()。绑定(“点击”，函数(){ alert('我绑定事件了');});//on直接绑定$('#btn2 ').on('click '，function() { alert('on直接绑定事件了');});//on直接绑定失去焦点的事件$('#btn3 ').在('上模糊，函数(){警报('开启直接绑定失去焦点的事件了');});/脚本/正文/html看看运行效果：

Hashchange允许标记#hash history，当独立单击哈希值时，哈希值会发生变化。例如，如果用户单击后退按钮，它将通过hashchange事件进行处理。导航包装hashchange和popstate事件orientationchange方向更改事件，当用户垂直或水平旋转移动设备时会触发这些事件。页面切换前触发Pagebeforechange。使用$.mobile.changePage()切换页面。此方法触发两个事件，切换前的pagebeforechange事件和切换后的pagechange(成功)或pagechangefailed(失败)。初始化pagebeforecreate页面时在初始化前触发。Pagebeforehide事件在页面切换后和旧页面隐藏前触发。Pagebeforeload触发在页面切换后显示pagebeforeshow之前触发的事件。页面切换成功后触发的页面更改事件。使用$.mobile.changePage()切换页面。此方法触发两个事件，切换前的pagebeforechange事件和切换后的pagechange(成功)或pagechangefailed(失败)。页面切换失败时触发的事件失败。使用$.mobile.changePage()切换页面。此方法触发两个事件，切换前的pagebeforechange事件和切换后的pagechange(成功)或pagechangefailed(失败)。Pagecreate是在页面成功创建后，但在增强完成前触发的事件。页面切换后隐藏旧页面后触发的Pagehide事件。Pageinit是页面初始化时触发的事件。页面成功完全加载后会触发页面加载。如果页面请求失败，将触发Pageloadfailed。在窗口视图从DOM中移除外部页面之前，会触发Pageremove。过渡动画完成后，在“到达”页面上触发页面显示。当用户开始滚动页面时，Scrollstart被触发。当用户停止滚动页面时，Scrollstop被触发。当用户在元素上水平滑动时，触发滑动。当用户从左侧滑动一个元素超过30px时，Swipeleft被触发。当用户从右侧扫过一个元素超过30px时，Swiperight被触发。当点击用户点击一个元素时触发。当一个元素击中一个元素并保持一秒钟时，Taphold被触发。Throttledresize启用可标记的#hash历史记录。updatelayout由动态显示/隐藏内容的jQuery Mobile组件触发。Vclick虚拟化click事件处理程序vmusecancel虚拟化mousecancel事件处理程序vmouseoutdown虚拟化mousedown事件处理程序vmouse虚拟化mousemove事件处理程序vmouseout虚拟化mouseout事件。管理器VMotion over虚拟化vmouseover事件处理程序VMotion up虚拟化vmouseup事件处理程序。