Jquery mobile入门及开发常用技术

最新推荐文章于 2024-03-17 00:09:41 发布

a574258039

最新推荐文章于 2024-03-17 00:09:41 发布

阅读量981

点赞数

分类专栏： Web前端文章标签： jquery mobile 移动表单 JQM JQM事件

本文链接：https://blog.csdn.net/a574258039/article/details/17783097

版权

Web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前段时间用到了这个东西，简单看看，官方文档看了看基本就会用了，常用的部分拿出来，方便自己用，希望也能对别人有帮助。

JQM支持高版本的安卓和IOS，兼容性很好。

1.使用前需要导入js和css

如下：（也可以下载jquery.mobile-1.3.2.zip放到服务器中然后根据路径导入）

<!--自动扩展-->
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<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.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

2.页面的框架格式：

<div data-role="page"> 
  	<div data-role="header">    
 		 <h1>标题</h1>  
  	</div> 
  	<div data-role="content">  
  		DEMO     
   </div>
   <div data-role="footer">
   	<h4>结尾</h4>
   </div>
</div>

3.对话框

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

可以用来弹出一个对话框data-rel="dialog"此属性用来确定为对话框，

href="dialog.html" 要弹出的内容

4.列表

	<ul data-role="listview"> 
		<li><a href="#nav1">1</a></li>  
		<li><a href="#nav1">2</a></li> 
		<li><a href="#nav1">3</a></li> 
		<li><a href="#nav1">4</a></li> 
		<li><a href="#nav1">5</a></li>
	</ul>

加分隔符的列表：

<ul data-role="listview" data-dividertheme="d"> 
<li><a href="#nav1">1</a></li>  
<li><a href="#nav1">2</a></li> 
<li><a href="#nav1">3</a></li> 
  <li data-role="list-divider">分隔符</li>
<li><a href="#nav1">4</a></li> 
<li><a href="#nav1">5</a></li>
</ul>

5.头部工具栏和尾部工具栏

头部工具栏：

<div data-role="header" data-position="inline" data-backbtn="false"><h1>头部工具栏</h1><a href="index.html" data-icon="gear" class="ui-btn-right">Options</a></div>

注：给头部工具栏加data-backbtn="false"用来防止它自动生成回退的按钮。

class=ui-btn-right可以让图标在后端对齐

尾部工具栏：

<div data-role="footer" class="ui-bar">
　 <a href="index.html" data-role="button" data-icon="delete">del</a>
　 <a href="index.html" data-role="button" data-icon="plus">Add</a>
　 <a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
　 <a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>

要想把几个按钮打包成一个按钮组,

data-role="controlgroup"和data-type="horizontal"属性如下：

<div data-role="controlgroup" data-type="horizontal">...

6.按钮组：

<div data-role="controlgroup" data-type="horizontal">
　<a href="index.html" data-role="button">Yes</a>
　<a href="index.html" data-role="button">No</a>
　<a href="index.html" data-role="button">Maybe</a>
</div>

data-role="controlgroup"属性默认为垂直的，如果想让他水平可以使用：data-type="horizontal"

7.可折叠内容（看后面的demo效果就行了）

 <div data-role="collapsible-set">
<div data-role="collapsible">
 <h3>1</h3>
 <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div>
 <div data-role="collapsible" >
 <h3>2</h3>
 <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div></div></div>

8.form表单(下面会有例子，直接看例子就明白了)
9.触发事件：

swipeleft

在左边方向移动时触发该事件.

swiperight

在右边方向移动时触发该事件..

tap

在快速完整的一次触摸后触发该事件.

taphold

在按住不放后触发该事件(接近一秒钟的时间).

swipe

在一秒钟的间隔内水平方向上拖动30px以上会触发该事件，(水平方向上拖动要保持在20px以内，否则不会触发).

下面是我用过的例子：

demo1.

	<body>
		<div data-role="page">
			<div data-role="header">
				<h1>
					公司介绍
				</h1>
			</div>
			<div data-role="content">

				<ol data-role="listview" data-inset="true">
					<li>
						<a href="bainian1.1_1.html" rel="external">1</a>
					</li>
					<li>
						<a href="bainian1.1_2.html" rel="external">2/a>
					</li>
					<li>
						<a href="bainian1.1_3.html" rel="external">3</a>
					</li>
					<li>
						<a href="bainian1.1_4.html" rel="external">3</a>
					</li>

				</ol>
			</div>
			<div data-role="footer">
				<h4></h4>
			</div>
		</div>
	</body>

<!--考虑到公司在用这东西，所以部分地方做了改动-->

效果图：

demo2:图片切换效果：滑动事件在手机上较为明显，电脑上拖动鼠标不是很方便

	<style>
li {
	margin-right: 1px;
	float: left;
	text-decoration: none;
	list-style-type: none;
}

ul {
	position: relative;
	bottom: 60px;
	width: 120px;
	margin: 0 auto;
}
</style>
		<script type="text/javascript">
	var imgs = [ "pt1", "pt2", "pt3", "pt4", "pt5", "pt6" ];
	var num = 0;
	function changeWhite() {
		$("font[id^=pt]").attr("color", "White");
	}
	$(function() {

		$("#myImg").bind("swipeleft", function() {
			if (num >= imgs.length - 1) {
				num = 0;
			} else {
				num++;
			}
			changeWhite();

			$("#myImg").attr("src", "images/" + imgs[num] + ".jpg");
			$("#" + imgs[num]).attr("color", "black");
		});

		$("#myImg").bind("swiperight", function() {
			if (num <= 0) {
				num = 5;
			} else {
				num--;
			}
			changeWhite();
			$("#myImg").attr("src", "images/" + imgs[num] + ".jpg");
			$("#" + imgs[num]).attr("color", "black");
		});
	});
</script>
	</head>

	<body οnlοad="changeInterval();">
		<div data-role="page">
			<div data-role="header">
				<h1>
					百年文化
				</h1>
			</div>
			<div data-role="content" style="text-align: center;">
				<div style="text-align: center;">
					<img id="myImg" src="images/pt1.jpg"
						style="width: 250px;; height: 300px;" />
					<ul>
						<li>
							<font size="8px;" id="pt1" color="black">·</font>
						</li>
						<li>
							<font size="8px;" id="pt2" color="White">·</font>
						</li>
						<li>
							<font size="8px;" id="pt3" color="White">·</font>
						</li>
						<li>
							<font size="8px;" id="pt4" color="White">·</font>
						</li>
						<li>
							<font size="8px;" id="pt5" color="White">·</font>
						</li>
						<li>
							<font size="8px;" id="pt6" color="White">·</font>
						</li>
					</ul>
				</div>
			</div>
			<div data-role="footer">
				<h4></h4>
			</div>
		</div>
	</body>

由于当时让下午做出来，我花了不长点时间做成这样，可能会有更好的方案

效果图：

demo3.button的例子：

		<div data-role="page">
			<div data-role="header">
				<h1>
					XXXX
				</h1>
			</div>
			<div data-role="content">
				<div>
					<br />
					<br />
					<a href="userLogin.jsp?openid=<%=openid%>" data-role="button"
						rel="external">A种登陆</a>
					<a href="othersLogin.jsp?openid=<%=openid%>" data-role="button"
						data-theme="c" rel="external">B种登陆</a>
					<br />
					<br />
				</div>
			</div>
			<div data-role="footer">
				<h4></h4>
			</div>
		</div>

在JQM中，超链接默认是AJAX提交，如果想案件提交需要加 rel="external"试一试就知道了。

效果图：

demo4.表单：

	<div data-role="page">
			<div data-role="header">
				<h1>
					XXXX
				</h1>
			</div>
			<div data-role="content">
				<div>
					<%
						String msg = (String) request.getAttribute("msg");
						if (msg != null) {
					%>
					<font color="red"><%=msg%></font>
					<%
						}
					%>


					<form action="otherlogin!checkOtherLogin.action" method="post"
						data-ajax="false">




						<input type="hidden" name="openid"
							value="<%=request.getParameter("openid")%>">
						<label for="username"></label>
						<input type="text" id="username" placeholder="姓名"
							name="member.membername" />
						<span id="usernamespan"></span>




						<fieldset data-role="controlgroup" data-type="horizontal">
							<legend></legend>
							<input type="radio" name="member.sex" id="radio-choice-1"
								value="0" checked="checked" />
							<label for="radio-choice-1">
								男
							</label>
							<input type="radio" name="member.sex" id="radio-choice-2"
								value="1" />
							<label for="radio-choice-2">
								女
							</label>
							<input type="radio" name="member.sex" id="radio-choice-3"
								value="2" />
							<label for="radio-choice-3">
								不详
							</label>
						</fieldset>


						<div>
							<label for="appDate"></label>
							<input type="text" id="appDate" placeholder="出生日期"
								name="member.birthday" />
						</div>




						<select id="select-choice-1" data-native-menu="false"
							name="member.idtype">
							<option value="0">
								身份证
							</option>
							<option value="1">
								护照
							</option>
							<option value="2">
								军官证
							</option>
						</select>
						<input type="text" name="member.idnumber" id="idCode"
							placeholder="证书号码" />
						<input type="button" value="注册" οnclick="checkMass();" />


					</form>
				</div>
			</div>
			<div data-role="footer">
				<h4></h4>
			</div>
		</div>

效果图：

demo5.

 		<div data-role="collapsible-set"> 
	  	<div data-role="collapsible" data-collapsed="true">
	　	<h3>大连</h3>
	　 	<p>
			 <table border="1">
			   <tr><th>机构名称</th><th>地址</th><th>联系电话</th></tr>
			   <tr><td>大连</td><td>大连市</td><td>0411-398</td></tr>
			   <tr><td>大连</td><td>大连市</td><td>0411-392</td></tr>
			   <tr><td>大连瓦房</td><td>大连市瓦房店共</td><td>0411－3919</td></tr>
	  		 </table>
		</p>
		</div>
<div/>

最好一个问题：关于JQM的主题：官网给了几种颜色的主题，但是如果你想像我一样使用自己的主题，需要到JQM官网自己调节颜色然后根据自己的需要选择主题。然后导入js和css。你需要将自己做的主题覆盖默认的，最好放到JQM默认的下面。

我用的是jquery.mobile-1.3.2，所以建议使用的时候所有的都要使用通一个版本，因为这个我花了半天的时间想不出为什么调不出应该有的效果....

新手上路，谢绝吐槽，如有错误，谢谢指正

a574258039

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery mobile入门及开发常用技术

前段时间用到了这个东西，简单看看，官方文档看了看基本就会用了，常用的部分拿出来，方便自己用，希望也能对别人有帮助。JQM支持高版本的安卓和IOS，兼容性很好。1.使用前需要导入js和css如下：（也可以下载jquery.mobile-1.3.2.zip放到服务器中然后根据路径导入） 2.页面的框架格式：标题
复制链接

扫一扫