jQuery Mobile学习记录。

最近学习了jQuery Mobile,今天就将学习到的内容总结一下,作为自己的学习笔记。

jQuery Mobile跨平台移动设备网页,在此我使用Opera  Mobile Emulator移动设备模拟器。

1、首先引用jQuery Mobile库

<!--此处使用url链接,网址为:http://jquerymobile.com/download/-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style type="text/css">
    #content{text-align: center;}
</style>

最基本的框架 :

<div data-role="page">
    <div data-role="header">标题(header)</div>
    <div data-role="content">网页内容(content)</div>
    <div data-role="footer">页脚(footer)</div>
</div>
为了解决页面画面在移动设备上显示比例更好,则在<head></head>标签内添加以下代码:

<meta  name="viewport" content="width=device-width,initial-scale=1 ">

2、套用jQuery Mobile  UI组件,

(1)、Text Input文本框以及范围滑块(Range Slider);

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

和<input type="range" name="rangebar" id="rangebarid" value="25" min="0" max="100" data-highlight=="true">

(2)、Redia Button(单选按钮)

<!--fieldset标记用来创建组,使文本排版更加紧促-->
    <fieldset data-role="controlgroup">
        <legend>最喜欢的水果:</legend>
        <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3"  >
        <label for="radio-choice-3" >桔子</label><!--以上3个是一种方法,以下是第二个方法-->
        <label> <input type="radio" name="radio-choice" checked />柠檬</label>
    </fieldset>

(3)、Check Box(复选框)

<label><input type="checkbox" name="checkbox-0" checked />同意</label>同样有2种方法

(4)、按钮

<div data-role="controlgroup" data-type="horizontal">
     <a href="#second" data-role="button/submit/reset" data-icon="forward" data-iconpos="left"  data-inline="true">按我到第二页</a>
     <!--data-icon:添加小图标,data-iconpos:小图标的方向;data-inline:制作紧实的按钮-->
     <a href="#second" data-role="button" data-icon="search" data-iconpos="left"  data-inline="true" id="gosecond">按我到第二页</a>
 </div>

(7)、列表

<!--列表-->
    <ol data-role="listview" data-inset="true"><!--data-inset="true"意思是让listview不要与屏幕同宽并加上圆角。-->
        <li><a href="chinese.html">
            <h3>语文</h3>
            <p>时间: 星期一 人数:15人</p>
            <span class="ui-li-count">12</span><!--Count bubble计数泡泡-->
        </a>
            <a href="#tacking" data-icon="gear"></a>
        </li>
        <li><a href="math.html">数学</a></li>
        <li><a href="English.html">英语</a></li>
    </ol>

3、网页导航与布景主题

返回上一页:<a href="" data-rel="back">后退</div>

弹出一个窗口:<a href="" data-rel="dialog"></div>

4、jQuery Mobile 事件

(1)、页面事件

<!--页面事件-->
    <!--绑定事件用on方法也可以用One(只能执行一次)-->
    <!--Pagebeforecreate会在页面加载完DOM后,在初始化时触发,Pagecreate当页面加载完,初始化也完成时触发。Pageinit在页面初始化后触发
    <script type="text/javascript">
        $(document).on("Pagebeforecreate",function(){
            alert("pagebreforecreate事件被触发了!");
        });
        $(document).on("Pagecreate",function(){
            alert("Pagecreate事件被触发了!");
        });
        $(document).on("Pageinit",function () {
            alert("Pageinit事件被触发了!");
        });
    </script>
<!--外部页面加载事件
    <script type="text/javascript">
        $(document).on("pageload",function (event,data) {
            alert("URL:"+data.url);
        });
        $(document).on("pageloadfaild",function () {
            alert("页面加载失败");
        });
    </script>
    <!--页面切换事件
    <script type="text/javascript">
$(document).one("pagecreate",".demo_page",function () {
    $("#gosecond").on('click',function () {
        $( ":mobile-pagecontainer" ).pagecontainer("change","#second",{transtion:"pop"});
    });
    $("#gofirst").on('click',function () {
        $(":mobile-pagecontainer").pagecontainer("change","#first",{transtion:"pop"});
    });
    $("#gothree".on("click",function () {
      $(":mobile-pagecontainer").pagecontainer("change","#three",{transtion:"pop"});
    });
    $("#gosecond1").on('click',function () {
        $( ":mobile-pagecontainer").pagecontainer("change","#second",{transtion:"pop"});
    });
})
    </script>

(2)、触摸事件

<!--点击事件,tap:在触碰页面时就会触发,taphold:当点击页面按住不动时就会触发-->
<script type="text/javascript">
 $(document).on("mobileinit",function(){
     $.event.special.tap.tapholdThreshold=2000
 });
 $(function () {
     $("#main_content").on("tap",function () {
         $(this).css('color','red')
     });
     $("#biaoti").on('taphold',function () {
         $(this).css('color','blue')
     });
 });
</script>

(3)、滑动事件

利用swipe方法实现,swipeleft向左滑动,swiperight:向右滑动;

$("").on("swipe",function(){

  $("span").text("滑动屏幕!");

});

(4)、滚动事件

利用scrollstart开始滚动,scrollstop开始停止滚动。

(5)、屏幕方向改变事件

使用orientationchange事件绑定到windows组件从而通过event对象来接收orientation属性值。

$(window).on("orientationchange",function(event){

alert("当前设备屏幕方向是:"+event.orientation);

});

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页