浅析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 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
使用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基础知识:控制结构
2006/12/13 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
微信小程序实现天气预报功能
2018/07/18 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
js仿360开机效果
2019/12/26 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
幼儿园优秀教师事迹
2014/02/13 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
美丽人生观后感
2015/06/03 职场文书
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS