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

时间:2021-11-03 18:00:23

原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示

jQuery自定义漂亮的下拉框插件8种效果演示
在线预览

下载地址

实例代码

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery自定义下拉框插件 | 演示 1</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
<link rel="stylesheet" type="text/css" href="css/cs-skin-border.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<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>
</html>

  

jQuery自定义漂亮的下拉框插件8种效果演示的更多相关文章

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

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

  2. jQuery下拉框插件8种效果

    jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...

  3. Dropdown&period;js基于jQuery开发的轻量级下拉框插件

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

  4. jQuery自定义多选下拉框

    项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式 代码如 ...

  5. jQuery UI 多选下拉框插件:jquery-ui-multiselect

    前一个项目,由于项目需求,需要大量使用到下拉多选框,而由于本人又不会写有关 CSS 样式,所以,便上网找到了这个 jQuery 插件:jquery-ui-multiselect .该款插件提供了基本下 ...

  6. pentaho cde 自定义复选下拉框 checkbox select

    pentaho  自带的component 虽多,但是当用户需要在一个表格中查看多个组别的数据时,pentaho自带的单选框就不能实现了,所以复选下拉框势在必行,实现效果如下: 实现原理是借用了jqu ...

  7. query多选下拉框插件 jquery-multiselect&lpar;修改&rpar;

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

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

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

  9. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

随机推荐

  1. Protocols

  2. Spring对Quartz的封装实现简单需注意事项

    前段时间在项目中一直使用正常的Quartz突然出现了任务漏跑的情况,由于我以前看过Quartz的内部实现,凭借记忆我觉得是由于Quartz的线程池的使用出现问题导致了故障的发生.为了搞清问题的真相,我 ...

  3. Java—Applet

    1  Applet的定义 Applet是Java语言编写的,无法独立运行,但可以嵌入到网页中执行.它扩展了传统的编程结构和方法,可以通过互联网发布到任何具有Java编译环境浏览器的个体计算机上. 如下 ...

  4. &lbrack;LeetCode&rsqb;题解(python):094 Binary Tree Inorder Traversal

    题目来源 https://leetcode.com/problems/binary-tree-inorder-traversal/ iven a binary tree, return the ino ...

  5. Sharding &amp&semi; IDs at Instagram(转)

    英文原文:http://instagram-engineering.tumblr.com/post/10853187575/sharding-ids-at-instagram 译文:http://ww ...

  6. 了解Java并学会创建Java项目(一个菜鸟的成长历程)

    计算机语言分类:了解 1)低级语言:更接近于计算机的语言 1.1)机器语言:由0和1组成的 1.2)汇编语言:有一些助记符号2)高级语言:更接近于人的语言 2.1)面向过程的:C... 2.2)面向对 ...

  7. STS中web&period;xml配置文件

    <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" &quot ...

  8. CommandLineRunner和ApplicationRunner的区别

    CommandLineRunner和ApplicationRunner的区别 二者的功能和官方文档一模一样,都是在Spring容器初始化完毕之后执行起run方法 不同点在于,前者的run方法参数是St ...

  9. django中文学习资料

    Django 2.0 中文官方文档地址: https://docs.djangoproject.com/zh-hans/2.0/ <Django Girls>中文版地址: https:// ...

  10. 【php增删改查实例】第十一节 - 部门管理模块(编辑功能)

    9. 编辑部门功能的实现 思路:只允许用户勾选一条数据,点击编辑按钮,会跳出一个和新增数据类似的对话框.然后,用户可以修改部门名称和部门编码.点击保存按钮,提示修改成功. 9.1 前台代码编写 &lt ...