首页 探索 帮助
注册 登录
bulomakaka
/
ekexiu.app
关注 2
点赞 1
派生 0
代码 工单管理 0 合并请求 0 提交历史 20 版本发布 0 Wiki
浏览代码

首页底部导航，整合页面

xuchunyang 8 年之前
父节点
ebeb2c2fca
当前提交
3857e94114
共有 5 个文件被更改，包括 272 次插入 和 258 次删除
分列视图 显示文件统计
  1. 0 16
      app/html/consultlist.html
  2. 215 0
      app/html/index_home.html
  3. 1 16
      app/html/myaccount.html
  4. 52 210
      app/index.html
  5. 4 16
      app/js/index.js

+ 0 - 16
app/html/consultlist.html
查看文件 

@ -12,24 +12,8 @@
12 12
13 13 
	<!-- 主页面标题 -->
14 14 
	<header class="mui-bar mui-bar-nav toptitbox">
15 
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></a>
16 15 
	    <h1 class="mui-title toptit">咨询</h1>
17 16 
	</header>
18 
	<!--主页面底部菜单-->
19 
    <nav class="mui-bar mui-bar-tab footbox">
20 
	    <a class="mui-tab-item mui-active" href="index.html">
21 
	        <span class="mui-icon mui-icon-home"></span>
22 
	    </a>
23 
	    <a class="mui-tab-item">
24 
	        <span class="mui-icon mui-icon-chat"></span>
25 
	    </a>
26 
	    <a class="mui-tab-item">
27 
	        <span class="mui-icon mui-icon-email"></span>
28 
	    </a>
29 
	    <a class="mui-tab-item" href="html/myaccount.html">
30 
	        <span class="mui-icon mui-icon-person"></span>
31 
	    </a>
32 
	</nav>
33 17 
    <!-- 主页面内容容器 -->
34 18 
    <div class="mui-content">
35 19 
    	<!-- 主界面具体展示内容 -->

+ 215 - 0
app/html/index_home.html
查看文件 

@ -0,0 +1,215 @@
1 
<!doctype html>
2 
<html>
3 
<head>
4 
<meta charset="UTF-8">
5 
<title></title>
6 
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7 
<link href="../css/mui.min.css" rel="stylesheet" />
8 
<link href="../css/app.css" rel="stylesheet" />
9 
</head>
10 
<body>
11
12 
<!-- 主页面标题 -->
13 
<header class="mui-bar mui-bar-nav toptitbox">
14 
    <div class="mui-input-row mui-search searchbox">
15 
	    <input type="search" class="mui-input-clear searchtxt" placeholder="搜索专家、设备资源" id="search">
16 
	</div>
17 
</header>
18 
 <!-- 主页面内容容器 -->
19 
    <div class="mui-content">
20 
    	<!-- 主界面具体展示内容 -->
21 
    	<!--图片轮播-->
22 
        <div id="slider" class="mui-slider" >
23 
          <div class="mui-slider-group mui-slider-loop">
24 
            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
25 
            <div class="mui-slider-item mui-slider-item-duplicate">
26 
              <a href="#">
27 
                 <img src="http://placehold.it/200x100">
28 
              </a>
29 
            </div>
30 
            <!-- 第一张 -->
31 
            <div class="mui-slider-item">
32 
              <a href="#">
33 
                 <img src="http://placehold.it/200x100">
34 
              </a>
35 
            </div>
36 
            <!-- 第二张 -->
37 
            <div class="mui-slider-item">
38 
              <a href="#">
39 
                 <img src="http://placehold.it/200x100">
40 
              </a>
41 
            </div>
42 
            <!-- 第三张 -->
43 
            <div class="mui-slider-item">
44 
              <a href="#">
45 
                 <img src="http://placehold.it/200x100">
46 
              </a>
47 
            </div>
48 
            <!-- 第四张 -->
49 
            <div class="mui-slider-item">
50 
              <a href="#">
51 
                 <img src="http://placehold.it/200x100">
52 
              </a>
53 
            </div>
54 
            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
55 
            <div class="mui-slider-item mui-slider-item-duplicate">
56 
              <a href="#">
57 
                 <img src="http://placehold.it/200x100">
58 
              </a>
59 
            </div>
60 
          </div>
61 
          <div class="mui-slider-indicator">
62 
            <div class="mui-indicator mui-active"></div>
63 
            <div class="mui-indicator"></div>
64 
            <div class="mui-indicator"></div>
65 
            <div class="mui-indicator"></div>
66 
          </div>
67 
        </div>
68
69 
        <!-- 九宫格排版-->
70 
        <div class="mui-card-content conblock">
71 
        	<div class="maintitbox">
72 
        		<h4 class="maintit">热门领域</h4>
73 
        	</div>
74 
	        <ul class="mui-table-view mui-grid-view mui-grid-9 gridbg">
75 
		        <li class="mui-table-view-cell mui-media mui-col-xs-4">
76 
		            <a href="#">
77 
		                <div class="fieldicon">
78 
		                	<img src="../images/field05.png"/>
79 
		                </div>
80 
		                <div class="mui-media-body">材料失效与保护</div>
81 
		            </a>
82 
		        </li>
83 
		        <li class="mui-table-view-cell mui-media mui-col-xs-4">
84 
		            <a href="#">
85 
		                <div class="fieldicon">
86 
		                	<img src="../images/field02.png"/>
87 
		                </div>
88 
		                <div class="mui-media-body">材料表面与界面</div>
89 
		            </a>
90 
		        </li>
91 
		        <li class="mui-table-view-cell mui-media mui-col-xs-4">
92 
		            <a href="#">
93 
		                <div class="fieldicon">
94 
		                	<img src="../images/field07.png"/>
95 
		                </div>
96 
		                <div class="mui-media-body">黑色金属及其合金</div>
97 
		            </a>
98 
		        </li>
99 
		        <li class="mui-table-view-cell mui-media mui-col-xs-4">
100 
		            <a href="#">
101 
		                <div class="fieldicon">
102 
		                	<img src="../images/field18.png"/>
103 
		                </div>
104 
		                <div class="mui-media-body">有色金属及其合金</div>
105 
		            </a>
106 
		        </li>
107 
		        <li class="mui-table-view-cell mui-media mui-col-xs-4">
108 
		            <a href="#">
109 
		                <div class="fieldicon">
110 
		                	<img src="../images/field04.png"/>
111 
		                </div>
112 
		                <div class="mui-media-body">材料检测与分析技术</div>
113 
		            </a>
114 
		        </li>
115 
		        <li class="mui-table-view-cell mui-media mui-col-xs-4">
116 
		            <a href="#">
117 
		                <div class="fieldicon">
118 
		                	<img src="../images/field16.png"/>
119 
		                </div>
120 
		                <div class="mui-media-body">非晶、微晶金属材料</div>
121 
		            </a>
122 
		        </li>
123 
            </ul>
124 
        </div>
125 
        <!--图文列表-->
126 
        <div class="mui-card-content conblock">
127 
        	<div class="maintitbox">
128 
        		<h4 class="maintit">热门专家</h4>
129 
        	</div>
130 
	        <ul class="mui-table-view protable" id="indexlist">
131 
	            <li class="mui-table-view-cell mui-media">
132 
	                <a class="proinfor" href="html/proinforbrow.html">
133 
	                    <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
134 
	                    <div class="mui-media-body">
135 
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="images/authicon.png"/></span>
136 
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>，<span>所属机构</span> | <span>所在地</span></p>
137 
	                    	<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
138 
	                    	<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
139 
	                    </div>
140 
	                </a>
141 
	            </li>
142 
	            <li class="mui-table-view-cell mui-media">
143 
	                <a href="javascript:;">
144 
	                    <img class="mui-media-object mui-pull-left headimg" src="images/default-photo.jpg">
145 
	                    <div class="mui-media-body">
146 
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="images/authicon.png"/></span>
147 
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
148 
	                    	<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
149 
	                    	<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
150 
	                    </div>
151 
	                </a>
152 
	            </li>
153 
	            <li class="mui-table-view-cell mui-media">
154 
	                <a href="javascript:;">
155 
	                    <img class="mui-media-object mui-pull-left headimg" src="images/default-photo.jpg">
156 
	                    <div class="mui-media-body">
157 
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="images/authicon.png"/></span>
158 
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
159 
	                    	<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
160 
	                    	<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
161 
	                    </div>
162 
	                </a>
163 
	            </li>
164 
	            <li class="mui-table-view-cell mui-media">
165 
	                <a href="javascript:;">
166 
	                    <img class="mui-media-object mui-pull-left headimg" src="images/default-photo.jpg">
167 
	                    <div class="mui-media-body">
168 
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="images/authicon.png"/></span>
169 
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
170 
	                    	<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
171 
	                    	<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
172 
	                    </div>
173 
	                </a>
174 
	            </li>
175 
	            <li class="mui-table-view-cell mui-media">
176 
	                <a href="javascript:;">
177 
	                    <img class="mui-media-object mui-pull-left headimg" src="images/default-photo.jpg">
178 
	                    <div class="mui-media-body">
179 
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="images/authicon.png"/></span>
180 
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
181 
	                    	<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
182 
	                    	<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
183 
	                    </div>
184 
	                </a>
185 
	            </li>
186 
	            <li class="mui-table-view-cell mui-media">
187 
	                <a href="javascript:;">
188 
	                    <img class="mui-media-object mui-pull-left headimg" src="images/default-photo.jpg">
189 
	                    <div class="mui-media-body">
190 
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="images/authicon.png"/></span>
191 
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
192 
	                    	<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
193 
	                    	<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
194 
	                    </div>
195 
	                </a>
196 
	            </li>
197 
	            <li class="mui-table-view-cell mui-media">
198 
	                <a href="javascript:;">
199 
	                    <img class="mui-media-object mui-pull-left headimg" src="images/default-photo.jpg">
200 
	                    <div class="mui-media-body">
201 
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="images/authicon.png"/></span>
202 
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
203 
	                    	<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
204 
	                    	<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
205 
	                    </div>
206 
	                </a>
207 
	            </li>
208 
	        </ul>
209 
		</div>
210 
    </div>
211 
    <script src="../js/public/mui.min.js"></script>
212 
	<script src="../js/public/base.js"></script>
213 
	<script src="../js/index.js"></script>
214 
</body>
215 
</html>

+ 1 - 16
app/html/myaccount.html
查看文件 

@ -10,24 +10,9 @@
10 10
11 11 
	<body>
12 12 
		<header class="mui-bar mui-bar-nav toptitbox">
13 
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></a>
14 13 
		    <h1 class="mui-title toptit">我的账户</h1>
15 14 
		</header>
16 
		<!--主页面底部菜单-->
17 
	    <nav class="mui-bar mui-bar-tab footbox">
18 
		    <a class="mui-tab-item">
19 
		        <span class="mui-icon mui-icon-home"></span>
20 
		    </a>
21 
		    <a class="mui-tab-item">
22 
		        <span class="mui-icon mui-icon-chat"></span>
23 
		    </a>
24 
		    <a class="mui-tab-item">
25 
		        <span class="mui-icon mui-icon-email"></span>
26 
		    </a>
27 
		    <a class="mui-tab-item mui-active">
28 
		        <span class="mui-icon mui-icon-person"></span>
29 
		    </a>
30 
		</nav>
15
31 16 
		<div class="mui-content">
32 17 
			<!-- 主界面具体展示内容 -->
33 18 
    		<div class="mui-input-group  marginbox">

+ 52 - 210
app/index.html
查看文件 

@ -9,226 +9,68 @@
9 9 
</head>
10 10 
<body>
11 11
12 
	<!-- 主页面标题 -->
13 
    <header class="mui-bar mui-bar-nav toptitbox">
14 
		<!--<div class="mui-input-row frm-input searchbox">
15 
            <input type="text" class="mui-input-clear frmtype searchtxt" placeholder="搜索专家、设备资源">
16 
            <span class="mui-icon mui-icon-search searchicon"></span>
17 
        </div>-->
18 
        <div class="mui-input-row mui-search searchbox">
19 
		    <input type="search" class="mui-input-clear searchtxt" placeholder="搜索专家、设备资源" id="search">
20 
		</div>
21 
	</header>
22 
    <!-- 主页面内容容器 -->
23 
    <div class="mui-content">
24 
    	<!-- 主界面具体展示内容 -->
25 
    	<!--图片轮播-->
26 
        <div id="slider" class="mui-slider" >
27 
          <div class="mui-slider-group mui-slider-loop">
28 
            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
29 
            <div class="mui-slider-item mui-slider-item-duplicate">
30 
              <a href="#">
31 
                 <img src="http://placehold.it/200x100">
32 
              </a>
33 
            </div>
34 
            <!-- 第一张 -->
35 
            <div class="mui-slider-item">
36 
              <a href="#">
37 
                 <img src="http://placehold.it/200x100">
38 
              </a>
39 
            </div>
40 
            <!-- 第二张 -->
41 
            <div class="mui-slider-item">
42 
              <a href="#">
43 
                 <img src="http://placehold.it/200x100">
44 
              </a>
45 
            </div>
46 
            <!-- 第三张 -->
47 
            <div class="mui-slider-item">
48 
              <a href="#">
49 
                 <img src="http://placehold.it/200x100">
50 
              </a>
51 
            </div>
52 
            <!-- 第四张 -->
53 
            <div class="mui-slider-item">
54 
              <a href="#">
55 
                 <img src="http://placehold.it/200x100">
56 
              </a>
57 
            </div>
58 
            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
59 
            <div class="mui-slider-item mui-slider-item-duplicate">
60 
              <a href="#">
61 
                 <img src="http://placehold.it/200x100">
62 
              </a>
63 
            </div>
64 
          </div>
65 
          <div class="mui-slider-indicator">
66 
            <div class="mui-indicator mui-active"></div>
67 
            <div class="mui-indicator"></div>
68 
            <div class="mui-indicator"></div>
69 
            <div class="mui-indicator"></div>
70 
          </div>
71 
        </div>
72
73 
        <!-- 九宫格排版-->
74 
        <div class="mui-card-content conblock">
75 
        	<div class="maintitbox">
76 
        		<h4 class="maintit">热门领域</h4>
77 
        	</div>
78 
	        <ul class="mui-table-view mui-grid-view mui-grid-9 gridbg">
79 
		        <li class="mui-table-view-cell mui-media mui-col-xs-4">
80 
		            <a href="#">
81 
		                <div class="fieldicon">
82 
		                	<img src="images/field05.png"/>
83 
		                </div>
84 
		                <div class="mui-media-body">材料失效与保护</div>
85 
		            </a>
86 
		        </li>
87 
		        <li class="mui-table-view-cell mui-media mui-col-xs-4">
88 
		            <a href="#">
89 
		                <div class="fieldicon">
90 
		                	<img src="images/field02.png"/>
91 
		                </div>
92 
		                <div class="mui-media-body">材料表面与界面</div>
93 
		            </a>
94 
		        </li>
95 
		        <li class="mui-table-view-cell mui-media mui-col-xs-4">
96 
		            <a href="#">
97 
		                <div class="fieldicon">
98 
		                	<img src="images/field07.png"/>
99 
		                </div>
100 
		                <div class="mui-media-body">黑色金属及其合金</div>
101 
		            </a>
102 
		        </li>
103 
		        <li class="mui-table-view-cell mui-media mui-col-xs-4">
104 
		            <a href="#">
105 
		                <div class="fieldicon">
106 
		                	<img src="images/field18.png"/>
107 
		                </div>
108 
		                <div class="mui-media-body">有色金属及其合金</div>
109 
		            </a>
110 
		        </li>
111 
		        <li class="mui-table-view-cell mui-media mui-col-xs-4">
112 
		            <a href="#">
113 
		                <div class="fieldicon">
114 
		                	<img src="images/field04.png"/>
115 
		                </div>
116 
		                <div class="mui-media-body">材料检测与分析技术</div>
117 
		            </a>
118 
		        </li>
119 
		        <li class="mui-table-view-cell mui-media mui-col-xs-4">
120 
		            <a href="#">
121 
		                <div class="fieldicon">
122 
		                	<img src="images/field16.png"/>
123 
		                </div>
124 
		                <div class="mui-media-body">非晶、微晶金属材料</div>
125 
		            </a>
126 
		        </li>
127 
            </ul>
128 
        </div>
129 
        <!--图文列表-->
130 
        <div class="mui-card-content conblock">
131 
        	<div class="maintitbox">
132 
        		<h4 class="maintit">热门专家</h4>
133 
        	</div>
134 
	        <ul class="mui-table-view protable" id="indexlist">
135 
	            <li class="mui-table-view-cell mui-media">
136 
	                <a class="proinfor" href="html/proinforbrow.html">
137 
	                    <img class="mui-media-object mui-pull-left headimg" src="images/default-photo.jpg">
138 
	                    <div class="mui-media-body">
139 
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="images/authicon.png"/></span>
140 
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>，<span>所属机构</span> | <span>所在地</span></p>
141 
	                    	<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
142 
	                    	<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
143 
	                    </div>
144 
	                </a>
145 
	            </li>
146 
	            <li class="mui-table-view-cell mui-media">
147 
	                <a href="javascript:;">
148 
	                    <img class="mui-media-object mui-pull-left headimg" src="images/default-photo.jpg">
149 
	                    <div class="mui-media-body">
150 
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="images/authicon.png"/></span>
151 
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
152 
	                    	<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
153 
	                    	<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
154 
	                    </div>
155 
	                </a>
156 
	            </li>
157 
	            <li class="mui-table-view-cell mui-media">
158 
	                <a href="javascript:;">
159 
	                    <img class="mui-media-object mui-pull-left headimg" src="images/default-photo.jpg">
160 
	                    <div class="mui-media-body">
161 
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="images/authicon.png"/></span>
162 
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
163 
	                    	<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
164 
	                    	<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
165 
	                    </div>
166 
	                </a>
167 
	            </li>
168 
	            <li class="mui-table-view-cell mui-media">
169 
	                <a href="javascript:;">
170 
	                    <img class="mui-media-object mui-pull-left headimg" src="images/default-photo.jpg">
171 
	                    <div class="mui-media-body">
172 
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="images/authicon.png"/></span>
173 
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
174 
	                    	<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
175 
	                    	<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
176 
	                    </div>
177 
	                </a>
178 
	            </li>
179 
	            <li class="mui-table-view-cell mui-media">
180 
	                <a href="javascript:;">
181 
	                    <img class="mui-media-object mui-pull-left headimg" src="images/default-photo.jpg">
182 
	                    <div class="mui-media-body">
183 
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="images/authicon.png"/></span>
184 
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
185 
	                    	<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
186 
	                    	<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
187 
	                    </div>
188 
	                </a>
189 
	            </li>
190 
	            <li class="mui-table-view-cell mui-media">
191 
	                <a href="javascript:;">
192 
	                    <img class="mui-media-object mui-pull-left headimg" src="images/default-photo.jpg">
193 
	                    <div class="mui-media-body">
194 
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="images/authicon.png"/></span>
195 
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
196 
	                    	<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
197 
	                    	<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
198 
	                    </div>
199 
	                </a>
200 
	            </li>
201 
	            <li class="mui-table-view-cell mui-media">
202 
	                <a href="javascript:;">
203 
	                    <img class="mui-media-object mui-pull-left headimg" src="images/default-photo.jpg">
204 
	                    <div class="mui-media-body">
205 
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="images/authicon.png"/></span>
206 
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
207 
	                    	<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
208 
	                    	<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
209 
	                    </div>
210 
	                </a>
211 
	            </li>
212 
	        </ul>
213 
		</div>
214 
    </div>
215 12 
    <!--主页面底部菜单-->
216 13 
    <nav class="mui-bar mui-bar-tab footbox">
217 
	    <a class="mui-tab-item mui-active" href="index.html">
14 
	    <a class="mui-tab-item mui-active" href="html/index_home.html">
218 15 
	        <span class="mui-icon mui-icon-home"></span>
219 16 
	    </a>
220 
	    <a class="mui-tab-item">
17 
	    <a class="mui-tab-item" href="html/consultlist.html">
221 18 
	        <span class="mui-icon mui-icon-chat"></span>
222 19 
	    </a>
223 
	    <a class="mui-tab-item">
224 
	        <span class="mui-icon mui-icon-email"></span>
225 
	    </a>
226 
	    <a class="mui-tab-item" id="isLogin">
20 
	    <a class="mui-tab-item" id="isLogin" href="html/myaccount.html">
227 21 
	        <span class="mui-icon mui-icon-person"></span>
228 22 
	    </a>
229 23 
	</nav>
230 24 
    <script src="js/public/mui.min.js"></script>
231 25 
	<script src="js/public/base.js"></script>
232 
	<script src="js/index.js"></script>
26
27 
<script type="text/javascript" charset="utf-8">
28 
	var subpages = ['html/index_home.html', 'html/consultlist.html', 'html/myaccount.html'];
29 
	var subpage_style = {
30 
		top: '0px',
31 
		bottom: '45px'
32 
	};
33 
	var aniShow = {};
34 
	//创建子页面，首个选项卡页面显示，其它均隐藏；
35 
	mui.plusReady(function() {
36 
		var self = plus.webview.currentWebview();
37 
		for(var i = 0; i < 3; i++) {
38 
			var temp = {};
39 
			var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
40 
			if(i > 0) {
41 
				sub.hide();
42
43 
			} else {
44 
				temp[subpages[i]] = "true";
45 
				mui.extend(aniShow, temp);
46 
			}
47 
			self.append(sub);
48 
		}
49 
	});
50 
	//当前激活选项
51 
	var activeTab = subpages[0];
52 
	//选项卡点击事件
53 
	mui('.mui-bar-tab').on('tap', 'a', function(e) {
54 
		var targetTab = this.getAttribute('href');
55 
		if(targetTab == activeTab) {
56 
			return;
57 
		}
58 
		//显示目标选项卡
59 
		//若为iOS平台或非首次显示，则直接显示
60 
		if(mui.os.ios || aniShow[targetTab]) {
61 
			plus.webview.show(targetTab);
62 
		} else {
63 
			//否则，使用fade-in动画，且保存变量
64 
			var temp = {};
65 
			temp[targetTab] = "true";
66 
			mui.extend(aniShow, temp);
67 
			plus.webview.show(targetTab, "fade-in", 300);
68 
		}
69 
		//隐藏当前;
70 
		plus.webview.hide(activeTab);
71 
		//更改当前活跃的选项卡
72 
		activeTab = targetTab;
73 
	});
74 
</script>
233 75 
</body>
234 76 
</html>

+ 4 - 16
app/js/index.js
查看文件 

@ -1,28 +1,16 @@
1 1 
//首页
2 2 
mui.ready(function() {
3 3 
	/*定义全局变量*/
4 
	var isLogin = document.getElementById("isLogin");
5 4 
	var indexlist = document.getElementById("indexlist");
6 5 
	var search = document.getElementById("search");
7 6
8 7 
	mui.plusReady(function() {
9 8
10 
		/*点击个人中心按钮*/
11 
		isLogin.addEventListener('tap', function() {
12 
			mui.openWindow({
13 
				url: 'html/myaccount.html',
14 
				id: 'html/myaccount.html',
15 
				show: {
16 
					aniShow: "slide-in-right"
17 
				}
18 
			});
19 
		});
20
21 9 
		/*点击搜索按钮*/
22 10 
		search.addEventListener('focus', function() {
23 11 
			var searchpage = mui.preload({
24 
			    url: 'html/search.html',
25 
				id: 'html/search.html',
12 
			    url: '../html/search.html',
13 
				id: '../html/search.html',
26 14 
			});
27 15 
			searchpage.show("slide-in-right",150);
28 16 
		});

@ -39,9 +27,9 @@ mui.ready(function() {
39 27
40 28 
						/*获取头像*/
41 29 
						if($data.data.data[i].hasHeadImage == 1) {
42 
							var img = "images/head/" + $data.data.data[i].id + "_m.jpg";
30 
							var img = "../images/head/" + $data.data.data[i].id + "_m.jpg";
43 31 
						} else {
44 
							var img = "images/default-photo.jpg";
32 
							var img = "../images/default-photo.jpg";
45 33 
						}
46 34
47 35 
						/*获取研究方向信息*/