Web前端开发学习之路——JQuery Mobile UI组件

套用UI组件

jQuery Mobile各种可视化组件的语法大多数与HTML5标记大同小异,这里不再阐述,仅列出这些常用的组件。由于按钮(Button)和列表(List View)功能变化比较大,后面将对其进行详细介绍。

文本框(Text Input)

input type="text" name="uname" id="uid" value="">

范围滑块(Range Slider)


Web前端开发学习之路——JQuery Mobile UI组件_第1张图片

单选按钮(Radio Button)

最喜欢的水果:

Web前端开发学习之路——JQuery Mobile UI组件_第2张图片

复选框(Check Box)

/*第一种写法*/

/*第二种写法*/

Web前端开发学习之路——JQuery Mobile UI组件_第3张图片

选择菜单(Select Menu)


Web前端开发学习之路——JQuery Mobile UI组件_第4张图片

按钮(Button)

链接按钮(link button)

在前面的范例种曾经利用标记产生文字超链接,让页面能够进行切换,如果要让超链接通过按钮显示,就要使用data-role="button"属性,语法如下:

第二页

data-mini="true"属性可以让按钮及字体小一号显示

表单按钮(form button)

Web前端开发学习之路——JQuery Mobile UI组件_第5张图片

也可以使用data-icon属性再加入小图标,语法如下:

删除

Web前端开发学习之路——JQuery Mobile UI组件_第6张图片

图标参数及说明
图标参数 说明
data-icon="delete" 删除
data-icon="arrow-l" 向左箭头
data-icon="arrow-r" 向右箭头
data-icon="arrow-u" 向上箭头
data-icon="arrow-d" 向下箭头
data-icon="plus" 加号
data-icon="minus" 减号
data-icon="check" 复选
data-icon="gear" 齿轮
data-icon="refresh" 重新整理
data-icon="forward" 前进
data-icon="back" 后退
data-icon="star" 星号
data-icon="grid" 表格
data-icon="alert" 警告
data-icon="info" 信息
data-icon="home" 首页
data-icon="search" 搜索

小图片默认会显示在按钮的左侧,如果想更换图标的位置,只要用data-iconpos属性指定上(top)、下(bottom)、右(right)位置即可,语法如下

警告
主页

Web前端开发学习之路——JQuery Mobile UI组件_第7张图片

如果不想出现文字,将data-iconpos的属性值指定为notext,就只会显示按钮而没有文字了。你会发现制作完成的按钮会以屏幕宽度为自身的宽度,如果想要制作紧凑的按钮,可以加上data-inline="true"属性。

星号
重新调整
搜索

Web前端开发学习之路——JQuery Mobile UI组件_第8张图片

组按键

有时候想把按钮排在一起,例如导航栏一整排的按钮,可以先用data-role="contrlgroup"属性定义为组,再将按钮放在这个

里面,代码如下:

Web前端开发学习之路——JQuery Mobile UI组件_第9张图片

显示的按钮默认为垂直排列,用data-type="horizontal"属性指定为水平即可,如下表达式:

Web前端开发学习之路——JQuery Mobile UI组件_第10张图片

列表

List View是移动设备最常见的组件,因为手机的屏幕小,所以数据适合以列表方式显示,例如商品列表、购物车、新闻等都很适合利用List View组件来产生。再jQuery Mobile中要操作这样的UI非常简单,只要用编号列表(ordered list)

    标记加上
  1. 标记,或是项目列表(unordered list)

你可能感兴趣的:(前端开发,前端开发,jQuery,UI)