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

赞 (0)

相关推荐

  • jQuery移动页面开发中主题按钮的设计示例

    jQuery移动页面开发中主题按钮的设计示例

    在白色图标后的半透明的黑色圆圈确保了在任何背景色下图片都能够清晰显示,也使它能很好的工作在Jquery Mobile主题系统中.以下是一些在不同主题样式下图标按钮的例子 "A"主题下的图标按钮 data-theme="a" <div data-role="content"> <div data-role="controlgroup" data-type="horizontal"> &

  • 使用jQuery在移动页面上添加按钮和给按钮添加图标

    使用jQuery在移动页面上添加按钮和给按钮添加图标

    创建按钮 data-role=button 给HTML元素添加 data-role="button" 属性.jQuery Moble就会给此元素增强为按钮样式. Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery Mobile包含的是的白色的图标sprite图片,并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示. 样式链接按钮 在一个网页的主要内容块,你可以样式的任何锚链接为按钮添加 data-role=&q

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

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

    内联按钮 data-inline=true 默认情况下,在体内含量的所有按钮都称为块级元素,所以他们填补了屏幕的宽度. 但是,如果你想让按钮外观紧凑,宽度只符合里面的文字和icon,那就给按钮添加data-inline="true"的属性. 如果你有多个按钮,应该肩并肩地坐在同一行,将data-inline="true"的属性为每个按钮.这将风格的按钮将其内容的宽度和浮动按钮让他们坐在同一条直线上. <a href="index.html"

  • 浅析jQuery 3.0中的Data

    浅析jQuery 3.0中的Data

    jQuery 3.0 在6月9日正式发布了,3.0 也被称为下一代的 jQuery.这个版本从14年10月开始,其中发布过一次beta 版(2016/1/14,)和候选版(2016/05/20).一路走来,颇为不易. 一.Data浅析 jQuery 3.0 中的 Data 是内部使用的,定义为一个"类".一共用它创建了两个对象,dataPriv 和 dataUser.Data 有 1 个对象属性(expando)和类属性(uid),有 6 个方法,如下 下面分别解读 1.Data.ui

  • Android开发中在TableView上添加悬浮按钮的方法

    Android开发中在TableView上添加悬浮按钮的方法

    如果直接在TableVIewController上贴Button的话会导致这个会随之滚动,下面解决在TableView上实现位置固定悬浮按钮的两种方法: 1.在view上贴tableView,然后将悬浮按钮贴在view的最顶层 2.使用window 首先看一下最终的效果,在tableViewController上添加一个悬浮按钮,该按钮不能随着视图的滚动而滚动 首先介绍上面的第一种方法: 1)创建tableview和底部按钮的属性 //屏幕宽 #define kScreenW [UIScreen

  • C#中内联函数的用法介绍

    C++ 中有个内联函数,使用 inline 来修饰函数,编译器就会对其进行优化,将此函数作为代码判断插入到调用处. 函数调用在执行时,首先要在栈中为形参和局部变量分配存储空间,然后还要将实参的值复制给形参,接下来还要将函数的返回地址(该地址指明了函数执行结束后,程序应该回到哪里继续执行)放入栈中,最后才跳转到函数内部执行.这个过程是要耗费时间的. 另外,函数执行 return 语句返回时,需要从栈中回收形参和局部变量占用的存储空间,然后从栈中取出返回地址,再跳转到该地址继续执行,这个过程也要耗费

  • jQuery Mobile开发中日期插件Mobiscroll使用说明

    jQuery Mobile开发中日期插件Mobiscroll使用说明

    近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3 jqueryMobileDatebox 这个在板上的表现不好,性能方面有点卡 mobiscroll 性能方面比前者要好一些,效果更简洁 ,划动更流畅 放在一起对比下 各位看官,你们觉得哪个

  • 浅析iOS应用开发中线程间的通信与线程安全问题

    浅析iOS应用开发中线程间的通信与线程安全问题

    线程间的通信   简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信   线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任务后,转到另1个线程继续执行任务   线程间通信常用方法 复制代码 代码如下: - (void)performSelectorOnMainThread:(SEL)aSelector withObject:(id)arg waitUntilDone:(BOOL)wait; - (void)performSelecto

  • 浅谈内联函数与宏定义的区别详解

    用内联取代宏:1.内联函数在运行时可调试,而宏定义不可以;2.编译器会对内联函数的参数类型做安全检查或自动类型转换(同普通函数),而宏定义则不会: 3.内联函数可以访问类的成员变量,宏定义则不能: 4.在类中声明同时定义的成员函数,自动转化为内联函数.文章(一)内联函数与宏定义 在C中,常用预处理语句#define来代替一个函数定义.例如: #define MAX(a,b) ((a)>(b)?(a):(b)) 该语句使得程序中每个出现MAX(a,b)函数调用的地方都被宏定义中后面的表达式((a)

  • ARM体系下的GCC内联汇编教程详解

    在操作系统级的编程中,有时候,C语言并不能完全的使用硬件的功能,这时候就需要嵌入一些汇编代码来实现功能. 有两种方式可以使C语言和assemly语言一起工作,一种是两种语言分开写成两个文件,链接的时候链接成一个文件;另一种就是在C语言中嵌入汇编代码.下面简单介绍一下如何在GCC中嵌入汇编代码. GCC规定了一个内联汇编的语法,不同硬件平台上的GCC内联汇编几乎都是这样的: asm( 汇编指令列表 :输出运算符列表 :输入运算符列表 :被更改的资源列表 }; 在GCC中插入汇编代码,需要以asm关

  • React Native开发中自动打包脚本的实例代码

    React Native开发中自动打包脚本的实例代码

    在日常的RN开发中,我们避免不了需要将我们编写的代码编译成安装包,然后生成二维码,供需要测试的人员扫描下载.但是对于非原生的开发人员来说,可能不知如何使用Xcode或者Android studio来导出ipa.apk安装包,为了解决非原生开发的同学们打安装包的痛苦,这里作者就提供一个shell脚本文件来实现一键式自动打包并生成安装二维码 (这里上传安装包生成二维码需要借助于三方平台fir.im) 打包脚本文件下载地址 https://github.com/guangqiang-liu/AutoP

  • 详解jQuery移动页面开发中的ui-grid网格布局使用

    详解jQuery移动页面开发中的ui-grid网格布局使用

    在移动设备上,屏幕宽度狭窄,因此通常不使用多栏布局,但是有时你可能需要将小的元素(如按钮或并排导航标签,例如)多列排列在一起.Jquery Mobile 框架提供了一种简单的方法构建基于css 的分栏布局,叫做ui-grid Jquery Mobile 提供有四个预设的布局,可以在任何情况下都需要列 两列(使用ui-grid-a类) 三列(使用ui-grid-b类) 四列(使用ui-grid-c类) 五列(使用ui-grid-d类) 网格是100%的宽度,完全看不见的(没有边界或背景)和没有ma

随机推荐