jQuery自定义漂亮的下拉框插件8种效果

jquery美化选择器实例有：边框、下划线、 伸缩 、滑动、 覆盖、 旋转、 弹出层选择 、环形效果。

在线预览

 <body class="demo-1">

         <div class="container">

             <header class="codrops-header">

                 <h1> 自定义选择元素</h1>

                 <nav class="codrops-demos">

                     <a class="current-demo" href="index.html">边框</a>

                     <a href="index2.html">下划线</a>

                     <a href="index3.html">伸缩</a>

                     <a href="index4.html">滑动</a>

                     <a href="index5.html">覆盖</a>

                     <a href="index6.html">旋转</a>

                     <a href="index7.html">弹出层选择</a>

                     <a href="index8.html">环形效果</a>

                 </nav>

             </header>

             <section>

                 <select class="cs-select cs-skin-border">

                     <option value="" disabled selected> 联系人方式</option>

                     <option value="email">E-Mail</option>

                     <option value="twitter">Twitter</option>

                     <option value="linkedin">LinkedIn</option>

                 </select>

             </section>

         </div><!-- /container -->

         <script src="js/classie.js"></script>

         <script src="js/selectFx.js"></script>

         <script>

             (function() {

                 [].slice.call(document.querySelectorAll('select.cs-select')).forEach(function(el) {

                     new SelectFx(el);

                 });

             })();

         </script>

     </body>

我是雷锋，拿走不谢！^_^

jQuery下拉框插件8种效果的更多相关文章

  1. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

  2. jQuery自定义漂亮的下拉框插件8种效果

    jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 实例代码 <body class="demo-1"> ...

  3. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  4. 自制Jquery下拉框插件

    (function ($) { $.fn.select3 = function (option) { $(this).each(function () { var _this = $(this); v ...

  5. jquery 下拉框插件,实现智能补全,模糊搜索,多选

    近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃, 无奈之下只好自己改了, 话不多说上效果图: 模糊搜索 ...

  6. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

  7. query多选下拉框插件 jquery-multiselect(修改)

    其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...

  8. 基于Bootstrap的下拉框插件bootstrap-select

    写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...

  9. jQuery Wheel 环形菜单插件5种效果演示

    很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...

随机推荐

  1. C++ Primer : 第十三章 : 拷贝控制之对象移动

    右值引用 所谓的右值引用就是必须将引用绑定到右值的引用,我们通过&&来绑定到右值而不是&, 右值引用只能绑定到即将销毁的对象.右值引用也是引用,因此右值引用也只不过是对象的别名 ...

  2. WPF 中保存 window(窗口)或者canvas成图片

    最近需要用到这个功能,搜了一下不少代码有问题 ,找到一个效果比较好的,支持多级子元素 记一下. private void button_save_window_Click(object sender, ...

  3. JS特殊函数(Function()构造函数、函数直接量)区别介绍

    函数定义 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 函数的构造语法有这三种: 1.function functionName(arg0, ...

  4. Nginx-限制汇总

    http块 limit_conn_zone $binary_remote_addr zone=connperip:10m; limit_conn_zone $server_name zone=conn ...

  5. Python-select详解（select、epoll）

    select函数操作集合的时候有个要求,要么集合本身是描述符,要么他提供一个fileno()接口,返回一个描述符. I/O多路复用是在单线程模式下实现多线程的效果,实现一个多I/O并发的效果.看一个简 ...

  6. 解决Maven项目编译时提示：源值1.5已过时，将在未来所有版本中删除

    每次编译项目时,都提示:源值1.5已过时,将在未来所有版本中删除 查了一些资料,发现是因为IDEA默认把项目的源代码版本设置为jdk1.5,目标代码设置为jdk1.5 解决方案:  修改Maven的S ...

  7. Node调试之道-----JSHint

    Node调试之道-----JSHint Node的优势我就不再乱吹捧了,它让javascript统一web的前后台成为了可能.但是对于新手来说,server端的JS代码可能不像client端的代码那么 ...

  8. 单节点nginx为两台apache服务器提供负载均衡

    需求:本实验为单节点nginx为两台apache服务器提供负载均衡,所有配置为最简单 1.初始化3台测试server,该关的关了 [root@host101 ~]# vim /etc/hosts 19 ...

  9. 给app增加itunes文件共享支持的功能

    从网上查找的一些说法来看,是给app的plist配置文件中增加UIFileSharingEnabled,我后面查苹果官网的plist键值说明文档,也是这样说. 但实际上直接通过XCode打开plist ...

  10. python中获取当前所有的logger

    获得当前所有logger的列表的程序如下: import logging for name in logging.Logger.manager.loggerDict.keys(): logger = ...