jQuery Mobile学习记录。

最新推荐文章于 2021-01-27 08:54:27 发布

Jimmy-?????

最新推荐文章于 2021-01-27 08:54:27 发布

阅读量337

点赞数

本文链接：https://blog.csdn.net/qq_41169214/article/details/80711806

版权

最近学习了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>标签内添加以下代码：

2、套用jQuery Mobile UI组件，

（1）、Text Input文本框以及范围滑块（Range Slider）；

和<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>