一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

Jquery模拟的select点击选择实现代码

时间:2012-08-18 编辑:简简单单 来源:一聚教程网

采用模拟的好处可以任意的进行样式控制,做出各种各样的效果,在各个浏览器中的表现都一致,实现客户蛋疼的要求,但缺点也是同样的存在的,网络非常慢或客户端禁止运行脚本的时候//(尽管脚本禁止运行的机率很低,一般只会有服务器版本的浏览器上才会出现),脚本加载不到有可能会影响到其失效,无法进行操作,

实现的思路很简单,只有两步:
1、当鼠标进行移入和点击的目标元素的时候,触发弹出一个层,层内装着模拟的不同的元素的值
2、点击选择层内的元素的时候,需要将点击元素文本元素赋到目标元素中,并将元素内的一些参数值传到一个隐藏的域中进行传值

于是就有了以下的HTML、CSS和操作JS:

html代码

 代码如下 复制代码


  

DEMO效果


  

   

    系统默认的select:
    
   

   

    进行模拟的select:
    
     全部
     
      全部
      商品
      商铺
     

     
     下拉选择
    

   

  

 

css代码

 代码如下 复制代码

.sysSelect{width:76px; height:28px; line-height:28px; border:1px solid #CCC; font-size:14px;}
.sysSelect option{height:28px; line-height:28px;}
.selectType{position:relative; width:78px; height:30px; line-height:30px; font-size:14px;}
.selectType .ipt{width:76px; height:28px; line-height:28px; border:1px solid #CCC; display:inline-block; text-decoration:none; color:#000; text-indent:5px; outline:none;}
.selectType span{position:absolute; width:76px; background-color:#fff; border:1px solid #CCC; border-top-style:dashed; left:0px;  top:22px; text-indent:6px; line-height:26px; display:none;}
.selectType span a{color:#333; display:block; text-decoration:none;}
.selectType span a:hover{background-color:#f60; color:#fff;}
.selectType .searchArrow{border-top:6px solid #666; border-left:6px solid #FFF; border-right:6px solid #FFF; position:absolute; width:0; height:0; top:6px; right:12px; cursor:pointer; -webkit-transition:-webkit-transform 0.2s ease-in; -moz-transition:-moz-transform 0.2s ease-in; -o-transition:-o-transform 0.2s ease-in; transition:transform 0.2s ease-in; overflow:hidden; text-indent:-2000px;}
.selectType .searchArrowRote{-moz-transform:rotate(180deg); -moz-transform-origin:50% 30%; -webkit-transform:rotate(180deg); -webkit-transform-origin:50% 30%; -o-transform:rotate(180deg); -o-transform-origin:50% 30%; transform:rotate(180deg);transform-origin:50% 30%; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); top:-9px/9;}

jquery代码

 代码如下 复制代码


$("#selectTypeText").click(function () {
    $(this).next("span").slideDown(200);
    $(".searchArrow").addClass("searchArrowRote");
});
$("#selectTypeText").blur(function () {
     $(this).next("span").slideUp(200);
     $(".searchArrow").removeClass("searchArrowRote");
});
$("#selectTypeMenu>a").click(function () {
    $("#selectTypeText").text($(this).text());
    $("#selectTypeRel").attr("value", $(this).attr("rel"));
    $(this).parent().slideUp(200);
    $(".searchArrow").removeClass("searchArrowRote");
    return false;
});

热门栏目