jQuery Mobile基础 学习笔记

最新推荐文章于 2022-02-05 19:42:14 发布
最新推荐文章于 2022-02-05 19:42:14 发布
阅读量970 收藏 2
点赞数
分类专栏： Web 文章标签： jQuery Mobile
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oYueMiJinDu/article/details/43852793
版权

1.了解jQuery Mobile

1.认识与下载jQuery Mobile

认识jQuery Mobile
1.jQuery Mobile:
    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile给主流移动平台带来jQuery核心库.与jQuery核心库一样,您不需要安装任何东西;只需将*.js和*.css文件直接包含到您的web页面中即可.这样,jQuery Mobile的功能就好像被放到了您的指尖,供您随时使用.
2.jQuery Mobile事件:
    jQuery Mobile也提供了针对移动端浏览器的事件:
        触摸事件 - 当用户触摸屏幕时触发
        滑动事件 - 当用户上下滑动时触发
        定位事件 - 当设备水平或垂直翻转时触发
        页面事件 - 当设备显示,隐藏,创建,加载或未加载时触发
3.下载:http://jquerymobile.com/download/

2.创建移动设备

1.模拟器(Android/Iphone/aPad)
    快速:genymotion
    高级:eclipse+SDK
2.真机
    同一局域网访问,localhost改为本机ip
*.测试不用服务器不行,本人用的tomcat,结尾有整理下载

3.使用jQueryMobile

head:

    <meta name="viewport" content="width=device-width,initial-scale=1.0"><!--宽度为设备宽度,缩放为1倍-->
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../jquery.mobile-1.4.5.min.css">
    <script src="../../jquery-2.1.3.min.js"></script>
    <script src="../../jquery.mobile-1.4.5.min.js"></script>
body: 
<div data-role="page">
    <div data-role="header"
            data-position="fixed"><!--在有滚动条时,滑动不消失,点击消失/出现-->
        <h1>头部</h1>
    </div>
    <div role="main">
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
        <p>内容部分</p>
    </div>
    <div data-role="footer" data-position="fixed">
        <h4 >底部</h4>
    </div>
</div>
测试:Android Pad

2.jQuery Mobile Widgets

1.page 
 <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>欢迎来到主页</h1>
        </div>
        <div role="main">
            <!--  data-transition:跳转特效 slide滑动,slideup上滑，flip翻转 等等-->　
            <a href="#pagetwo" data-transition="slide"　>跳转到第二个页面</a>
            <!--data-rel="dialog" 当成一个dialog的弹出页面显示-->
            <a href="#pagetwo" data-rel="dialog">打开dialog</a>
        </div>
        <div data-role="footer">
            <h1>这是底部</h1>
        </div>
    </div>

    <div data-role="page" id="pagetwo">
        <div data-role="header">
            <h1>欢迎来到主页</h1>
        </div>
        <div role="main">
            <a href="#pageone">返回到第一个页面</a>
        </div>
        <div data-role="footer">
            <h1>这是底部</h1>
        </div>
    </div>
测试:Android Pad

2.button

<div data-role="page">
    <div data-role="header" >
        <h1>头部</h1>
    </div>
   <!-- <div role="main"></div>-->
    <!--可以用这个代替-->
    <div data-role="content">
        <button>按钮1</button>
        <input type="button" value="按钮2">
        <!--ui-btn默认没有阴影  ui-shadow加阴影-->
        <a href="#" class="ui-btn ui-shadow">按钮3</a> <!--推荐使用-->
        <!--ui-icon-delete删除的图片     ui-btn-icon-notext不显示任何内容   ui-corner-all四周边缘效果-->
        <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">按钮</a>

        <!--ui-btn-inline按钮在一排-->
        <a href="#" class="ui-btn ui-btn-inline">按钮A</a>
        <a href="#" class="ui-btn ui-btn-inline">按钮B</a>
        <a href="#" class="ui-btn ui-btn-inline">按钮C</a>

        <div data-role="controlgroup"><!--按钮在一起-->
            <button>按钮1</button>
            <button>按钮1</button>
            <button>按钮1</button>
        </div>
        <div data-role="controlgroup">
            <a href="#" class="ui-btn ui-btn-inline">按钮A</a>
            <a href="#" class="ui-btn ui-btn-inline">按钮B</a>
            <a href="#" class="ui-btn ui-btn-inline">按钮C</a>
        </div>

        <!--data-type="horizontal"横向-->
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" class="ui-btn ">按钮A</a>
            <a href="#" class="ui-btn ">按钮B</a>
            <a href="#" class="ui-btn ">按钮C</a>
        </div>

        <!--ui-btn-*按钮主题-->
        <a href="#" class="ui-btn ui-btn-a">默认主题</a>
        <a href="#" class="ui-btn ui-btn-b">黑色主题</a>
    </div>
    <div data-role="footer">
        <h1>底部</h1>
    </div>
</div>
测试:WP8(IE11)

3.checkboxradio

<div data-role="page">
    <div data-role="header" >
        <h1>header</h1>
    </div>
    <div role="main">
        复选框:
        <label><input type="checkbox" >apple</label>

        <fieldset data-role="controlgroup"><!--一组-->
            <label><input type="checkbox" name="mm" >m1</label>
            <label><input type="checkbox" name="mm" >m2</label>
            <!--data-theme主题,默认a-->
            <label><input type="checkbox" name="mm" data-theme="b" >m3</label>
        </fieldset>

        <fieldset data-role="controlgroup" data-type="horizontal"><!--横向-->
            <label><input type="checkbox" name="mm" >m1</label>
            <label><input type="checkbox" name="mm" >m2</label>
            <label><input type="checkbox" name="mm">m3</label>
        </fieldset>

        单选框:
        <label><input type="radio" name="m" id="m1">A</label>
        <label><input type="radio" name="m" id="m2">B</label>

        <fieldset data-role="controlgroup" data-type="horizontal"><!--和复选一样-->
            <label><input type="radio" name="m" id="m11">一组的A</label>
            <label><input type="radio" name="m" id="m22">一组的B</label>
        </fieldset>

    </div>
    <div data-role="footer">
        <h1>footer</h1>
    </div>
</div>
测试:Android Pad

4.collapsible

<div data-role="page">
    <div data-role="header" >
        <h1>head</h1>
    </div>
    <div role="main">
        <div data-role="collapsible">
            <h4>heading</h4><!--头部-->
            <p>我展开了</p>
        </div>

        <!--data-content-theme="false" 去掉下边框-->
        <div data-role="collapsible" data-content-theme="false">
            <h4>heading</h4>
            <p>我展开了</p>
        </div>

        <!--data-collapsed="false"默认展开-->
        <div data-role="collapsible" data-collapsed="false">
            <h4>heading</h4>
            <p>默认展开</p>
        </div>

        <div data-role="collapsible">
            <h1>系列</h1>
            <ul><!--列表项-->
                <li><a href="#">item 1</a></li>
                <li><a href="#">item 2</a></li>
                <li><a href="#">item 3</a></li>
            </ul>
        </div>

        <div data-role="collapsible">
            <h1>系列</h1>
            <!--data-role="listview"-->
            <ul data-role="listview">
                <li><a href="#">item 1</a></li>
                <li><a href="#">item 2</a></li>
                <li><a href="#">item 3</a></li>
            </ul>
        </div>
    </div>
    <div data-role="footer">
        <h1>foot</h1>
    </div>
</div>
测试:Android Pad

5.grid

<!--
api:http://api.jquerymobile.com/grid-layout/

two-column (using the ui-grid-a class)      2列,平均分配
three-column (using the ui-grid-b class)    3列
four-column (using the ui-grid-c class)     4列
five-column (using the ui-grid-d class)     5列
-->

<!--<div class="ui-grid-a">-->
<div class="ui-grid-c"><!--4列-->

    <!--ui-block-a第一列-->
    <div class="ui-block-a">
        <div class="ui-bar ui-bar-a">ui-bar-a是主题a</div>
    </div>

    <!--ui-block-b第二列-->
    <div class="ui-block-b">
        <div class="ui-bar ui-bar-b">ui-bar-b是主题b</div>
    </div>

    <!--ui-block-b第三列-->
    <div class="ui-block-c">
        <div class="ui-bar ui-bar-b">ui-bar-b是主题b</div>
    </div>

    <!--ui-block-b第四列,e为5-->
    <div class="ui-block-d">
        <div class="ui-bar ui-bar-inherit">ui-bar-inherit是主题</div>
    </div>

    <!--第一列行之后是第二行,和第一列用法一样,之后也一样-->

    <!--ui-block-a第一列-->
    <div class="ui-block-a">
        <div class="ui-bar ui-bar-a">第1列第2行</div>
    </div>

    <!--ui-block-b第二列-->
    <div class="ui-block-b">
        <div class="ui-bar ui-bar-b">第2列第2行</div>
    </div>

    <!--ui-block-b第三列-->
    <div class="ui-block-c">
        <div class="ui-bar ui-bar-b">第3列第2行</div>
    </div>

    <!--ui-block-b第四列-->
    <div class="ui-block-d">
        <div class="ui-bar ui-bar-inherit">第4列第2行</div>
    </div>
</div>
    <div class="ui-grid-b">
        <div class="ui-block-a">
            <input type="button" data-theme="a" value="按钮">
            <input type="button" data-theme="a" value="按钮">
            <input type="button" data-theme="a" value="按钮">
        </div>
        <div class="ui-block-b">
            <input type="button" data-theme="b" value="按钮">
            <input type="button" data-theme="a" value="按钮">
            <input type="button" data-theme="a" value="按钮">
        </div>
    </div>
    <div class="ui-grid-solo">
        <div class="ui-block-a">
            <button> class="ui-grid-solo"  1列</button>
        </div>
    </div>
测试:Android Mobile

6.listview

<ul data-role="listview">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>
<ol data-role="listview">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ol>
<ol data-role="listview">
    <li><a href="#">a</a></li>
    <!--可点击-->
    <li><a href="#">b</a></li>
    <li><a href="#">c</a></li>
    <li><a href="#">d</a></li>
</ol>
<hr>

<!--过滤效果   data-filter="true"添加查询功能        data-inset="true" 添加插入功能,测试不写没关系-->
<ul data-role="listview" data-filter="true" data-inset="true">
    <li><a href="#">am</a></li>
    <li><a href="#">b</a></li>
    <li><a href="#">c</a></li>
    <li><a href="#">pm</a></li>
</ul>
<hr>
<form class="ui-filterable">
    <input id="autoinput" data-type="search">
</form>
<!--data-filter-reveal="true"默认不显示-->
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autoinput" data-inset="true">
    <li><a href="#">am</a></li>
    <li><a href="#">b</a></li>
    <li><a href="#">c</a></li>
    <li><a href="#">pm</a></li>
</ul>

<!--data-autodividers="true"索引效果,类似字典-->
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
    <li><a href="#">am</a></li>
    <li><a href="#">an</a></li>
    <li><a href="#">bm</a></li>
    <li><a href="#">pn</a></li>
</ul>
测试:Android Pad

7.navbar

<!--navbar 导航条-->
<div data-role="navbar">
    <ul>
        <!--class="ui-btn-active"默认选中-->
        <li><a href="#" class="ui-btn-active">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
    </ul>
</div>
<div data-role="header">
    <h1>头部</h1>

    <div data-role="navbar">
        <ul>
            <li><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
            <li><a href="#">four</a></li>
        </ul>
    </div>
</div>
<div data-role="footer">
    <h1>脚部</h1>

    <div data-role="navbar">
        <ul>
            <li><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
            <li><a href="#">four</a></li>
        </ul>
    </div>
</div>

<div data-role="header" data-theme="b">
 <!--   <h1>data-icon</h1>-->
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="grid">data-icon</a></li>
            <li><a href="#" data-icon="star">加入系统图片</a></li>
            <li><a href="#" data-icon="gear" class="ui-btn-active">hehe</a></li>
        </ul>
    </div>
</div>
测试:Android Mobile


8.popup

<a href="#pp" class="ui-btn" data-rel="popup">弹出窗口</a>

<div data-role="popup" id="pp" >
    <p>弹出的窗口内容</p>
</div>
<!--data-position-to="window"弹出window       data-transition出现效果-->
<a href="#pop"  data-rel="popup" data-position-to="window" data-transition="fade">
    <img src="5.png" class="pupphoto" style="width: 20px;height: 20px">
</a>
<div data-role="popup" id="pop">
    <a href="#" data-rel="back"
       class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">close</a>
   <!-- data-rel="back"点击其它位置关闭弹出的对话框   ui-icon-delete删除的图片    ui-btn-icon-notext右上角不显示任何内容   ui-btn-right按钮显示在右边-->
    <img src="5.png" class="pupphoto" >
</div>
测试:WP8.1(IE11)

9.selectmenu

<div class="ui-field-contain">
    <select name="select-native-1" id="select-native-1" data-iconpos="left">
        <option value="1">第一个</option>
        <option value="2">第二个</option>
        <option value="3" disabled>disabled不能选</option>
        <option value="4">第四个</option>
    </select>
</div>
测试:Android Mobile

10.theme

<div data-role="page">
    <div data-role="header" data-theme="b" >
        <h1>data-theme="b"黑色主题</h1>
    </div>
    <div role="main" >
        <a href="#" class="ui-btn">按钮</a>
    </div>
    <div data-role="footer" data-theme="c">
        <h2>data-theme="c"黑色边框主题</h2>
    </div>
</div>
测试:Android Mobile

3.事件

<div data-role="page">
		<div data-role="header">
			<h1>header</h1>
		</div>
		<div role="main">
			<p id="p1">点击隐藏tao</p>
			<p id="p2">长按隐藏taphold</p>
			<p id="p3">滑动隐藏swipe</p>
			<p id="p4">左滑隐藏swipeleft</p>
			<p id="p5">右滑隐藏swiperight</p>
			<a id="p0" class="ui-btn">..</a> <br> <br> <br> <br>
			<br> <br> <br> <br> <br> <br> <br>
			<br> <br> <br> <br> <br> <br> <br>
			<br> <br> <br> <br> <br> <br> <br>
			<br> <br> <br> <br> <br> <br> <br>
			<br> <br>
		</div>
		<div data-role="footer">
			<h1>footer</h1>
		</div>
	</div>
$(document).on("pageinit", function() {
		//           alert("页面加载完成");
		$("#p1").on("tap", function() {//点击事件
			$(this).hide(1000);
		});

		$("#p2").on("taphold", function() {//长按事件
			$(this).hide(1000);
		});

		$("#p3").on("swipe", function() {//滑动事件
			$(this).hide(1000);
		});

		$("#p4").on("swipeleft", function() {
			$(this).hide(1000);
		});

		$("#p5").on("swiperight", function() {
			$(this).hide(1000);
		});

		$(document).on("scrollstart", function() {//开始滚动
			//              alert("滑动开始");
			$("#p0").html("滑动中");
		});

		$(document).on("scrollstop", function() {//结束滚动
			//              alert("滑动结束");
			$("#p0").html("滑动结束");
		});

		/* $(document).on("orientationchange", function () {//错误
		                  alert("滑动结束");
		    $("#p0").html("屏幕翻转");
		});
		 */
		$(window).bind("orientationchange", function(event) {
			if (event.orientation) {
				if (event.orientation == 'portrait') {
					$("#p0").html("屏幕翻转-竖屏 ");
				} else if (event.orientation == 'landscape') {
					$("#p0").html("屏幕翻转-横屏  ");
				}
			}
		});
	});
测试:Android Mobile(QQ浏览器)


本页代码: http://download.csdn.net/detail/oyuemijindu/8449599
月迷津渡丶
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
开发者必读jQuery Mobile入门教程
01-27
开发者必读jQuery Mobile入门教程
jqueryMobile入门练习项目
凌空之鹤
11-05 195
jqueryMobile入门练习项目
JqueryMobile试题
咖喱辣椒
05-09 696
1.动态添加checkbox <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min...
jquery mobile 学习笔记——入门基础（一）
FS_sky的专栏
04-27 1231
本人目前在做微信服务平台，
JQM学习笔记
09-26 267
JQM，为了是页面访问速度加快，每一个链接都是通过AJAX 方式进行，载入，不会加载新页面HEAD 区域的内容。 Jquery Mobile支持包含历史回退按钮的自动ajax读取外部页面的功能， 基本页面结构。 view source print? 1 &lt;div id="page" data-role="page"&gt; 2  ...
Jquery 基础学习笔记
10-29
此笔记只是作为本人学习JQuery的随手笔记,稍微做了一下整理,希望对新人有参考价值。
Jquery 基础学习笔记之文档处理
10-29
本节让我们继续Jquery知识的了解：文档处理。文档处理主要是对HTML元素进行一些增操作，删除操作，复制操作，替换操作。
jQuery 入门级学习笔记及
10-29
本周公司技术讲座轮到我了，准备说说现在流行的jQuery，下面是概要提纲，关键是看custom.js，已上传源码，程序中“//##”是分段用的，大家可以根据每一段取消注释，然后找到相应的id或class名查看效果。
Jquery学习笔记分享
11-24
第1章. JQuery概述 2 1. Jquery基本作用 2 2. 优点 2 3. 引入JQuery 2 4. 代码风格 2 5. 其他 JavaScript 库 3 6. 多个库之间的冲突 3 7. jQuery对象和DOM对象 3 第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择...
jQueryMobile的(二十一) 方向改变事件(orientationchange)
无名的专栏
11-04 1826
当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，你的回调函数可以加入第二个参数，作用为描述设备横或纵向的属性，"portrait"或;landscape"。这些值也会作为class值加入到html的元素中，使你可以通过css中的选择器改变他们的样式。注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 手持设备方向改变时执行
jQuery Mobile手机网站案例
weixin_33859665的博客
06-16 4461
jQuery Mobile手机网站案例 一、总结 一句话总结：jQuery Mobile是纯手机框架，和amazeui和bootstrap都可以做手机网站。 1、另一款文本编辑器？ jd编辑器     二、jQuery Mobile手机网站案例     1、index.php 1 &lt;?php 2 include 'common/config....
JQuery Mobile 应用实例（1）
陈铁锋的博客
06-23 5357
1.2引用在线的css和js 2.Pages 例1：简单页面 data-role="page">   data-role="header">     欢迎访问我的主页     data-role="content">     我是一名移动开发者！
jQuery Mobile使用中遇到的坑！填坑很难，但很有成就感。。
jessendsc的博客
08-25 2742
jQuery Mobile使用中遇到的坑！填坑很难，但很有成就感。。 最近参与到一个项目的前端开发中，为了提高用户体验使用到了jQuery Mobile。主要是用到了页面过渡效果，这种效果可以做到页面跳转的时候比较高大上，而且过渡的时候只加载dom，不用每次都加载css、js等，会在一定程度上提高页面加载速度。下面记录一下我在使用JM时遇到的莫名奇妙的坑。 1. 白屏问题 首先这问题很多人...
《jQuery Mobile入门经典》—— 1.7　练习
weixin_33933118的博客
05-02 111
本节书摘来异步社区《jQuery Mobile入门经典》一书中的第1章，第1.7节，作者：【美】Phil Dutson，更多章节内容可以访问云栖社区“异步社区”公众号查看。 1.7　练习 jQuery Mobile入门经典1．下载本章介绍的一些程序并安装它们。感受一下，哪一款能最好地适合个人的开发风格，哪一款满足个人或公司的预算。 2．调查一下您的国家或...
html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
weixin_34253539的博客
02-20 148
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇，在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件、事件响应以及可以调用的方法，而作为该系列的第一篇文章，Kayo 将会先介绍 jQuery Mobile 的基本情况和一些基础的实例。   一.jQuery Mobile 的渐进增强设计与浏览器支持 在上一篇文章中，...
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile的布局
lht964249279的博客
02-05 1434
《jQuery Mobile移动应用开发实战》学习笔记
jquerymobile 判断手机横竖屏 orientationchange
jquery教程
03-22 2213
$( window ).bind("orientationchange", function( event ) {  //ResizePageContentHeight($(".ui-page" ));  if(event.orientation){        if(event.orientation == 'portrait'){    alert("portrait
jQuery Mobile基础学习（1）
zww学习笔记
06-30 411
jQuery Mobile jQuery Mobile 是创建移动 web 应用程序的框架。 适用于所有流行的智能手机和平板电脑。 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。 这些是jQuery Mobile所依赖的文件： 可以从网上下载下来也可使用网上的文件资源。<head> <link rel="stylesheet" href="http://code.jquery.
简单的jquery mobile demo
一个菜鸟的学习之路
01-18 1618
head> link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> script src="http://code.jquery.com/jquery-1.8.3.min.js">script> script src="http://code.jquery.co
jQuery学习笔记——事件
最新发布
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值