浅析jQuery移动开发中内联按钮和分组按钮的编写
内联按钮 data-inline=true
默认情况下，在体内含量的所有按钮都称为块级元素，所以他们填补了屏幕的宽度。
但是，如果你想让按钮外观紧凑，宽度只符合里面的文字和icon，那就给按钮添加data-inline="true"的属性。
如果你有多个按钮，应该肩并肩地坐在同一行，将data-inline="true"的属性为每个按钮。这将风格的按钮将其内容的宽度和浮动按钮让他们坐在同一条直线上。
<a href="index.html" data-role="button" data-inline="true">Cancel</a> <a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>
添加 data-mini="true" 对内联按钮创建一个更紧凑的版本:
<a href="index.html" data-role="button" data-icon="delete" data-inline="true">Cancel</a> <a href="index.html" data-role="button" data-icon="check" data-inline="true" data-theme="b">Save</a>
分组按钮 data-role=controlgroup
有时候，你想把一组按钮放进一个单独的容器内，使他们看起来想一个独立的导航部件。你可以把一组按钮包裹在一个容器内，然后给该容器添加 data-role="controlgroup" 属性，Jquery Mobile会创建一个垂直的按钮组，删除掉按钮间的margin和阴影，然后只在第一个按钮和最后一个按钮产生圆角，使他们看起来是一组按钮。
<div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>
水平排列 data-type="horizontal"
默认情况下，组按钮表现为垂直列表，如果给容器添加 data-type="horizontal" 的属性，则可以转换为水平按钮的列表，按钮会横向一个挨着一个地水平排列，并设置只有足够大以适应内容的宽度。（（所以要注意横排情况下按钮不要太多，按钮的字也不要太多）
<div data-role="controlgroup" data-type="horizontal"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>
迷你版 data-mini="true"
<div data-role="controlgroup" data-type="horizontal" data-mini="true"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>
仅图标 data-iconpos="notext"
<div data-role="controlgroup" data-type="horizontal" data-mini="true"> <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a> <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a> <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a> </div>
相关文章
这篇文章主要给大家介绍了关于如何利用jqgrid实现上移下移单元格功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
图片的展开和收缩使用jquery实现不可思议吧，感兴趣的朋友可以参考下哈，希望对你学习jquery 有所帮助2013-04-04
jquery基础知识第一讲之初次见面，对jquery有一个初步认识，为之后的学习打下基础，感兴趣的小伙伴们可以参考一下2016-03-03
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
这篇文章主要介绍了轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码，代码简单易懂，非常实用，特此分享脚本之家平台供大家学习2016-03-03
本文搜集整理了一些如邮箱、手机号码、电话号码、邮编、数字、判断是否为空、正则匹配等等常用验证;感兴趣的朋友可以了解下2013-01-01
本文给大家简单介绍了jQuery的核心函数，以及详细介绍了7种重载方法中的3种，十分的实用，有需要的小伙伴可以参考下。2015-06-06
jquery.boxy插件的iframe扩展2010-07-07
Jquery幻灯片特效代码分享 打开页面随机选择切换方式（3）
jQuery是一个非常优秀的 JavaScript 框架，使用简单灵活，一个漂亮的幻灯片更能吸引访客的注意力。本文实例讲述了jQuery实现时尚漂亮的幻灯片特效，基本能满足你在网页上使用幻灯片(焦点图)效果。分享给大家供大家参考。具体如下：2015-08-08
这篇文章主要介绍了jQuery简单实现仿京东商城的左侧菜单效果代码,通过简单的jQuery鼠标事件及元素动态变换实现样式动态切换功能,非常简单实用,需要的朋友可以参考下2015-09-09
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
这篇文章主要为大家介绍了jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项,需要的朋友可以参考下2010-12-12
最新评论