jquerymobile

来源:转载

1、简介

  1. HTML5 UI framework;
  2. 专门用于RWD( responsive web design响应式网站)和app应用;
  3. 适用所有移动设备,平板,桌面设备
  4. 依赖jQuery

2、资源

官网

菜鸟yabo亚博真人娱乐

3、page-single

基本结构如下:

header

content

footer

3.1 data-position

data-position="fixed"设置固定定位

3.2 data-theme

设置主题,如data-theme="b"为反色主题

4、多页面

给每个page指定特有的id,将id传递给a链接的href属性中,不要忘记加#号,如下:

header

footer

4.1. data-title

指定页面的title标题

4.2. data-transition

指定页面跳转的动画,添加到a标签的属性中,有如下表现形式:

  1. data-transition="slide"
  2. data-transition="slideup"
  3. data-transition="slidedowm"
  4. data-transition="fade"
  5. data-transition="pop"
  6. data-transition="flip"

4.3. data-direction

data-direction="reverse" 指定页面切换的动画为反向

5、button

按钮,可以使用a、button、input标签指定按钮样式。

5.1 默认样式

a 标签添加class ui-btn

基础样式button

5.2 圆角样式

使用圆角的样式,添加class ui-corner-all

圆角样式按钮

5.3 阴影样式

使用阴影样式,添加class ui-shadow

阴影样式按钮

5.4 行内样式

使用行内样式,添加class ui-btn-inline

行内样式按钮

5.5 主题样式

可以使用class ui-btn-aui-btn-b设置按钮主题, ui-btn-b 为反色主题, 如下:

a样式按钮

b样式按钮

5.6 MINI样式

添加class ui-mini,设置按钮为mini样式:

mini样式按钮

5.7 ICON样式

按钮中添加icon,给元素添加class ui-icon-*,常用icon列表参见第6章,同时指定按钮放置的位置。

按钮放置位置,通过class ui-btn-icon-*指定,* 有如下的值:

  • ui-btn-icon-left
  • ui-btn-icon-right
  • ui-btn-icon-top
  • ui-btn-icon-button
  • ui-btn-icon-notext 无文本样式

icon样式按钮

5.8 禁用样式

给按钮添加class ui-state-disabled 呈现禁用样式

5.9 data属性控制样式

  • data-role="button" 定义按钮
  • data-theme="b" 切换到深色的主题,可以单独控制组件的主题样式
  • data-icon="back" 添加图标icon
  • data-iconpos="top" 定义icon的位置
  • data-inline="true" 行内显示
  • data-role="controlgroup" 形成一个组
  • data-corners="false" 去掉默认的圆角
  • data-shadow="false" 去掉阴影
  • data-role="controlgroup" data-type="horizontal" 横向组

6. ICONS

8. DIALOG对话框

8.1 显示对话框

在按钮上添加 data-rel="dialog",在页面上添加data-role="dialog",代码如下:

hello

8.2 关闭对话框

$('.ui-dialog').dialog('close');

9. LIST列表

9.1 无序列表

使用ul>li标签,并给ul添加data-role="listview"属性

代码如下:

  • Acura
  • Audi
  • BMW
  • Cadillac
  • Ferrari

效果如下图:

9.2 有序列表

使用ol>li标签,并给ol添加属性data-role="listview"

代码如下:

  1. Acura
  2. Audi
  3. BMW
  4. Cadillac
  5. Ferrari

效果如下图:

9.3 链接列表

再无序列表的基础上,li中使用a标签包裹子元素。

代码如下:

效果如下图:

9.4 内置列表

在链接列表的基础上,添加属性data-inset="true",为列表添加边距、圆角等样式。

代码如下:

效果如下图:

9.5 过滤列表

在列表的基础上,添加属性data-filter="true",为列表添加过滤样式及功能,并通过属性data-filter-placeholder="占位文字"设置搜索框中的占位文字。

代码如下:

效果如下图:

在输入框中输入内容可以对列表中的内容进行过滤,如图:

9.6 DATALIST列表

类似于HTML5中data-list的效果,在输入框中输入内容会有个AutoComplete提示效果

代码如下:

效果如下图:

当在输入框输入内容后,效果如下图:

9.7 类分割列表(类似通讯录列表)

代码如下:

效果如下图:

9.8 自动类分割列表(类似通讯录列表)

给列表添加属性data-autodividers="true"会自动进行类分割

代码如下:

效果如下图:

9.9 气泡列表

给包裹气泡文本内容的元素添加class ui-li-count,同时可以在ul元素上添加属性data-count-theme="b"设置主题样式

代码如下:

效果如下图:

9.10 图标列表

在li上添加属性data-icon="xxx"设置图标

代码如下:

效果如下图:

9.11 ICONS: 16×16

在a标签中添加img标签,并设置class ui-li-icon

代码如下:

效果如下图:

9.12 缩略图列表

在a标签中添加img标签即可给列表添加缩略图。

代码如下:

  • Broken Bells

    Broken Bells

  • Warning

    Hot Chip

  • Wolfgang Amadeus Phoenix

    Phoenix

效果如下图:

9.14 格式化列表

效果图中的时间内容样式,添加class ui-li-aside

代码如下:

  • Friday, October 8, 2010 2
  • Stephen Weber

    You've been invited to a meeting at Filament Group in Boston, MA

    Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.

    6:24PM

  • jQuery Team

    Boston Conference Planning

    yabo亚博真人娱乐In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.

    9:18AM

  • Thursday, October 7, 2010 1
  • Avery Walker

    Re: Dinner Tonight

    Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!

    4:48PM

效果如下图:

9.15 列表主题

  • data-theme="b" 设置列表主题
  • data-divider-theme="a" 设置类分割样式
  • data-count-theme="a" 设置气泡样式

代码如下:

效果如下图:

9.16 列表中表单

代码如下:

效果如下图:

10. 表格table

给table标签添加属性data-role="table"

代码如下:

RankMovie TitleYearRatingReviews
1Citizen Kane1941100%74
2Casablanca194297%64
3The Godfather197297%87
4Gone with the Wind193996%87
5Lawrence of Arabia196294%87
6Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb196492%74
7The Graduate196791%122
8The Wizard of Oz193990%72
9Singin' in the Rain195289%85
10Inception201084%78

效果如下图:

11. 栅格GRID

栅格系统,栅格容器使用class ui-grid-* ,添加class ui-responsive可使其变成响应式栅格。

栅格中的每一项添加class ui-block-*,第一项为ui-block-a,第二项为ui-block-b,以此类推,有几个block就是几等分

11.1 单行两列

代码如下:

Block A

Block B

效果如下图:

11.2 单行多列

代码如下:

Block A

Block B

Block C

Block D

效果如下图:

11.3 多行多列

代码如下:

Block A

Block B

Block C

Block A

Block B

Block C

Block A

Block B

Block C

效果如图:

11.4 多个栅格

代码如下:

Grid A (50/50)

Block A

Block B

Grid B (33/33/33)

Block A

Block B

Block C

Grid C (25/25/25/25)

A

B

C

D

Grid D (20/20/20/20/20)

A

B

C

D

E

效果如图:

12. Collapsible折叠面板

给容器添加属性data-role="collapsible",h4标签是显示的内容,p标签是被折叠的内容,代码如下:

Heading

I'm the collapsible content. By default I'm closed, but you can click the header to open me.

效果如图:

点击以后效果图:

13. TAB 选项卡

效果如下图:

分享给朋友:
您可能感兴趣的文章:
随机阅读: