-
Notifications
You must be signed in to change notification settings - Fork 3
/
tabSearch.html
87 lines (79 loc) · 4.01 KB
/
tabSearch.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>标签搜索</title>
<style>
*{padding:0;margin:0;font-size:12px;}
a.bTag{border:1px solid #ccc;display: inline-block;overflow: hidden;margin: 1px;margin-right: 5px;width:100px}
a.bTag span{display: block;line-height: 26px;color:#333;font-size:12px;text-align:center;}
a.bTag.select,a.bTag:active,a.bTag:hover{border:1px solid #fff;color:#fff;background:#6699ff;text-decoration:none;}
a.bTag.select,a.bTag:active{background:url(img/clsBg.png) no-repeat right top #6699ff;}
a.bTag.select span,a.bTag:active span,a.bTag:hover span{color:#fff;}
a.label{display: inline-block;line-height: 26px;overflow: hidden;margin-right: 5px;width:80px;text-align:right;}
/*按钮样式CSS3*/
button {margin-left:15px; padding: 6px 15px; cursor: pointer; display: inline-block; text-align: center; line-height: 1; *padding:4px 15px; *height:2em; letter-spacing:2px; font-family: Tahoma, Arial/9!important; width:auto; overflow:visible; *width:1; color: #333; border: solid 1px #bababa; border-radius: 2px; background: #DDD; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#e8e8e8'); background: linear-gradient(top, #F7F7F7, #E8E8E8); background: -moz-linear-gradient(top, #F7F7F7, #E8E8E8); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F7F7F7), to(#E8E8E8));}
button::-moz-focus-inner{ border:0; padding:0; margin:0; }
button:focus { outline:none 0;}/* border-color:#426DC9; box-shadow:0 0 8px rgba(66, 109, 201, .9); */
button:hover { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E8E8', endColorstr='#F0F0F0'); background: linear-gradient(top, #E8E8E8, #F0F0F0); background: -moz-linear-gradient(top, #E8E8E8, #F0F0F0); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E8E8E8), to(#F0F0F0));box-shadow:inset 0 2px 10px rgba(255, 255, 255, .9);}
button:active {box-shadow:inset 0 1px 5px rgba(184, 184, 184, .65), inset 0 1px 1em rgba(0, 0, 0, .3); }
</style>
<script>
$(document).ready(function() {
tabClick();//标签搜索点击事件；
});
function getSearchParam(){
var param = {};
var objs = $("#tabSearch .select");
objs.each(function(){
param[$(this).attr("n")] = $(this).attr("v");
});
return param;
}
function tabClick(){
$(".bTag").click(function(){
$(this).toggleClass("select").siblings().removeClass('select');
});
}
function getValue(){
var values = getSearchParam();
var shop = null, goods = null;
if( values['shop']){
shop = values['shop'];
}
if( values['goods']){
goods = values['goods'];
}
alert("shop:"+shop+",goods:"+goods);
/*for(i in values){
alert(i+":"+values[i]);
}*/
}
</script>
</head>
<body>
<div id="tabSearch">
<ul>
<li>
<a class="label" id="shop">商家</a>
<a class="bTag" n="shop" v="tmall"><span class="">天猫</span></a>
<a class="bTag" n="shop" v="tbSellers"><span class="">淘宝卖家</span></a>
</li>
<li>
<a class="label" id="goods">商品</a>
<a class="bTag" n="goods" v="woman"><span class="">女装</span></a>
<a class="bTag" n="goods" v="man"><span class="">男装</span></a>
<a class="bTag" n="goods" v="child"><span class="">童装</span></a>
</li>
</ul>
</div>
<button onclick="getValue()">点击我获取当前选择的值</button>
<!--废话在后
这个是最近写的标签搜索，也是单选框。在获取数据可能有点麻烦。现在就是一个一个获取，自己设置变量。
还有一个思路就是，通过获取所有label的id，写成一个方法。
吐槽：google了半天就没有搜到一个引入远程jquery的资料！！！还好我自己资料里有
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
*/-->
</body>
</html>