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 相关文章推荐
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
详解Angular 4.x Injector
May 04 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
Vue 使用中的小技巧
Apr 26 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
微信小程序 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
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
Python代码太长换行的实现
2019/07/05 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
银行实习自我鉴定
2013/10/12 职场文书
中学自我评价
2014/01/31 职场文书
英语教研活动总结
2014/07/02 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
具结保证书
2015/01/17 职场文书
图书馆义工感想
2015/08/07 职场文书