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窗口功能指南之在窗口中书写内容
Jul 21 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
详解如何使用Node.js实现热重载页面
May 06 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
php实现检查文章是否被百度收录
2015/01/27 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
Python hmac模块使用实例解析
2019/12/24 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
中班下学期个人总结
2015/02/12 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
学校隐患排查制度
2015/08/05 职场文书
清明节随笔
2015/08/15 职场文书
化工生产实习心得体会
2016/01/22 职场文书