在html页面中我们会用一个变量去接收service端发送的数据（该数据通过websocket发送）。
如果想将其填充到页面的table这是很容易的，如果不同页面都要获取该对象是不行的，因为该变量的作用域为page，
所以要用一种类似切换页面的方式去实现该形式，但是客户的体验却不改变。（不使用application,session等内置对象）。
在下面的代码中，所有的一切都围绕着标签的id和class进行操作的，如果你的id或class写的不正确，就无法实现相应的操作。 还要阐述的就是，你要注意index++;
比如说，你发送登录命令后，如果账户密码正确，就让index+1，不正确的则不变。 如果登陆成功你来到盈亏页面，则这时盈亏页面的index=1，此时你想去详情页面则点击详情按钮，再让index+1，就跳转到详情页面了。 返回到上一页面的话，你就让index-1就可以了。 暂且不提安全性，仅供参考，大神轻喷！
首先在page页面中5个div标签，其中1个为页头，一个为页底，3个为内容标签，如下图：
其次在JavaScript标签中定义一个变量和和方法，该方法和数组用来控制页面的标签显示和隐藏。
在下面的代码中，steps数组中定义的就是不同页面（对我们来说就是同一个页面的不同div）中哪些元素什么时候隐藏和展示。
//遍历所有的div标签，页面个数（即div）应该和steps的成员相匹配 //第一次登陆时，默认index=0，下面的方法就会实现页面1标题名称的修改，然后进行内容的（登陆页面）修改。 //if相同，则需要显示的div内容都展示出来 //else不同，则不需要的div全部都要隐藏起来,
页面切换代码：
var index = 0; var steps = [ { 'title': '用户登录', 'id': 'login', show: function () { $("#zc_Click").show(); $("#dl_Click").show(); $("#yk_Click").hide(); $("#mm_Click").hide(); $("#sz_Click").hide(); $("#back_Click").hide(); } }, { 'title': '合约详情', 'id': 'trader', show: function () { $("#zc_Click").hide(); $("#dl_Click").hide(); $("#yk_Click").hide(); $("#mm_Click").show(); $("#sz_Click").show(); $("#back_Click").show(); } }, { 'title': '个股详情', 'id': 'buySell', show: function () { $("#zc_Click").hide(); $("#dl_Click").hide(); $("#yk_Click").show(); $("#mm_Click").hide(); $("#sz_Click").show(); $("#back_Click").show(); } } ]; function step() { for (var i = 0; i < steps.length; i++) { if (index == i) { $(".header").text(steps[i].title); $("#" + steps[i].id).show(); steps[i].show(); } else { $("#" + steps[i].id).hide(); } } }页头代码如下：
<!-- 登陆页面的页头信息 --> <div data-role="header" data-position="fixed"> <a data-iconpos="notext" data-role="button" data-icon="back" title="返回" id="back_Click">返回</a> <h1 class="header">登录</h1> <a data-iconpos="notext" href="#panel" data-role="button" data-icon="grid" id="set_Click"></a> </div> 登陆页面代码： <!-- 登录/注册页面 --> <div data-role="content" id="login"> <label for="username">用户名：</label> <input type="text" id="username" placeholder="请输入用户名" /> <label for="userpassword">密码：</label> <input type="password" id="password" placeholder="请输入密码 " /> <div class="ui-grid-c" style="width:100%;font-size:12px;"> <div class="ui-block-a"><div style="border:none;height:20px; line-height:20px; overflow:hidden;" id="TD_States_A">连接状态：</div></div> <div class="ui-block-b"><div style="border:none;height:20px; line-height:20px; overflow:hidden;" id="TD_States_B"></div></div> <div class="ui-block-c"><div style="border:none;height:20px; line-height:20px; overflow:hidden;" id="MD_States_A">连接状态：</div></div> <div class="ui-block-d"><div style="border:none;height:20px; line-height:20px; overflow:hidden;" id="MD_States_B"></div></div> </div> <div> <input type="checkbox" id="rememberPW" data-role="none" style="vertical-align:middle;" /> <a title="the_title" style="vertical-align:middle;">记住密码</a> <a href="../rwd/" style="vertical-align:middle;text-align:right;margin-top:2px;float:right">忘记密码</a> </div> </div> 盈亏页面代码： <div id="trader"> <div data-role="content" style="margin:0px;padding:0px;"> <div class="ui-grid-solo" style="background-color:#ffffff;overflow:initial;"> <ul data-role="listview" data-inset="true" data-divider-theme="a"> <li data-role="list-divider" id="li">今日赢亏</li> <li data-role="list-divider" id="li" style="position:relative;"> 所持合约 <sapn style="position:absolute;top:1px;right:4px;"> <a data-iconpos="notext" data-role="button" data-icon="carat-r" title="详情" style="margin:0px;padding:0px;" id="btn_xq">详情</a> </sapn> </li> <li data-role="list-divider" id="li">持股赢亏</li> </ul> </div> </div> <div class="jqm-demos" data-demo-html="true" data-demo-css="true" id="usertable"> <table data-role="table" id="movie-table-custom" data-mode="reflow" class="movie-list ui-responsive"> <thead> <tr style="vertical-align:middle;"> <th data-priority="1">th1</th> <th data-priority="2">th2</th> <th data-priority="3">th3</th> <th data-priority="4">th4</th> <th data-priority="5">th5</th> <th data-priority="6">th6</th> <th data-priority="7">th7</th> <th data-priority="8">th8/th1</th> <th data-priority="9">th9</th> <th data-priority="10">th10</th> </tr> </thead> <tbody id="table_tbody"></tbody> </table> </div> </div> 详情页面代码： <div data-role="content" id="buySell" style="margin:0px;padding:0px;"> <div data-role="main" class="ui-content"> <div class="ui-grid-c"> <div class="ui-block-a" style="border:0px solid black; text-align:center;"><span></span></div> <div class="ui-block-b" style="border:0px solid black;text-align:center;"><span style="font-size:32px">一些文本</span></div> <div class="ui-block-c" style="border:0px solid black;text-align:center"> <div>一些文本</div> <div>一些文本</div> </div> <div class="ui-block-d" style="border:0px solid black; text-align:center;"><span></span></div> </div> <div class="ui-grid-c"> <div class="ui-block-a" style="border:0px solid black; text-align:center;"><span></span></div> <div class="ui-block-b" style="border:0px solid black;text-align:center;"><span style="font-size:16px">一些文本</span></div> <div class="ui-block-c" style="border:0px solid black;text-align:center"><span style="font-size:16px">一些文本</span></div> <div class="ui-block-d" style="border:0px solid black; text-align:center;"><span></span></div> </div> </div> <div class="ui-grid-solo" style="background-color:#ffffff;overflow:initial;"> <ul data-role="listview" data-inset="true" data-divider-theme="a" style="margin:0px;padding:0px;"> <li data-role="list-divider" id="li" style="position:relative; line-height:30px;height:35px"> <sapn style="position:absolute;top:8px;left:5px;"> <a data-iconpos="notext" data-role="button" data-icon="minus" title="减少" style="margin:0px;padding:0px;" id="qty_minus">减少</a> </sapn> <sapn style="position:absolute;top:1px;left:40px;width:96%"> <input type="number" placeholder=" 数量" id="order_qty" min="1" max="999" value="1"/> </sapn> <sapn style="position:absolute;top:8px;right:4px;"> <a data-iconpos="notext" data-role="button" data-icon="plus" title="增加" style="margin:0px;padding:0px;" id="qty_plus">增加</a> </sapn> </li> <li data-role="list-divider" id="li" style="position:relative; line-height:35px;height:35px"> <sapn style="position:absolute;top:8px;left:5px;"> <a data-iconpos="notext" data-role="button" data-icon="minus" title="减少" style="margin:0px;padding:0px;" id="pri_minus">减少</a> </sapn> <sapn style="position:absolute;top:1px;left:40px;width:96%"> <input type="number" placeholder=" 价格" id="order_pri" min="1.00" max="999.00" value="1" step="0.01"/> </sapn> <sapn style="position:absolute;top:8px;right:4px;"> <a data-iconpos="notext" data-role="button" data-icon="plus" title="增加" style="margin:0px;padding:0px;" id="pri_plus">增加</a> </sapn> </li> <li data-role="list-divider" id="li" style="position:relative;height:10px;"> <sapn style="position:absolute;top:3px;left:15px;height:10px"> 最大可买300股 </sapn> <sapn style="position:absolute;top:3px;right:4px;"> 最大可卖300股 </sapn> </li> <li data-role="list-divider" id="li" style="position:relative;"> <fieldset class="ui-grid-a"> <div class="ui-block-a"><input type="submit" value="买入" data-theme="a" id="buyOrder_Click" /></div> <div class="ui-block-b"><input type="reset" value="卖出" data-theme="b" id="sellOrder_Click"></div> </fieldset> </li> </ul> </div> <div> <table data-role="table" id="temp-table" data-mode="reflow" class="ui-responsive table-stroke"> <thead> <!--<tr style="display:none"> <th data-priority="persist">买方5档</th> <th colspan="2">11.11%</th> <th colspan="2">卖方5档</th> <th colspan="2">22.22%</th> </tr> --> <tr> <th data-priority="persist" style="text-align:left;width:30px">买方5档</th> <th data-priority="1" style="text-align:left;width:30px">11.11%</th> <th data-priority="2" style="text-align:left;width:30px">卖方5档</th> <th data-priority="2" style="text-align:left;width:30px">22.22%</th> </tr> </thead> <tbody> <tr> <td>3</td> <td>8</td> <td>17.8</td> <td>10</td> </tr> <tr> <td>2</td> <td>9</td> <td>21.7</td> <td>9</td> </tr> <tr> <td>4</td> <td>13</td> <td>24.2</td> <td>10</td> </tr> <tr> <td>6</td> <td>15</td> <td>24.6</td> <td>11</td> </tr> <tr> <td>6</td> <td>15</td> <td>24.6</td> <td>11</td> </tr> </tbody> </table> </div> </div>底部标签代码：
<!-- 底层显示样式 --> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <!-- 注册/登录 --> <li id="zc_Click" style="width:50%"><a href="#" data-icon="forward" name="zc_Click">注册</a></li> <li id="dl_Click" style="width:50%"><a href="#" data-icon="arrow-r" name="dl_Click">登录</a></li> <!-- 赢亏/个股详情/设置--> <li id="yk_Click" style="width:50%"><a href="#" data-icon="star" name="yk_Click">赢亏</a></li> <li id="mm_Click" style="width:50%"><a href="#" data-icon="shop" name="mm_Click">买卖</a></li> <li id="sz_Click" style="width:50%"><a href="#" data-icon="gear" name="sz_Click">设置</a></li> </ul> </div> </div>