mui里面底部bar,创建了一个子页面,那bar切换的时候怎么切换子页面
2个回答
推荐于2017-11-26 · 知道合伙人软件行家
关注
展开全部
在一个页面中有多个Tab的问题可以这样来处理:
参照
工程项目管理/单位工程项目完工管理/申请列表
比如在此页面中有三个Tab切换:
那么要拆成四个页面一个Mange+三个Tab的页面
1、Manage页面:在Tabs中的TabsContent里面要有三个<div></div>这一定要有不能删掉。
<div class="page">
<div class="pageContent">
<div class="tabs" currentindex="2" eventtype="click">
<div class="tabsHeader">
<div class="tabsHeaderContent">
<ul>
<li><a href="a.aspx" class="j-ajax"
><span>名称1</span></a></li>
<li><a href="b.aspx" class="j-ajax"
><span>名称2</span></a></li>
<li><a href="c.aspx" class="j-ajax"
><span>名称3</span></a></li>
</ul>
</div>
</div>
<div class="tabsContent" >
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
</div>
</div>
</div>
</div>
2、其他的三个页面的格式为:
<div class="panelBar">
<form id="pagerForm"
action="ProjectManage/FinishedProject/FinishedProjectManageAuditFinished.aspx"
method="post">
<input type="hidden" name="status" value="active"/>
<input type="hidden" name="pageNum" />
<input type="hidden" name="numPerPage" value="<%=numPerPage.Value%>" />
</form>
<ul class="toolBar">
<li><a class="delete"
href="ProjectManage/FinishedProject/FinishedProjectManageAuditFinished.aspx?fuid={sid_fin}"
target="navTabTodo"
title="确定要反审核吗?"><span>反审核</span></a></li> </ul>
</div>
<table class="table" layouth="138">
</table>
<div class="panelBar">
<div class="pages">
<span>显示</span>
<select id="numPerPage" runat="server"
onchange="tabPageBreak(gpage.jObj('tab2'),{numPerPage:this.value})">
<option value="3" selected="selected">3</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
</select>
<span>条,共<%=total %>条</span>
</div>
<div class="pagination" targettype="navTab" totalcount="<%=total
%>" numperpage="<%=numPerPage.Value %>" currentpage="<%=pageNum %>" tab="tab2">
</div>
</div>
3、在其他的三个页面中一开始就应该写<div class="panelBar"></div
class="panelBar">,前面的样式不需要,因为我们加载的时候前面的样式已经加载了所以只需要从panelBar开始加载即可。
比如上面显示处理分页的pagerForm也可以放到pagelBar里面。不能放到外面,不会加载的。
4、对于分页因为涉及到多个Tab的同时分页的问题,但是一个页面只有一个pagerForm考虑到假如修改为多个pagerForm的话,问题更加繁琐,
所以现在我们拆开来处理。里面的分页稍作了修改,以前我们用navTabPageBreak();现在我们用tabPageBreak并将当前tab2加了前缀的的值传到脚本中。
参照
工程项目管理/单位工程项目完工管理/申请列表
比如在此页面中有三个Tab切换:
那么要拆成四个页面一个Mange+三个Tab的页面
1、Manage页面:在Tabs中的TabsContent里面要有三个<div></div>这一定要有不能删掉。
<div class="page">
<div class="pageContent">
<div class="tabs" currentindex="2" eventtype="click">
<div class="tabsHeader">
<div class="tabsHeaderContent">
<ul>
<li><a href="a.aspx" class="j-ajax"
><span>名称1</span></a></li>
<li><a href="b.aspx" class="j-ajax"
><span>名称2</span></a></li>
<li><a href="c.aspx" class="j-ajax"
><span>名称3</span></a></li>
</ul>
</div>
</div>
<div class="tabsContent" >
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
</div>
</div>
</div>
</div>
2、其他的三个页面的格式为:
<div class="panelBar">
<form id="pagerForm"
action="ProjectManage/FinishedProject/FinishedProjectManageAuditFinished.aspx"
method="post">
<input type="hidden" name="status" value="active"/>
<input type="hidden" name="pageNum" />
<input type="hidden" name="numPerPage" value="<%=numPerPage.Value%>" />
</form>
<ul class="toolBar">
<li><a class="delete"
href="ProjectManage/FinishedProject/FinishedProjectManageAuditFinished.aspx?fuid={sid_fin}"
target="navTabTodo"
title="确定要反审核吗?"><span>反审核</span></a></li> </ul>
</div>
<table class="table" layouth="138">
</table>
<div class="panelBar">
<div class="pages">
<span>显示</span>
<select id="numPerPage" runat="server"
onchange="tabPageBreak(gpage.jObj('tab2'),{numPerPage:this.value})">
<option value="3" selected="selected">3</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
</select>
<span>条,共<%=total %>条</span>
</div>
<div class="pagination" targettype="navTab" totalcount="<%=total
%>" numperpage="<%=numPerPage.Value %>" currentpage="<%=pageNum %>" tab="tab2">
</div>
</div>
3、在其他的三个页面中一开始就应该写<div class="panelBar"></div
class="panelBar">,前面的样式不需要,因为我们加载的时候前面的样式已经加载了所以只需要从panelBar开始加载即可。
比如上面显示处理分页的pagerForm也可以放到pagelBar里面。不能放到外面,不会加载的。
4、对于分页因为涉及到多个Tab的同时分页的问题,但是一个页面只有一个pagerForm考虑到假如修改为多个pagerForm的话,问题更加繁琐,
所以现在我们拆开来处理。里面的分页稍作了修改,以前我们用navTabPageBreak();现在我们用tabPageBreak并将当前tab2加了前缀的的值传到脚本中。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2016-12-02
展开全部
怎样规范设计移动端APP的UI
规范目的/系统
1
遵循各平台的统一的界面规范,使最终设计出来的界面效果达到最理想状态
怎样规范设计移动端APP的UI
2
提高工作效率,UI/UE/开发编码三方人员相互之间协作更轻松,减少因资源或设计问题导致的反复修改、重复劳动、效率低下的现象
3
通过规范的方式来达到以用户为中心的目的,给用户呈现最佳效果和最优质的体验
4
目前使用最多的移动端操作系统平台有Android、IOS、Windows Phone
其他的操作系统包括BlackBerry 10、NokiaOS、Firefox 、Sailfish OS、Tizen、UbuntuTouch
怎样规范设计移动端APP的UI
设计尺寸/屏幕支持
1
IOS:宽度640PX 高度1136px
当然还需要自适应模式,以便以后的屏幕扩充需求。
IOS系统从iPhone4开始已经进入Retina(视网膜屏)时代,资源尺寸比例从原来的1X变为了2X。
2
Android:宽度720px 高度1280px
同样的设计成自适应模式,现在Android系统的屏幕也是越来越多样!
Android系统采用可自适应的屏幕支持,由于屏幕尺寸种类繁多,简单可归为ldpi(240*320)、mdpi(320*480)、hdpi(480*800)、xhdpi(720*1280)四类
3
Web Mobile:宽度640px 高度960px
这个对于网页的浏览来说是最适合不过了的!
细节模块(客户端/Web内嵌)
1
导航栏:显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,ios导航栏的ui图标格式为60px留白7px,Android系统的可以为:64px*48px留白8px
2
标签栏:让用户可以在不同子任务、视图、模式之间切换。
ios系统Tab Bar:98px
Android系统Tab Bar:96px
3
工具栏:放置当前屏幕或者视图下对相关对象的操作按钮。
ios系统Tab Bar:88px
Android系统Tab Bar:96px
4
为了能够让用户有更好更直观的体验,资源需要有各种状态。
5
列表:无论哪种形式列表,单行列表高度必须是用户手指接触的最佳值
ios系统Height 88px
Android系统Height 96px
6
字体:
IOS:默认字体 英文 HelveticalNeue 中文 黑体
Android:默认字体 Droidsans fallback 是谷歌自己的字体,与微软雅黑很像
7
字号:以下图IOS为例子
我的音乐:34 px
我的、淘歌、发现: 30 px
Muxx 34 px
本地音乐 30 px
泡沫、邓紫棋 24px
8
桌面ICON:
根据系统的不通桌面的图标设计也需要根据设计成不通的尺寸。
9
细节模块(Web内嵌):细节最为重要,只有好的内容和完美的细节才能吸引住浏览者的关注!所以在制作的过程中也需要更加的关注!
转载
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询