JQueryMobile入门1

示例：




    
    
    
    
    
    JQueryMobile Demo


这是一个简单的jquerymobile示例

使用dataset属性驱动的jQueryMobile组件

jQueryMobile提供了丰富的UI界面库，这些库都是基于移动设备小屏幕自适应的，使用dataset自定义属性，赋予html元素不同的功能；

jQueryMobile自定义属性如下：
- data-role 定义元素在页面的功能角色,例如data-role="page"定义了一个视图页面
- data-title 定义视图页面的标题
- data-transition 定义视图切换的动画效果
- data-rel 定义具有浮动层效果的视图
- data-theme 指定元素或者组件的主题样式风格
- data-icon 在元素内增加一个icon小图标
- data-iconpos 定义小图标的位置，还允许设置notext值，指定只有按钮没有文字的按钮
- data-inline 指定按钮根据内容自适应其长度
- data-type 定义分组按钮按水平或者垂直方向排列
- data-rel 定义具有特定功能的元素属性，例如返回按钮：data-rel="back"
- data-add-back-btn 指定视图页自动在页眉左侧添加返回按钮
- data-add-back-text 指定返回按钮的文本内容
- data-position 实现在滑动屏幕时工具栏的显示还是隐藏状态
- data-fullscreen 用于指定全屏视图页面
- data-native-menu 指定下拉选择功能采用平台内置的选择器
- data-placeholder 设置下拉选择功能的占位符
- data-inset 实现嵌套列表的功能
- data-split-icon 设置列表右侧的图标
- data-split-theme设置列表右侧图标的主题样式风格
- data-filter开启列表过滤搜素功能
示例：




    
    
    
    
    
    JQueryMobile Demo
    
    


    
        页头
        内容
        页尾

可以将以上示例中div全部换成html5的新元素，稍作修改如下：




    
    
    
    
    
    JQueryMobile Demo
    
    


    
        页头
        内容
        页脚

多视图页面




    
    
    
    
    
    JQueryMobile Demo
    
    


    
        页头
        
        转到下一页
        
        页脚
    
    
        页头
        
        转到上一页
        
        页脚

设置页面标题


    页头
    
        转到下一页
    
    页脚

视图切换动画

JQueryMobile通过CSS3的transition动画机制，在多视图切换或返回按钮事件中，采用动画效果切换视图
JQueryMobile动画切换属性：

slide 默认方式，从右往左切换
slideup 从下往上
slidedown 从上往下
pop 弹出窗口
fade 渐变褪色方式
flip 旧页面翻转飞出，新页面飞入

转到下一页
dialog对话框

只要在data-rel属性中定义了dialog属性，视图就具有dialog浮动层的效果

  转到下一页

页面主题

开发人员可通过data-theme属性对视图、header、footer等设置不同的主题

button组件

button组件
转到下一页
具有icon图标的button组件
转到下一页
通过data-iconpos来改变icon位置：left right top botton
转到下一页
通过data-iconpos="notext" 创建没有文字，只有图标的按钮。
自定义图标按钮

例如：data-icon="myapp-email" ，则在CSS中相对应的样式名称：.ui-icon-myapp-email，并在该样式中把图标设为背景，自定义图标像素大小18X18，png-8格式透明背景图片

具有内联样式的button data-inline="true"
转到上一页
 转到下一页
两个按键在同一行
具有分组功能的button按钮

jqm在按键列表外层增加一个div元素，并设置data-role熟悉为controlgroup,即可提供分组按钮功能
在div种定义data-type属性值为horizontal，把垂直分组按钮改变成水平排列

Paste_Image.png

JQueryMobile入门1

使用dataset属性驱动的jQueryMobile组件

button组件

你可能感兴趣的:(JQueryMobile入门1)