用jQuery制作模拟下拉框
时间:2010-03-08 14:28来源: 作者: 点击:
次
很多群员问了关于下拉框美化的问题，现打一个下拉框美化的制作过程，其实是模拟出来的下拉框.
|
很多群员问了关于下拉框美化的问题，现打一个下拉框美化的制作过程，其实是模拟出来的下拉框。
第一步：先搭建好结构
这是普通的下拉框代码：
XML/HTML代码
- <select name="abc" id="abc">
- <option value="1">选项一</option>
- <option value="2">选项二</option>
- <option value="3">选项三</option>
- <option value="4">选项四</option>
- <option value="5">选项五</option>
- <option value="6">选项六</option>
- </select>
这个是模拟出来的：
XML/HTML代码
- <div class="CRselectBox">
- <input type="hidden" value="" name="abc" id="abc"/>
- <input type="hidden" value="" name="abc_CRtext" id="abc_CRtext"/>
- <a class="CRselectValue" href="#">选项一</a>
- <ul class="CRselectBoxOptions">
- <li class="CRselectBoxItem"><a href="#" class="selected" rel="1">选项一</a></li>
- <li class="CRselectBoxItem"><a href="#" rel="2">选项二</a></li>
- <li class="CRselectBoxItem"><a href="#" rel="3">选项三</a></li>
- <li class="CRselectBoxItem"><a href="#" rel="4">选项四</a></li>
- <li class="CRselectBoxItem"><a href="#" rel="5">选项五</a></li>
- <li class="CRselectBoxItem"><a href="#" rel="6">选项六</a></li>
- </ul>
- </div>
查看演示
第二步：构建效果
主要就是Jquery代码：
JavaScript代码
- $(function(){
- $(".CRselectBox").hover(function(){
- $(this).addClass("CRselectBoxHover");
- },function(){
- $(this).removeClass("CRselectBoxHover");
- });
- $(".CRselectValue").click(function(){
- $(this).blur();
- $(".CRselectBoxOptions").show();
- return false;
- });
- $(".CRselectBoxItem a").click(function(){
- $(this).blur();
- var value = $(this).attr("rel");
- var txt = $(this).text();
- $("#abc").val(value);
- $("#abc_CRtext").val(txt);
- $(".CRselectValue").text(txt);
- $(".CRselectBoxItem a").removeClass("selected");
- $(this).addClass("selected");
- $(".CRselectBoxOptions").hide();
- return false;
- });
-
- $(document).click(function(event){
- if( $(event.target).attr("class") != "CRselectBox" ){
- $(".CRselectBoxOptions").hide();
- }
- });
-
-
- $("#test").click(function(){
- var value = $("#abc").val();
- var txt = $("#abc_CRtext").val();
- alert( "你本次选择的值和文本分别是：" + value +" , "+txt );
- });
- })
查看演示
其实到这里已经算是完成了。为了方便利用，就做成插件吧。
查看完整版本演示 下载例子
(责任编辑：admin) |
织梦二维码生成器
------分隔线----------------------------
