文档章节

jQuery Mobile

JohnAugust
 JohnAugust
发布于 2017/03/10 11:52
字数 1197
阅读 2
收藏 0

JQuery Mobile框架

通过提供可触摸的UI小部件和Ajax导航系统,使页面支持动画式切换效果,以页面中的元素标记为事件驱动对象,当触摸或点击时进行触发。

设置角色——data-role


<div data-role="page">
    <div data-role="header"><h1>jQuery Mobile</h1></div>
    <div data-role="content"><p>Hello World!</p></div>
    <div data-role="footer">
        <h4>?2013 rttop.cn studio</h4>
    </div>
</div>

自定义元素属性——dataset

——(属性名前必须带有”data-“字符,字符后面允许用户自定义属性名称)

<div id="title" data-title="jQuery Mobile" data-time="2017-02-28">
    jQuery权威指南
</div>

var title=document.getElementById("title");
if(title.dataset){
    alert(title.dataset.title);
}
else{
    alert("errror");
}

1对话框元素——data-rel=”dialog”

属性——data-rel

属性值——dialog

<a href="dialog.html" data-rel="dialog" data-transition="pop">点击打开对话框</a>

2工具栏元素

工具栏由移动应用的头部栏、工具条、尾部栏三部分组成,分别放置在应用程序中标题部分、内容部分、页尾部分

<div data-role="page" id="e1">
    <div data-role="header" data-position="inline">
        <a href="#" data-icon="arrow-l">上一张</a>
        <h1>图片</h1>
        <a href="#e2" data-icon="arrow-r">下一张</a>
    </div>
    <div data-role="content" style="text-align:center">
        <img src="img/pic01.jpg"/>
    </div>
    <div data-role="footer">
        <h4>?2017 rttop.cn studio</h4>
    </div>
</div>
<div data-role="page" id="e2">
    <div data-role="header" data-position="inline">
        <a href="#e1" data-icon="arrow-l">上一张</a>
        <h1>图片</h1>
        <a href="#e2" data-icon="arrow-r">下一张</a>
    </div>
    <div data-role="content" style="text-align:center">
        <img src="img/pic02.jpg"/>
    </div>
    <div data-role="footer">
        <h4>?2017 rttop.cn studio</h4>
    </div>
</div>

3内容布局

多列布局

多列的网格布局——样式ui-grid

两列——ui-grid-a

三列——ui-grid-b

四列——ui-grid-c

五列——ui-grid-d

折叠

折叠——data-role=”collapsible”

折叠组——data-role=”collapsible-set”

<div data-role="page">
    <div data-role="header">
        <h1>Title</h1>
    </div>
    <div data-role="collapsible-set">
        <div data-role="collapsible">
            <h3>book</h3>
            <p><a href="#">culture</a></p>
            <p><a href="#">社科</a></p>
            <p><a href="#">少儿</a></p>
        </div>
        <div data-role="collapsible" data-collapsed="false">
            <h3>music</h3>
            <p><a href="#">pop musiec</a></p>
            <p><a href="#">民族</a></p>
            <p><a href="#">通俗</a></p>
        </div>
        <div data-role="collapsible">
            <h3>film</h3>
            <p><a href="#">欧美</a></p>
            <p><a href="#">怀旧</a></p>
            <p><a href="#">娱乐</a></p>
        </div>
    </div>
    <div data-role="footer">
        <h4>?2017 rttop.cn studio</h4>
    </div>
</div>

按钮

链接按钮——data-role=”button”

<a href="#" data-role="button" class="ui-btn-active"></a>

表单按钮——submit、reset、button

<div data-role="page">
    <div data-role="header"><h1>Title</h1></div>
    <div class="ui-grid-a">
        <div class="ui-block-a">
            <a href="#" data-role="button" class="ui-btn-active">确定</a>
        </div>
        <div class="ui-block-b">
            <input type="submit" value="cancel"/>
        </div>
        <div data-role="footer">
            <h4>2017? rttop .cn studio</h4>
        </div>
    </div>
</div>

按钮同一行显示——data-inline=”true”

表单元素

针对表单,jQuery Mobile提供了一套完全基于HTML的原始代码,又适合触摸操作的框架。在该框架下,所有的表单元素自动由原始代码升级为jQuery Mobile组件,然后调用各自提供的方法和属性

<div data-role="page">
    <div data-role="header">
        <h1>头部栏</h1>
    </div>
    <div data-role="content">
        搜索:<input type="search" name="password" id="search" value=""/>
        姓名:<input type="text" name="name" id="name" value=""/>
        书号:<input type="number" name="number" id="number" value="0"/>
    </div>
    <div data-role="footer">
        <h4>2017? rttop .cn studio</h4>
    </div>
</div>

列表视图

列表——data-role=”listview”

<div data-role="page">
    <div data-role="header"><h1>头部栏</h1></div>
    <ul data-role="listview">
        <li>
            <h3>book</h3>
            <p>一本好书,就是一个良师益友</p>
            <ul>
                <li><a href="#">computer</a> </li>
                <li><a href="#">culture</a> </li>
            </ul>
        </li>
        <li>
            <h3>music</h3>
            <p>好的音乐可以陶冶人的情操</p>
            <ul>
                <li><a href="#">pop music</a> </li>
                <li><a href="#">custom music</a> </li>
            </ul>
        </li>
    </ul>
    <div data-role="footer">
        <h4>2017? rttop .cn studio</h4>
    </div>
</div>

API接口

默认配置

$(document).bind("mobileinit",function(){
    $.extend($.mobile,{
        loadingMessage:'努力加载中...',
        pageLoadErrorMessage:'找不到对应页面'
   
}) ;
})

方法

跳转页面——changePage()

$(function(){
    $.mobile.changePage("about.html",{
        transition:"slideup"
   
});
})

跳转页面与携带数据——changePage()

$(function(){
    $.mobile.changePage("login.php",{
        type:"post",
        data:$("form#login").serializze();
    },
    "pop",false,false
  
)
})

事件

绑定事件——live()、bind()、delegate()

常用事件:pagebeforeload、pageload、pageloadfailed、

/pagebeforechange、pagechange、pagechangefailed

/pagebeforecreate、pagecreate、pageinit

/pageremove、updatelayout

$(function(){
    $("#e1").live("pagebeforecreate",function(){
        alert("正在创建页面");
    });
    $("#e1").live("pagecreate",function(){
        alert("页面创建完成");
    });
})

页面主题

在jQuery Mobile中,由于每一个页面中的布局和组件都被设计成一个全新的面向对象的CSS框架,使整个站点或应用的视觉风格可以通过这个框架得到统一,被统一的视觉设计主题我们称之为jQuery Mobile主题样式系统

结构——控制元素在屏幕中显示的位置、填充效果、内外边距等

主题——控制元素的颜色、渐变、字体、圆角、阴影等视觉效果,并包含了多套色板,每套色板定义了列表项、按钮、表单、工具栏、内容块、页面的全部视觉效果。

 <div data-role="page">

    <div data-role="header"><h1>头部栏</h1></div>

    <div data-role="content">

        <select name="selTheme" id="selTheme" data-naive-menu="false">

            <option value="">选择主题</option>

            <option value="a">主题a</option>

            <option value="b">主题b</option>

            <option value="c">主题c</option>

            <option value="d">主题d</option>

            <option value="e">主题e</option>

        </select>

    </div>

    <div data-role="footer">

        <h4>2017? rttop .cn studio</h4>

    </div>

</div>

$(function(){
    var objSetheme=$("#selTheme");
    objSetheme.bind("change",function(){
        if(objSetheme.val()!=""){
            $.cookie("StrTheme",objSetheme.val(),{
                path:"/",
                expires:7
            })
            window.location.reload();
        }
    })
    if($.cookie("StrTheme")){
        $.mobile.page.prototype.options.theme= $.cookie("StrTheme");
    }
})

 

© 著作权归作者所有

共有 人打赏支持
上一篇: ECMAScript基本概念
下一篇: Bootstrap之JS插件
JohnAugust
粉丝 0
博文 24
码字总数 28892
作品 0
台州
程序员
私信 提问

暂无文章

jenkins安装

https://my.oschina.net/u/593517/blog/1797968 jenkins 安装 https://my.oschina.net/u/593517/blog/3028175 GIT 安装 https://my.oschina.net/u/593517/blog/3028179 maven 安装 插件安装 ......

Gm_ning
10分钟前
1
0
小言服务端解决方案-监控

框架保证方向,整体包容细节 为保证服务端运行平稳正常,owner应使得系统应保有相应的监控:系统监控,业务监控。而服务运行的平稳高效是否有保障跟监控粒度又成直接的正比关系。本文仅针对开...

重城重楼
21分钟前
0
0
搜索引擎(Elasticsearch搜索详解)

学完本课题,你应达成如下目标: 掌握ES搜索API的规则、用法。 掌握各种查询用法 搜索API 搜索API 端点地址 GET /twitter/_search?q=user:kimchy GET /twitter/tweet,user/_search?q=user:...

这很耳东先生
45分钟前
6
0
浅谈如何减少GC的次数

GC会stop the world。会暂停程序的执行,带来延迟的代价。所以在开发中,我们不希望GC的次数过多。 本文将讨论如何在开发中改善各种细节,从而减少GC的次数。 (1)对象不用时最好显式置为 Nu...

浮躁的码农
47分钟前
1
0
jpa 自定义返回对象

任何ORM框架都少不了开放自定义sql的问题。jpa自然也不例外,很多场景需要写复杂sql的。 首先定义一个方法签名,然后打上@Query注解。像下面这样,需要注意nativeQuery,这个表示query中的字...

朝如青丝暮成雪
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部