jQuery模拟实现的select点击选择效果【附demo源码下载】


Posted in Javascript onNovember 09, 2016

本文实例讲述了jQuery模拟实现的select点击选择效果。分享给大家供大家参考,具体如下:

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

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

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

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

淘宝模拟select:

jQuery模拟实现的select点击选择效果【附demo源码下载】

拍拍模拟select:

jQuery模拟实现的select点击选择效果【附demo源码下载】

本例实现效果:

jQuery模拟实现的select点击选择效果【附demo源码下载】

实现的思路很简单,只有两步:

1、当鼠标进行移入和点击的目标元素的时候,触发弹出一个层,层内装着模拟的不同的元素的值

2、点击选择层内的元素的时候,需要将点击元素文本元素赋到目标元素中,并将元素内的一些参数值传到一个隐藏的域中进行传值

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

html:

<span class="selectType">
  <a title="" href="#" class="ipt" id="selectTypeText">全部</a>
  <span id="selectTypeMenu">
    <a rel="0" title="" href="#">全部</a>
    <a rel="1" title="" href="#">商品</a>
    <a rel="2" title="" href="#">商铺</a>
  </span>
  <input type="hidden" name="" class="ipt" value="" id="selectTypeRel">
  <em class="searchArrow hh abs">下拉选择</em>
</span>

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;}

js:

$("#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;
});

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

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

完整demo源码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 Javascript
Node.js fs模块原理及常见用途
Oct 22 Javascript
关于JavaScript回调函数的深入理解
Jun 27 Javascript
微信小程序 loading 详解及实例代码
Nov 09 #Javascript
微信小程序 toast 详解及实例代码
Nov 09 #Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 #Javascript
微信小程序  modal详解及实例代码
Nov 09 #Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 #Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 #Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 #Javascript
You might like
是否存在第一台收音机的说法
2021/03/01 无线电
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
vue-cli3 热更新配置操作
2020/09/18 Javascript
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
如何在python中写hive脚本
2019/11/08 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
中秋寄语大全
2014/04/11 职场文书
行政求职信
2014/07/04 职场文书
购房个人委托书范本
2014/10/11 职场文书
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL