jQuery Mobile

最新推荐文章于 2024-07-29 13:58:45 发布

chiza4954

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量127

点赞数

文章标签： javascript ui php ViewUI

原文链接：https://my.oschina.net/u/3240534/blog/856159

版权

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”

表单按钮——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");
    }
})

转载于:https://my.oschina.net/u/3240534/blog/856159

chiza4954

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Mobile

JQuery Mobile框架通过提供可触摸的UI小部件和Ajax导航系统，使页面支持动画式切换效果，以页面中的元素标记为事件驱动对象，当触摸或点击时进行触发。设置角色——data-role <div data-role="page"> <div dat...
复制链接

扫一扫