在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>
扫一扫
2874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
