最新消息:

第55款插件:jquery.selectCity.js输入框弹出层

表单插件 杨红伟 6487浏览 0评论

说明:jquery.selectCity.js输入框弹出层,是指在input选择框里,单击鼠标便可以弹出一个层,供用户进行选择。

如图:

11

22

兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:本人根据网上自己写的插件
JS下载:http://www.ijquery.cn/js/jquery.selectCity.js
注意:需要一个插件进行辅助即:jquery.bgiframe.js。下载地址:http://www.ijquery.cn/js/jquery.bgiframe.js。此插件的作用是http://www.cnblogs.com/waynechan/archive/2012/06/29/2570039.html
提示: jquery.bgiframe.js-苦逼的程序猿都知道,IE6的使用情况在天朝还是挺普遍的,特别是在爱写日记的领导群中更加喜欢,如果我们做的网 页上有下拉框、Div浮动层、 Dialog之类的,会看到下拉选框总是把浮动区块div覆盖划破,而我尝试使用z-index属性也未能解决,但我们可以使用bgiframe 插件解决IE6 的这个bug。
预览: http://www.ijquery.cn/demo/selectCity
打包下载:http://www.ijquery.cn/demo/selectCity/selectCityr.zip

JS代码:

[js]

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.bgiframe.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.selectCity.js"></script>
<script type="text/javascript">
$(function(){
$("#text_sea").selectCity("#selectItem");
});
</script>

[/js]

HTML代码:

[html]

<input type="text" id="text_sea" name="keyword" value="目的地/景点/城市" onFocus="if(value =='目的地/景点/城市'){value =''}" onBlur="if(value ==''){value='目的地/景点/城市'}" />
<!--输入框弹出 start-->
<div id="selectItem">
<div id="selectItemAd">
<div id="selectItemTitle">输入城市/景点/目的地或在下列关键字中选择</div>
<div id="selectItemClose">关闭</div>
</div>
<div id="selectItemCount">
<dl>
<dt><strong>国内旅游</strong></dt>
<dd><a href="#"><u>北京</u></a><a href="#"><u>海南</u></a><a href="#">海口</a><a href="#">三亚</a><a href="#"><u>云南</u></a><a href="#">大理</a><a href="#">丽江</a><a href="#">西双版纳</a><a href="#">厦门</a><a href="#">张家界</a><a href="#">九寨沟</a><a href="#">桂林</a><a href="#">大连</a></dd>
</dl>
<dl>
<dt><strong>出境旅游</strong></dt>
<dd><a href="#">东南亚</a><a href="#">韩国</a><a href="#">香港</a><a href="#">澳门</a><a href="#"><u>泰国</u></a><a href="#">澳大利亚</a><a href="#">欧洲</a><a href="#">非洲</a><a href="#">俄罗斯</a><a href="#">马尔代夫</a><a href="#">巴厘岛</a><a href="#">美国</a></dd>
</dl>
<dl>
<dt><strong>周边旅游</strong></dt>
<dd><a href="#">一日游</a><a href="#">二日游</a><a href="#">踏青赏花</a><a href="#">千岛湖</a><a href="#">上海</a><a href="#">苏州</a><a href="#">杭州</a><a href="#">南京</a><a href="#">扬州</a><a href="#">无锡</a><a href="#">桐庐</a><a href="#">泰州</a><a href="#">镇江</a><a href="#">游山玩水</a><a href="#">水乡古镇</a><a href="#">主题乐园</a></dd>
</dl>
<dl>
<dt><strong>主题旅游</strong></dt>
<dd><a href="#">踏青赏花</a><a href="#">蜜月旅游</a><a href="#">周末休闲</a></dd>
</dl>
</div>
</div>
<!--输入框弹出 end-->

[/html]

CSS代码:

[css]

.text1 {padding:4px 2px;color:#666;border:1px solid #aaa;background:#fff;}
/*输入框弹出*/
.selectItemcont{padding:5px 0 10px 10px;clear:both;overflow:hidden;zoom:1;}
#selectItem{background:#FFF;position:absolute;top:0px;left:center;border:3px solid #690;overflow:hidden;width:358px;z-index:1000;}
.selectItemtit{line-height:24px;height:26px;padding:0 10px;background:#690;color:#fff;font-size:14px;}
.selectItemleft{float:left;}
.selectItemright{float:right;cursor:pointer;color:#f00;}
.selectItemcls{clear:both;font-size:0px;height:0px;overflow:hidden;}
.selectItemhidden{display:none;}
.select_dl1 {width:106px;margin-right:10px;overflow:hidden;zoom:1;float:left;}
.select_dl1 dt,.select_dl2 dt {height:20px;line-height:20px;color:#f60;border-bottom:1px dotted #e6e6e6;}
.select_dl1 dd,.select_dl2 dd {overflow:hidden;zoom:1;}
.select_dl1 dd a {display:block;width:48px;height:24px;line-height:24px;color:#333;margin-right:5px;float:left;}
.select_dl1 dd a:hover,.select_dl2 dd a:hover {color:#f30;}
.select_dl2 {width:338px;margin-right:10px;float:left;}
.select_dl2 dt {}
.select_dl2 dd a {display:block;width:60px;height:24px;line-height:24px;color:#333;margin-right:5px;float:left;}
.selectItemcont u {color:#690;text-decoration:none;}

[/css]

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址