您的位置:澳门新葡亰平台官网下载 > 联系我们 > EasyDropDown – 平台游戏app:很棒的下拉菜单,含卓越宗旨

EasyDropDown – 平台游戏app:很棒的下拉菜单,含卓越宗旨

2019-11-27 20:23

  EasyDropDown 是一个 jQuery 插件,你能够毫不费事地将简陋的 Select 成分设置为可定制风格的下拉菜单,用于表单可能平时的导航。和资深的下拉插件 Chosen 很像,不过具备友好的本性,比如:简洁,语义标志,包容表单验证,完整的键盘调节,滚动扶持,在触摸设备上降级为原生UI 等等众多优点。

做过前端开垦的同伴们应该对Bootstrap不会不熟悉,它是由推特(Twitter)推出的开源CSS框架,此中累积了众多Web前端开辟的工具包和利用组件。当然,和jQuery同样,Bootstrap同期也是二个开放式的CSS框架,基于Bootstrap,大家也足以做过多不利的CSS UI组件。本文就介绍了8个有力的依附Bootstrap的CSS框架,一同来探视。

  别的,提供了 Default、Metro、Flat 三套不相同风格的宗旨,相信可以满意你的供给。

1、Bootstrap Metro Dashboard – 基于Bootstrap的后台管理面板

那是生龙活虎款基于Bootstrap的Metro风格的后台管理面板应用,Bootstrap Metro Dashboard的UI是基于推特(Twitter) Bootstrap样式的,同期采用了jQuery 1.9.1和jQuery UI组件,特别符合做网址的后台管理系列分界面。

平台游戏app 1

在线演示

您大概感兴趣的有关小说

2、StyleBootstrap – 基于 Bootstrap 的 UI 扩展

StyleBootstrap是风姿洒脱款基于Bootstrap的开源UI框架,方今依赖Bootstrap风格的恢宏插件超多,比方Bootswatch、BootMetro等,那一个之前我们都有做过介绍。StyleBootstrap应该正是对Bootstrap样式风格的风流罗曼蒂克种扩张,除了有个别主导的按键、表单、菜单之外,StyleBootstrap还设计了功效周全的颜料拾取器,非常不利。

平台游戏app 2

在线演示

  • 10大流行 Metro UI 风格的 Bootstrap 主旨和模板
  • UIkit – 轻量前端框架,扶助你快捷营造 Web 分界面
  • jQuery Wheel Menu:美丽的 Path 风格旋转菜单
  • SlimerJS – Web开垦人士可编制 JS 调整的浏览器
  • Chance – 成效强盛的 JavaScript 随机数生成类库

3、BootFlat – 基于HTML5的CSS框架组件

BootFlat 是风流倜傥款基于 Bootstrap 的 Flat UI 组件,跟原生的Bootstrap框架比较,BootFlat提供了越多的页面组件,同期扩展了页面布局功效。与Flat UI相比较更为优越的是BootFlat能够支持你更飞快的使用HTML5兑现Web App开荒。

平台游戏app 3

在线演示

 

4、jQuery Mobile Bootstrap Theme – jQuery移动端主旨框架

jQuery Mobile Bootstrap Theme是后生可畏款基于jQuery和Bootstrap的运动端宗旨框架,有着特别精粹的UI分界面和精短的操作控件。在此以前介绍过的 jQuery UI Bootstrap 首借使PC端的核心框架,跟jQuery UI Bootstrap比较,jQuery Mobile Bootstrap Theme的体量更加小,控件更合乎运动端的操作习于旧贯。

平台游戏app 4

在线演示

  如果你在 <select> 成分中接纳了 label 标签,则必要为它们拉长class label:

5、jQuery UI Bootstrap – 在jQuery UI上集成Bootstrap

jQuery UI Bootstrap是八个将jQuery UI集成到Bootstrap上的CSS框架,jQuery UI Bootstrap不仅能够行使jQuery UI强盛的控件库,同期还足以分享Bootstrap那种清新自然的核心风格,所以进一层多的前端开采者都在选择jQuery UI Bootstrap。

平台游戏app 5

在线演示

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

6、Bootswatch – 免费的 Bootstrap 主题包

Bootswatch 是意气风发款基于 Bootstrap 的无偿主旨包,个中包含了丰盛的 Bootstrap 主旨,你能够下载安装这几个宗旨的 CSS 文件,达成各种各样美好的 Bootstrap 宗旨风格。

平台游戏app 6

在线演示

自定义风格

  可以创制和睦的体裁,以适合您的策画和品牌,大概使用现有的主旨之大器晚成。我们建议起头利用默许大旨和定制。种种下拉效果皆有以下为主标识构造:

<div class="dropdown">

  <select>...</select>

 Option 1

 <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) 入选的菜单项样式

7、BootMetro – 基于 Bootstrap 的 Metro 风格 CSS 框架

和Flat UI相通,BootMetro雷同也是风流倜傥款基于Bootstrap的CSS框架,BootMetro的最大特征在于它是生机勃勃款Win 8 Metro风格的CSS框架。Metro风格的优势在于分界面轻便平滑,UI成分轻松,加载速度快,并且有不易的视觉效果。

平台游戏app 7

在线演示

高档用法

  上面那样就足以使用了,当然你能够和煦定制选项:

$(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>

  

 

您恐怕感兴趣的连锁小说

  • Manifesto – HTML5 离线应用程序缓存校验工具
  • Popline:很非常的改造 HTML5 文本编辑器工具栏
  • Bootstrap 3.0 正式发布,更加好地匡助活动端支出
  • jQuery Flat Shadow – 轻巧完毕美好的长阴影效果
  • Superhero:构建大型 JavaScript 应用程序的能源

 

正文链接:EasyDropDown – 很棒的下拉菜单,含优良核心

编写翻译来源:梦想天空 ◆ 关切前端开荒技巧 ◆ 分享网页设计财富

jQuery 插件,你可以毫不费事地将简陋的 Select 成分设置为可定制风格的下拉菜单,用于表单 大概日常的导航。 和有名的下...

8、Flat UI – 基于 Bootstrap 的扁平化 UI 开荒包

Flat UI是生龙活虎款基于Bootstrap的扁平化前端UI工具包,Flat UI的机件外观设计特别干净和可观,Flat UI的构件饱含开关,输入框,组合开关,复选框,单选开关,标签,菜单,进程条和滑块等良好的要素。

平台游戏app 8

在线演示

正文固定链接: 

本文由澳门新葡亰平台官网下载发布于联系我们,转载请注明出处:EasyDropDown – 平台游戏app:很棒的下拉菜单,含卓越宗旨

关键词:

  • 上一篇:没有了
  • 下一篇:UIButton