基于Jquery模拟的select点击选择 | 黄锦诚的个人博客

黄锦诚的个人博客--有志者是锦诚!

基于Jquery模拟的select点击选择

  有时候有些HTML元素无法让我们用样式控制进行控制,但是射鸡师或是客户的需求就是需要这种效果,还要让每个浏览器都显示同样的效果,这时候就会让我们这些所谓的前端攻城师很蛋疼,客户会认为交了点钱不让你折腾些东西,以为你是没做事的。面对这些对技术一窍不通的客户,技术对于他们来说就是一坨屎,以为我们都是用意念来写代码做程序的,所以都把我们的劳动成果看作是廉价得像是简单的拉出一泡屎而已。

  虽然很喜欢什么都没有修饰的默认效果,但是又不得不面对这些客户蛋疼的效果和要求,所以不得不折腾几个来回总不满足,HTML里面,不可以样式控制的元素恐怕也为数不多,select是其中的一个,,所以今天也来折腾一下这个比较喜欢自由不爱样式约束的元素,采用模拟的方式来实现select的效果。

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

  其实这个效果早已广泛应用,也不算什么新鲜的了,大家可以随便看一下比较新一点的网站都能找到,下面分别是淘宝和拍拍上也采用模拟的select的截图。

淘宝模拟select

拍拍模拟select

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

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

  1. <span class="selectType">
  2.     <a title="" href="#" class="ipt" id="selectTypeText">全部</a>
  3.     <span id="selectTypeMenu">
  4.         <a rel="0" title="" href="#">全部</a>
  5.         <a rel="1" title="" href="#">商品</a>
  6.         <a rel="2" title="" href="#">商铺</a>
  7.     </span>
  8.     <input type="hidden" name="" class="ipt" value="" id="selectTypeRel">
  9.     <em class="searchArrow hh abs">下拉选择</em>
  10. </span>
  1. .sysSelect{width:76px; height:28px; line-height:28px; border:1px solid #CCC; font-size:14px;}
  2. .sysSelect option{height:28px; line-height:28px;}
  3. .selectType{position:relative; width:78px; height:30px; line-height:30px; font-size:14px;}
  4. .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;}
  5. .selectType span{position:absolute; width:76px; background-color:#fff; border:1px solid #CCC; border-top-style:dashed; left:0pxtop:22px; text-indent:6px; line-height:26px; display:none;}
  6. .selectType span a{color:#333; display:block; text-decoration:none;}
  7. .selectType span a:hover{background-color:#f60; color:#fff;}
  8. .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;}
  9. .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;}
  1. $("#selectTypeText").click(function () {
  2.     $(this).next("span").slideDown(200);
  3.     $(".searchArrow").addClass("searchArrowRote");
  4. });
  5. $("#selectTypeText").blur(function () {
  6.      $(this).next("span").slideUp(200);
  7.      $(".searchArrow").removeClass("searchArrowRote");
  8. });
  9. $("#selectTypeMenu>a").click(function () {
  10.     $("#selectTypeText").text($(this).text());
  11.     $("#selectTypeRel").attr("value", $(this).attr("rel"));
  12.     $(this).parent().slideUp(200);
  13.     $(".searchArrow").removeClass("searchArrowRote");
  14.     return false;
  15. });

  你是否还期待着我的长篇大论?但很遗憾的告诉你,说明已经完毕了,也就是这么简单了,几行代码一看也就明白了。

  还有不明白的?那没问题,请看DEMO,点击打开

  还不明白?还有办法,就是给我留言。高手,可以直接无视或鄙视,也欢迎拍砖,不胜感激。

  //提示:DEMO里有CSS3的动画哦,具体请自行查找,如果你够细心,会有收获和学习到CSS3动画的相关知识的。



2条评论

  1. lanxyou说道:

    chrome下无法触发a标签的blur事件,试试jquery的trigger一系列方法,能减少代码,增加复用



发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

黄锦诚 腾讯微博
黄锦诚,专注前端、分享生活、记录工作、关于一切,这里有不一样的惊喜!

分类

Wopus主机优惠码

无觅相关文章插件,快速提升流量