EasyDropDown – 很棒的下拉菜单,含精美主题

简介:   EasyDropDown 是一个 jQuery 插件,你可以毫不费力地将简陋的 Select 元素设置为可定制风格的下拉菜单,用于表单或者一般的导航。和著名的下拉插件 Chosen 很像,但是具有自己的特点,例如:简洁,语义标记,兼容表单验证,完整的键盘控制,滚动支持,在触摸设备上降级为原生UI 等等众多优点。

  EasyDropDown 是一个 jQuery 插件,你可以毫不费力地将简陋的 Select 元素设置为可定制风格的下拉菜单,用于表单或者一般的导航。和著名的下拉插件 Chosen 很像,但是具有自己的特点,例如:简洁,语义标记,兼容表单验证,完整的键盘控制,滚动支持,在触摸设备上降级为原生UI 等等众多优点。

  另外,提供了 Default、Metro、Flat 三套不同风格的主题,相信能够满足你的需要。

您可能感兴趣的相关文章

 

 

如何使用:

  在页面中引入 jquery.easydropdown.min.js 并未 <select> 标签加上 class dropdown

<select class="dropdown">
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	<option value="4">Option 4</option>
</select>

  如果你在 <select> 元素中使用了 label 标签,则需要为它们加上 class label:

<select class="dropdown">
	<option class="label">Month</option>
	<option value="1">January</option>
	<option value="2">February</option>
	<option value="3">March</option>
	...
</select>

自定义风格

  可以创建自己的样式,以符合您的设计和品牌,或者使用现成的主题之一。我们建议开始使用默认主题和定制。每个下拉功能都有以下基本标记结构:

<div class="dropdown">
	<span class="old">
		<select>...</select>
	</span>
	<span class="selected">Option 1</span>
	<span class="carat"></span>
	<div>
		<ul>
			<li>Option 1</li>
			<li>Option 2</li>
			<li>Option 3</li>
			<li>Option 4</li>
		</ul>
	</div>
</div>

  下面这些 class 会被自动添加或者移除:

  • .focus (container) 输入焦点样式
  • .open (container) 菜单打开样式
  • .scrollable (container) 滚动模式样式
  • .bottom (container) 滚动到底部样式
  • .touch (container) 原生设备样式
  • .focus (menu item) 悬浮或者键盘焦点样式
  • .active (menu item) 选中的菜单项样式

高级用法

  上面这样就可以使用了,当然你可以自己定制选项:

$(function(){
	var $selects = $('select');
						
	$selects.easyDropDown({
		cutOff: 10,
		wrapperClass: 'my-dropdown-class',
		onSelect: function(selected){
			// do something
		}
	});
});

   你也可以把配置以 JSON 数据的格式写在 data-settings 属性中:

<select class="dropdown" 
	data-settings='{"cutOff":6}'>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	..
</select>

  

插件下载      效果演示

 

本文链接:EasyDropDown – 很棒的下拉菜单,含精美主题

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

相关文章
|
设计模式 缓存 前端开发
一款清新优雅的中后台模板,内置丰富可配置的主题(强烈推荐)
Soybean Admin 是一个基于 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新优雅的中后台模版,它使用了最新的前端技术栈,内置丰富的主题配置,有着极高的代码规范,基于 mock 实现的动态权限路由,开箱即用的中后台前端解决方案,也可用于学习参考。
|
开发者
冷门但好看的 VSCode 主题推荐
笔者在使用VSCode进行开发的过程中喜欢没事就逛一逛插件商店里的颜色主题,也看过国内外许多论坛上面的颜色主题推荐,不知不觉已经下载了超过一百个的颜色主题。这篇文章总结了我用过的最舒服的一些颜色主题。
6935 0
冷门但好看的 VSCode 主题推荐
|
6月前
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
210 2
|
8月前
404错误页面简约清新源码 非常好看
404错误页面简约清新源码 非常好看,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
43 0
404错误页面简约清新源码 非常好看
HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!(一)
HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!
|
10月前
首途第三十三套清新简约卡片风格蓝紫渐变色短视频模板 | 苹果CMSV10主题
首途第三十三套清新简约卡片风格蓝紫渐变色短视频模板 | 苹果CMSV10主题 我们的简约风格,以纯洁的白色和深邃的紫色为主色调,为您提供了一种清新、时尚的浏览体验。在这个简洁而美丽的界面中,您可以轻松畅享各种精彩短视频。我们专注于简单的设计,使用户能够轻松找到他们喜欢的内容,而不受繁杂的界面干扰。紫色的调性为网页增添了一抹神秘和优雅,让您在欣赏视频的同时感受到一份宁静和舒适。清晰的布局和直观的操作,让您可以更专注于视频内容,而不被复杂的功能所困扰
92 1
|
10月前
|
PHP
一款小众清新的Typecho主题
DearLicy主题,一款小众化小清新风格的博客主题 主题支持Typecho所支持的所有版本PHP 简约、小众、优雅
71 0
一款小众清新的Typecho主题
HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!(二)
HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!
|
11月前
|
前端开发
前端知识笔记(二十)———简易弹窗制作
前端知识笔记(二十)———简易弹窗制作
110 0
|
前端开发 CDN
ant-design实现主题暗黑主题 和 亮色主题的 切换(实现网站黑白皮肤)
最近在使用vite+react + ant-design 来搭建个人站点,看到网上好多网站都实现了黑白皮肤的切换,并且ant-design帮我们实现了三套主题色,一个默认亮白色,暗黑主题和紧凑主题。于是我也想来弄一弄。最后还是实现了,打包后也是ok的。