Commit 1926da1eaa85d7d3f1343cffded030d8cf2c12c1
Committed by
Gerrit Code Review
Merge "branch swith" into dev
Showing
6 changed files
with
296 additions
and
0 deletions
2.0/filterpop.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html lang="en"> | ||
3 | +<head> | ||
4 | + <meta charset="UTF-8"> | ||
5 | + <meta name="format-detection" content="telephone=no" /> | ||
6 | + <meta name="msapplication-tap-highlight" content="no" /> | ||
7 | + <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> | ||
8 | + <!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> --> | ||
9 | + <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport" /> | ||
10 | + <title>筛选弹出面板</title> | ||
11 | + <link rel="stylesheet" href="../css/style/common.css"> | ||
12 | + <link rel="stylesheet" href="../css/style/filterpop.css"> | ||
13 | + | ||
14 | + <!-- base seajs --> | ||
15 | + <script type="text/javascript" src="http://static.nong12.com/static/newStatic/common/js/base/sea.js"></script> | ||
16 | + <!-- base jquery --> | ||
17 | + <script type="text/javascript" src="http://static.nong12.com/static/newStatic/common/js/base/jquery-2.1.3.min.js"></script> | ||
18 | +</head> | ||
19 | + | ||
20 | +<body id="filterpop"> | ||
21 | + <!-- // wait bechao demo --> | ||
22 | +</body> | ||
23 | +</html> | ||
0 | \ No newline at end of file | 24 | \ No newline at end of file |
2.0/searchtab01.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html lang="en"> | ||
3 | +<head> | ||
4 | + <meta charset="UTF-8"> | ||
5 | + <meta name="format-detection" content="telephone=no" /> | ||
6 | + <meta name="msapplication-tap-highlight" content="no" /> | ||
7 | + <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> | ||
8 | + <!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> --> | ||
9 | + <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport" /> | ||
10 | + <title>带tab的 搜索01</title> | ||
11 | + <link rel="stylesheet" href="../css/style/common.css"> | ||
12 | + <link rel="stylesheet" href="../css/style/searchtab.css"> | ||
13 | + | ||
14 | + <!-- base seajs --> | ||
15 | + <script type="text/javascript" src="http://static.nong12.com/static/newStatic/common/js/base/sea.js"></script> | ||
16 | + <!-- base jquery --> | ||
17 | + <script type="text/javascript" src="http://static.nong12.com/static/newStatic/common/js/base/jquery-2.1.3.min.js"></script> | ||
18 | +</head> | ||
19 | + | ||
20 | +<body id="serachtab"> | ||
21 | + <div class="m-page"> | ||
22 | + <header class="m-header header-light"> | ||
23 | + <div class="head"> | ||
24 | + <a href="#" class="lt-bar m-icon icon-back white">返回</a> | ||
25 | + <ul class="m-tab" searchtab> | ||
26 | + <li class="active" ><a href="javascript:;" data-target="tab-content-goods">商品</a></li> | ||
27 | + <li class=""><a href="javascript:;" data-target="tab-content-store">店铺</i></a></li> | ||
28 | + </ul> | ||
29 | + </div> | ||
30 | + </header> | ||
31 | + <section class="m-content tab-content"> | ||
32 | + <div id="tab-content-goods"> | ||
33 | + <form class="m-form inline-form"> | ||
34 | + <input type="text" autocomplete="off" class="m-input" placeholder="输入要搜索的商品"> | ||
35 | + <button class="m-btn btn-success btn-search">搜 索</button> | ||
36 | + </form> | ||
37 | + </div> | ||
38 | + | ||
39 | + <div id="tab-content-store" class="m-hide"> | ||
40 | + <form class="m-form inline-form"> | ||
41 | + <input type="text" autocomplete="off" class="m-input" placeholder="输入要搜索的店铺"> | ||
42 | + <button class="m-btn btn-success btn-search">搜 索</button> | ||
43 | + </form> | ||
44 | + </div> | ||
45 | + </section> | ||
46 | + </div> | ||
47 | + <script type="text/javascript" src="../js/javascript/common/config.js"></script> | ||
48 | + <script type="text/javascript"> | ||
49 | + seajs.use( ['../js/javascript/search/searchtab.js']); | ||
50 | + </script> | ||
51 | +</body> | ||
52 | +</html> | ||
0 | \ No newline at end of file | 53 | \ No newline at end of file |
2.0/searchtab02.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html lang="en"> | ||
3 | +<head> | ||
4 | + <meta charset="UTF-8"> | ||
5 | + <meta name="format-detection" content="telephone=no" /> | ||
6 | + <meta name="msapplication-tap-highlight" content="no" /> | ||
7 | + <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> | ||
8 | + <!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> --> | ||
9 | + <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport" /> | ||
10 | + <title>带tab的 搜索02(带搜索结果)</title> | ||
11 | + <link rel="stylesheet" href="../css/style/common.css"> | ||
12 | + <link rel="stylesheet" href="../css/style/searchtab.css"> | ||
13 | + | ||
14 | + <!-- base seajs --> | ||
15 | + <script type="text/javascript" src="http://static.nong12.com/static/newStatic/common/js/base/sea.js"></script> | ||
16 | + <!-- base jquery --> | ||
17 | + <script type="text/javascript" src="http://static.nong12.com/static/newStatic/common/js/base/jquery-2.1.3.min.js"></script> | ||
18 | +</head> | ||
19 | + | ||
20 | +<body id="serachtab"> | ||
21 | + <div class="m-page"> | ||
22 | + <header class="m-header"> | ||
23 | + <div class="head"> | ||
24 | + <a href="#" class="lt-bar m-icon icon-back white">返回</a> | ||
25 | + <ul class="m-tab"> | ||
26 | + <li class="" ><a href="javascript:;" data-target="tab-content-goods">商品</a></li> | ||
27 | + <li class="active"><a href="javascript:;" data-target="tab-content-store">店铺</i></a></li> | ||
28 | + </ul> | ||
29 | + </div> | ||
30 | + </header> | ||
31 | + <section class="m-content tab-content"> | ||
32 | + <div id="tab-content-goods" class="m-hide"> | ||
33 | + <form class="m-form inline-form"> | ||
34 | + <input type="text" autocomplete="off" class="m-input" placeholder="输入要搜索的商品"> | ||
35 | + <button class="m-btn btn-success btn-search">搜 索</button> | ||
36 | + </form> | ||
37 | + </div> | ||
38 | + | ||
39 | + <div id="tab-content-store"> | ||
40 | + <form class="m-form inline-form"> | ||
41 | + <input type="text" autocomplete="off" class="m-input" placeholder="输入要搜索的店铺"> | ||
42 | + <button class="m-btn btn-success btn-search">搜 索</button> | ||
43 | + </form> | ||
44 | + <div class="m-table-view sort-left"> | ||
45 | + <ul id="search-rs-list"> | ||
46 | + <li class="cell on" > | ||
47 | + <a class="title" href="#">测试店铺1</a> | ||
48 | + </li> | ||
49 | + <li class="cell" > | ||
50 | + <a class="title" href="#">测试店铺2</a> | ||
51 | + </li> | ||
52 | + </ul> | ||
53 | + </div> | ||
54 | + </div> | ||
55 | + </section> | ||
56 | + </div> | ||
57 | + <script type="text/javascript" src="../js/javascript/common/config.js"></script> | ||
58 | +</body> | ||
59 | +</html> | ||
0 | \ No newline at end of file | 60 | \ No newline at end of file |
css/style/searchtab.css
0 → 100644
1 | +#serachtab { | ||
2 | + font-family: 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimHei, tahoma, sans-serif; | ||
3 | + background: #fff; | ||
4 | +} | ||
5 | +#serachtab .m-header { | ||
6 | + background: #fff; | ||
7 | + border-bottom: 1px solid #dddddd; | ||
8 | +} | ||
9 | +#serachtab .m-tab { | ||
10 | + border: 0px solid #ddd; | ||
11 | + background: transparent; | ||
12 | + padding: 0px; | ||
13 | +} | ||
14 | +#serachtab .m-tab li { | ||
15 | + min-width: 80px; | ||
16 | + height: 43px; | ||
17 | + border: 1px solid #ddd; | ||
18 | + margin-left: 10px; | ||
19 | + padding: 0; | ||
20 | +} | ||
21 | +#serachtab .m-tab li a { | ||
22 | + display: inline-block; | ||
23 | + width: 100%; | ||
24 | + height: 100%; | ||
25 | + background: #f5f5f5; | ||
26 | + color: #666666; | ||
27 | +} | ||
28 | +#serachtab .m-tab li.active { | ||
29 | + border-bottom: 1px solid #fff; | ||
30 | +} | ||
31 | +#serachtab .m-tab li.active a { | ||
32 | + display: inline-block; | ||
33 | + width: 100%; | ||
34 | + height: 100%; | ||
35 | + color: #23ac38; | ||
36 | + background: #fff; | ||
37 | +} | ||
38 | +#serachtab .tab-content { | ||
39 | + padding: 15px; | ||
40 | +} | ||
41 | +#serachtab .inline-form { | ||
42 | + display: flex; | ||
43 | + flex-flow: row wrap; | ||
44 | +} | ||
45 | +#serachtab .inline-form input { | ||
46 | + box-sizing: border-box; | ||
47 | + flex: 1; | ||
48 | + height: 35px; | ||
49 | + line-height: 35px; | ||
50 | + font-family: 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimHei, tahoma, sans-serif; | ||
51 | + padding-left: 10px; | ||
52 | + border: 1px solid #ddd; | ||
53 | + font-size: 14px; | ||
54 | + background: #f5f5f5; | ||
55 | +} | ||
56 | +#serachtab .inline-form button { | ||
57 | + border-radius: 0; | ||
58 | + width: 60px; | ||
59 | + height: 35px; | ||
60 | + margin-left: 10px; | ||
61 | + line-height: 35px; | ||
62 | + font-family: 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimHei, tahoma, sans-serif; | ||
63 | + font-size: 14px; | ||
64 | + text-align: center; | ||
65 | + padding: 0px; | ||
66 | +} | ||
67 | +#serachtab .m-table-view { | ||
68 | + border-top: 0px solid #ccc; | ||
69 | +} |
css/style/searchtab.less
0 → 100644
1 | +#serachtab{ | ||
2 | + font-family: 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimHei, tahoma, sans-serif; | ||
3 | + background:#fff; | ||
4 | + .m-header{ | ||
5 | + background: #fff; | ||
6 | + border-bottom:1px solid #dddddd; | ||
7 | + } | ||
8 | + .m-tab{ | ||
9 | + border: 0px solid #ddd; | ||
10 | + background:transparent; | ||
11 | + padding:0px; | ||
12 | + } | ||
13 | + .m-tab li{ | ||
14 | + min-width:80px; | ||
15 | + height: 43px; | ||
16 | + border: 1px solid #ddd; | ||
17 | + margin-left:10px; | ||
18 | + padding:0; | ||
19 | + } | ||
20 | + .m-tab li a{ | ||
21 | + display: inline-block; | ||
22 | + width: 100%; | ||
23 | + height: 100%; | ||
24 | + background:#f5f5f5; | ||
25 | + color:#666666; | ||
26 | + } | ||
27 | + .m-tab li.active{ | ||
28 | + border-bottom: 1px solid #fff; | ||
29 | + } | ||
30 | + .m-tab li.active a{ | ||
31 | + display:inline-block; | ||
32 | + width:100%; | ||
33 | + height:100%; | ||
34 | + color:#23ac38; | ||
35 | + background:#fff; | ||
36 | + } | ||
37 | + .tab-content{ | ||
38 | + padding:15px; | ||
39 | + } | ||
40 | + .inline-form{ | ||
41 | + display: flex; | ||
42 | + flex-flow: row wrap; | ||
43 | + input{ | ||
44 | + box-sizing: border-box; | ||
45 | + flex: 1; | ||
46 | + height:35px; | ||
47 | + line-height:35px; | ||
48 | + font-family: 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimHei, tahoma, sans-serif; | ||
49 | + padding-left:10px; | ||
50 | + border:1px solid #ddd; | ||
51 | + font-size:14px; | ||
52 | + background:#f5f5f5; | ||
53 | + } | ||
54 | + button{ | ||
55 | + border-radius:0; | ||
56 | + width:60px; | ||
57 | + height:35px; | ||
58 | + margin-left:10px; | ||
59 | + line-height:35px; | ||
60 | + font-family: 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimHei, tahoma, sans-serif; | ||
61 | + font-size:14px; | ||
62 | + text-align:center; | ||
63 | + padding:0px; | ||
64 | + } | ||
65 | + } | ||
66 | + | ||
67 | + .m-table-view{ | ||
68 | + border-top:0px solid #ccc; | ||
69 | + } | ||
70 | +} | ||
0 | \ No newline at end of file | 71 | \ No newline at end of file |
js/javascript/search/searchtab.js
0 → 100644
1 | +define(function( require, exports, module ) { | ||
2 | + "use strict"; | ||
3 | + | ||
4 | + // 注册插件 | ||
5 | + $.fn.searchtab = function() { | ||
6 | + if (this.length > 0) { | ||
7 | + return this.each(function() { | ||
8 | + $(this).find("[data-target]").click(function(){ | ||
9 | + var target = $(this).attr('data-target'); | ||
10 | + var $target = $("#"+target); | ||
11 | + $target.siblings().addClass('m-hide'); | ||
12 | + $target.removeClass('m-hide'); | ||
13 | + $(this).parent().siblings().removeClass('active'); | ||
14 | + $(this).parent().addClass('active'); | ||
15 | + }); | ||
16 | + }); | ||
17 | + } | ||
18 | + }; | ||
19 | + | ||
20 | + $(function(){ | ||
21 | + $("[searchtab]").searchtab(); | ||
22 | + }); | ||
23 | +}); |