浅析jQuery移动开发中内联按钮和分组按钮的编写


Posted in Javascript onDecember 04, 2015

内联按钮 data-inline=true
默认情况下,在体内含量的所有按钮都称为块级元素,所以他们填补了屏幕的宽度。

但是,如果你想让按钮外观紧凑,宽度只符合里面的文字和icon,那就给按钮添加data-inline="true"的属性。

浅析jQuery移动开发中内联按钮和分组按钮的编写

如果你有多个按钮,应该肩并肩地坐在同一行,将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>

浅析jQuery移动开发中内联按钮和分组按钮的编写

添加 data-mini="true" 对内联按钮创建一个更紧凑的版本:

浅析jQuery移动开发中内联按钮和分组按钮的编写

<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>

浅析jQuery移动开发中内联按钮和分组按钮的编写

分组按钮 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>

浅析jQuery移动开发中内联按钮和分组按钮的编写

水平排列 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>

浅析jQuery移动开发中内联按钮和分组按钮的编写

迷你版 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>

浅析jQuery移动开发中内联按钮和分组按钮的编写

仅图标 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>

浅析jQuery移动开发中内联按钮和分组按钮的编写

Javascript 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
Js四则运算函数代码
Jul 21 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
input框中的name和id的区别
Nov 16 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 #Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 #Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 #Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 #Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 #Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 #Javascript
详解JavaScript逻辑And运算符
Dec 04 #Javascript
You might like
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python判断有效的数独算法示例
2019/02/23 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
python如何快速拼接字符串
2020/10/28 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
写给女朋友的保证书
2015/05/09 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
改进工作作风心得体会
2016/01/23 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python