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

来源：互联网发布：php wiki系统编辑：程序博客网时间：2024/05/10 09:54

【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    });