Html5 + jquery mobile + mobiscroll ，REST手机客户端

最新推荐文章于 2021-06-27 02:27:35 发布

LuWenHui_Leon_

最新推荐文章于 2021-06-27 02:27:35 发布

阅读量2.7k

点赞数

分类专栏：系统架构

本文链接：https://blog.csdn.net/a286352250/article/details/14522515

版权

系统架构专栏收录该内容

6 篇文章 0 订阅

订阅专栏

【JAVA服务端代码跳转】点击打开链接

【效果】

【代码】

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title></title>
  
  <link rel="stylesheet" href="../css/jquery.mobile-1.3.1.min.css">
    
  <!-- jQuery and jQuery Mobile -->
  <script src="../js/jquery-1.9.1.min.js"></script>
  <script src="../js/jquery.mobile-1.3.1.min.js"></script>

  <!-- Extra Codiqa features -->
  <script src="../js/codiqa.ext.js"></script>
  
  <!-- cookie -->
  <script src="../js/jquery.cookie.js"></script>
  
  <!-- SCMS Mobile -->
  <script src="../js/scmsmobilecommon.js"></script>
   
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
        <h3>库存查询</h3>
    </div>
    <div data-role="content">
    	<h4 id="error" style="color: red;">
        </h4>
        <div data-role="fieldcontain">
            <label>款号</label>
            <input name="" id="orderNo" placeholder="" value="" type="text">
        </div>
        <a id="queryBtn" data-role="button" href="#page1">查询</a>
    </div>
    <div data-role="content">
    	<table id="viewTable" align="center" width="100%">
    		<tr align='center'><td>款号</td><td>码数</td><td>颜色</td><td>数量</td><td>门店</td></tr>
    	</table>
    </div>
    <div data-role="content">
    	页数：<span id="pageIndex">1</span> / <span id="pageTotal">0</span>
        <a id="upPageBtn" data-role="button" data-inline='true' href="#page1">上一页</a>
        <a id="nextPageBtn" data-role="button" data-inline='true' href="#page1">下一页</a>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
        <h3>深圳市夏至服饰有限公司所有</h3>
    </div>
</div>
</body>
<script type="text/javascript">

	var pageSize = 10;
	function list(pageNo) {
		$("#error").html("");
        var naturalId = $("#orderNo").val();
        var dataurl = localhostPaht+projectName+"/resteasy/stocks/commoditystocks/inPage/?pageNumber="+pageNo+"&pageSize="+pageSize+"&orderBy=&filter=naturalId_S_"+naturalId+"_LIKE__,qty_I_0_GT__&";
        var pageurl = localhostPaht+projectName+"/resteasy/stocks/commoditystocks/rowCount/?pageNumber="+pageNo+"&pageSize="+pageSize+"&orderBy=&filter=naturalId_S_"+naturalId+"_LIKE__,qty_I_0_GT__&";
		$.get(dataurl, function(data){ showCommodityStocks(data); },'json');
		$.get(pageurl, function(data){ showPageNo(data); },'json');
				
	}
	
	function showCommodityStocks(data) {
		var tr = "<tr align='center'><td>款号</td><td>码数</td><td>颜色</td><td>数量</td><td>门店</td></tr>";
		tr += "<tr align='center'><td colspan='4'> </td></tr>";
		for ( var i = 0; i < data.length; i++) {
			tr += "<tr align='center'><td>"+data[i].naturalId+"</td><td>"+data[i].size+"</td><td>"+data[i].color+"</td><td>"+data[i].qty+"</td><td>"+data[i].wh+"</td></tr>";
			tr += "<tr align='center'><td colspan='4'> </td></tr>";
		}
		$("table").html(tr);
	}
	
	function showPageNo(rowCount) {
		var totalPage=(rowCount/pageSize);
		var remainder=rowCount%pageSize;
		if ( rowCount > 0 && totalPage == 0 ) {
			totalPage=1;
		}
		if ( remainder > 0 ) {
			totalPage++;
		}
		totalPage = parseInt(totalPage);
		$("#pageTotal").html(totalPage);
	}

      	 $(document).ready(function(){
			 
			 $("#queryBtn").bind("click", function(){
             	list(1);
			 });
			 
			 $("#upPageBtn").bind("click", function(){
			 	var pageIndex = $("#pageIndex").text();
			 	if (1 < pageIndex) {
					list(parseInt(pageIndex)-1);
					$("#pageIndex").html(parseInt(pageIndex)-1);
				}
			 });
			 
			 $("#nextPageBtn").bind("click", function(){
			 	var pageIndex = $("#pageIndex").text();
			 	var pageTotal = $("#pageTotal").text();
			 	if (pageIndex < pageTotal) {
					list(parseInt(pageIndex)+1);
					$("#pageIndex").html(parseInt(pageIndex)+1);
				}
			 });
			 
		})
</script>
</html>

【Select滚动效果】

【代码】

  <script src="../js/mobiscroll.custom-2.6.2.min.js"></script>
  <link rel="stylesheet" href="../css/mobiscroll.custom-2.6.2.min.css" />


<div data-role="fieldcontain">
        	<label>数量</label>
			<ul id="orderQty">
			    <li data-val="1"><div><span>1</span></div></li>
			    <li data-val="2"><div><span>2</span></div></li>
			    <li data-val="3"><div><span>3</span></div></li>
			</ul>
        </div>




$('#orderQty').mobiscroll().image({
	        display: 'bubble',
	        mode: 'scroller',
	        labels: ['数量'],
	        inputClass: 'i-txt',
	        setText: '确定', //确认按钮名称
	        cancelText: '取消',//取消按钮名籍我
	        width: 500
	    });