JQuery Mobile开发记录

最新推荐文章于 2024-03-09 15:35:10 发布

ebonyzhang

最新推荐文章于 2024-03-09 15:35:10 发布

阅读量774

点赞数

分类专栏：前端文章标签： jquery mobile

本文链接：https://blog.csdn.net/xingfuzhijianxia/article/details/78362535

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

微信公众号开发中前端需要使用jQuery Mobile，针对此次使用大体列下。

## 各种资料地址 ##
//官网地址，可下载插件
http://jquerymobile.com/

//官网主题设计
http://themeroller.jquerymobile.com/

//w3school
http://www.w3school.com.cn/jquerymobile/index.asp

//设计好的主题
http://www.cnblogs.com/SkyD/p/3999418.html

页面引用 common.jsp

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

<link rel="stylesheet" href="${ctx}/wx/plugins/jqmobile/themes/skyd.min.css" />
<link rel="stylesheet" href="${ctx}/wx/plugins/jqmobile/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="${ctx}/wx/plugins/jqmobile/themes/jquery.mobile-1.4.5.css" />
<script src="${ctx}/wx/plugins/jqmobile/jquery.min.js"></script>
<script src="${ctx}/wx/plugins/jqmobile/jquery.mobile-1.4.5.min.js"></script>

页面实现如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>system</title>
<link rel="stylesheet" type="text/css" href="${ctx}/wx/js/scroll/scrollbar.css"/>
<script type="text/javascript" src="${ctx}/wx/js/scroll/iscroll.js"></script>
<script type="text/javascript" src="${ctx}/wx/js/scroll/mt_scroll.js"></script>
<%@ include file="/wx/jsp/common/common_general.jsp"%>
<script type="text/javascript">
	window.onload=function(){
		var el, li, i;
		el = document.getElementById('theList');
		$.ajax({
		     type: "GET",
		     url: "${ctx}/mobile/sign/mList.action",
		     data: {"searchParam.currentPage":1},
		     dataType: "json",
		     success: function (data) {
			      if(data!=null){
			    	  $("#theList").empty();
				      $(data).each(function () {
				    	  li = document.createElement('li');
				    	  li.innerHTML = "<a href='#' οnclick=\"toDetail('"+this.id+"');return false;\" >" + this.name + "</a>";
				    	  el.appendChild(li, el.childNodes[0]);
				      });
				      if(data.length<page_size){//每页默认显示20条
				      	$("#pullUp").hide();
				      }else{
				      	$("#pullUp").show();
				      }
			      }else{
			    	  $("#theList").html('<p>暂没有记录!</p>');
			      }
			      $("#theList").listview("refresh");
		     }
		});
		myScroll.refresh();
	}
	
	function toDetail(id){
		var _href = '${ctx}/mobile/sign/mtdetail.action?searchParam.id='+id;
		window.location.href = _href;
	}
</script>
</head>
	<body>
		<!-- 页面部分可以根据w3cschool或者官网灵活使用 -->
		<div data-role="page" id="pageone" **data-theme="f"**>
		  <div data-role="main" class="ui-content" data-theme="f">
		  	<div data-role="header" data-position="fixed">
		  		<h1>我的记录</h1>
			</div>
			<div id="wrapper">  
			    <div id="scroller">
				    <div id="pullDown">  
				    	<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>  
				    </div> 
				    <form class="ui-filterable">
					  <input id="myFilter" data-type="search" placeholder="请根据主题检索...">
					</form> 
				    <ul id="theList" data-role="listview" data-filter="true" data-input="#myFilter" data-inset="true" >
				  	</ul>
				  	<div id="pullUp">  
				    	<span class="pullUpIcon"></span><span class="pullUpLabel">加载更多...</span>  
				   </div>  
				 </div>
			</div>
		</div>
		 <%@ include file="/wx/jsp/common/footer.jsp"%>
	</div>
 </body>
</html>

//footer.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf8"%>
<footer data-role="footer" data-position="fixed"><h1>©2017 ...</h1></footer>

关于分页，有两种实现，一种是下拉滚动刷新，一种是翻页。第一版用的点击翻页，页面太丑改版成了滚动刷新。
下拉上拉刷新，使用iScroll控件，如下：

//mt_scroll.js

var myScroll,
	pullDownEl, pullDownOffset,
	pullUpEl, pullUpOffset,
	currentPage=1;
/**
 * 下拉刷新 （自定义实现此方法）
 * myScroll.refresh();		// 数据加载完成后，调用界面更新方法
 */
function pullDownAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById('theList');
		$.ajax({
		     type: "GET",
		     url: _ctx_+"/mobile/sign/mList.action",//获取记录
		     data: {"currentPage":1},
		     dataType: "json",
		     success: function (data) {
			      var json = data;
			      $("#theList").empty();
			      $(json).each(function () {
			    	  li = document.createElement('li');
			    	  li.innerHTML = "<a href='#' οnclick=\"toDetail('"+this.id+"');return false;\" >" + this.platformMeeting.name + "</a>";
			    	  el.appendChild(li, el.childNodes[0]);
			      });
			      $("#theList").listview("refresh");  
		     }
		    });
		myScroll.refresh();		//数据加载完成后，调用界面更新方法   Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

/**
 * 滚动翻页 （自定义实现此方法）
 * myScroll.refresh();		// 数据加载完成后，调用界面更新方法
 */
function pullUpAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById('theList');
		currentPage=currentPage+1;
		$.ajax({
		     type: "GET",
		     url:_ctx_+ "/mobile/sign/mList.action",
		     data: {"currentPage":currentPage},
		     dataType: "json",
		     success: function (data) {
			      if(!data){
			    	  el.value='';
			    	  $(data).each(function () {
				    	  li = document.createElement('li');
				    	  li.innerHTML = "<a href='#' οnclick=\"toDetail('"+this.id+"');return false;\" >" + this.name + "</a>";
				    	  el.appendChild(li, el.childNodes[0]);
				      });
			      }else{
			    	  pullUpEl.className = '';
					  pullUpEl.querySelector('.pullUpLabel').innerHTML = '没有更多了...';
			      }
			      $("#theList").listview("refresh");  
		     }
	    });
		myScroll.refresh();		// 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

/**
 * 初始化iScroll控件
 */
function loaded() {
	pullDownEl = document.getElementById('pullDown');
	pullDownOffset = pullDownEl.offsetHeight;
	pullUpEl = document.getElementById('pullUp');	
	pullUpOffset = pullUpEl.offsetHeight;
	
	myScroll = new iScroll('wrapper', {
		useTransition: false,
		topOffset: pullDownOffset,
		onRefresh: function () {
			if (pullDownEl.className.match('loading')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
			} else if (pullUpEl.className.match('loading')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
			}
		},
		onScrollMove: function () {
			if (this.y > 5 && !pullDownEl.className.match('flip')) {
				pullDownEl.className = 'flip';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手更新...';
				this.minScrollY = 0;
			} else if (this.y < 5 && pullDownEl.className.match('flip')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
				this.minScrollY = -pullDownOffset;
			} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
				pullUpEl.className = 'flip';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手更新...';
				this.maxScrollY = this.maxScrollY;
			} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
				this.maxScrollY = pullUpOffset;
			}
		},
		onScrollEnd: function () {
			if (pullDownEl.className.match('flip')) {
				pullDownEl.className = 'loading';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';				
				pullDownAction();	// Execute custom function (ajax call?)
			} else if (pullUpEl.className.match('flip')) {
				pullUpEl.className = 'loading';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';				
				pullUpAction();	// Execute custom function (ajax call?)
			}
		}
	});
	
	setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

//初始化绑定iScroll控件 
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

翻页实现如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf8"%>
<section id="pagination" class="pagination">
	<ul style="width: 100%">
	  <li class="page-item arrow">
	  	<c:if test="${dataList.pageIdx ==1}">
	  		<a href="javascript:void(0)" title="没有上一页喽~">&larr;</a>
	  	</c:if>
		<c:if test="${dataList.pageIdx >1}">
	  		<a href="javascript:void(0)" title="上一页" onclick="getCurPage(${dataList.pageIdx-1})">&larr;</a>
	  	</c:if>
	  </li>
	   <c:forEach varStatus="status" begin="1" end="${dataList.totalPage}">
	   		<!-- 非当前页样式控制 -->
	   		<c:if test="${status.index != dataList.pageIdx}">
	   			 <li class="page-item">
					<a href="javascript:void(0)" onclick="getCurPage(${status.index})" title="第${status.index}页">${status.index}</a>
				  </li>
	   		</c:if>
	   		<c:if test="${status.index == dataList.pageIdx}">
	   			<li class="page-item current">
				  <a href="javascript:void(0)" onclick="getCurPage(${status.index})" title="第${status.index}页">${status.index}</a>
			    </li>
	   		</c:if>
	   </c:forEach>
	  <li class="page-item arrow">
	  	<c:if test="${dataList.pageIdx == dataList.totalPage}">
	  		<a href="javascript:void(0)" title="没有下一页喽~" >&rarr;</a>
	  	</c:if>
	  	<c:if test="${dataList.pageIdx < dataList.totalPage}">
	  		<a href="javascript:void(0)" title="下一页" onclick="getCurPage(${dataList.pageIdx+1})">&rarr;</a>
	  	</c:if>
	  </li>
	</ul>
</section>
<script src="${ctx}/wx/plugins/page/js/jquery.js"></script>
<script src="${ctx}/wx/plugins/page/js/index.js"></script>

翻页使用到的css样式


@import url(http://fonts.googleapis.com/css?family=Exo);
@import url(http://fonts.googleapis.com/css?family=Englebert);
/* ==========================================================================
   Normalise
   ========================================================================== */
html,
button,
input,
select,
textarea {
  color: #222222;
}
body {
  font-size: 1em;
  line-height: 1.4;
  padding: 50px 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
img {
  vertical-align: middle;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}
.chromeframe {
  background: #ccc;
  color: #000;
  margin: .2em 0;
  padding: 0.2em 0;
}
::-moz-selection,
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
/* ==========================================================================
   Actual Styles
   ========================================================================== */
body {
  background: radial-gradient(center, ellipse, #fcfff4 0%, #b3bead 100%);
  text-align: center;
  color: #444;
  padding: 50px 100px;
}
.intro {
  font-family: Englebert, Arial;
  font-size: 1.5em;
}
.intro h3 {
  margin: 0;
  padding: 0;
  font-size: 2em;
}
.intro p {
  margin: 0;
  padding: 0;
}
.pagination {
  width: 100%;
  overflow: scroll;
  height: 15%;
  position: relative;
  background: #eee;
}
.pagination.desktop {
  overflow: hidden;
}
.pagination ul {
  background: transparent;
  list-style: none;
  padding: 30px 10px 18px;
  margin: auto;
  width: 100%;
  height: 15%;
  text-align: center;
  position: relative;
  z-index: 1;
}
.page-item {
  font-family: 'Exo', Arial;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  margin-right: 0 ;
  text-align: center;
  background: rgba(115, 147, 168, 0.9);
  border-radius: 3px;
}
.page-item.arrow {
  background: none;
}
.page-item.arrow a {
  color: #777;
}
.page-item a:hover,
.page-item a:focus,
.page-item.current a {
  background: rgba(40, 110, 250, 0.9);
  color: white;
}
.page-item,
.page-item a {
  -webkit-transition: all 0.3s ease;
}
.page-item a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 6px 5px 4px;
  min-width: 22px;
  border-radius: 3px;
}
.pagination-title {
  width: auto;
  text-align: center;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  color: #666;
}