佛山公司网站建设:用EasyDropDown.js 创建<选择>下拉框

2019.09.06 佛山公司网站建设

183

<选择> 是一个HTML元素呢 用于使用下拉选择项 列表。 它是有用的,当你有一个很长的名单等项目选择的日期。 不幸的是,对于那些想要创建一个web页面,默认值 <选择> 在web浏览器并不是非常友好和看起来不伟大的风评。

CSS样式的元素,应该够了。 但是,这并不是足够的可访问性。 介绍 EasyDropDown.js ,免费的jQuery插件来掩盖这些缺陷。

EasyDropDown.js 可以很容易地老式的风格吗 选择 元素在您的web页面的功能。 后 <选择> 元素应用了这个插件,它将获得全键盘控制文本搜索。 该工具还提供了一个inner-scroll项目长时间限制下拉框列表的大小。 形式和验证也可以帮助与兼容。

安装

安装EasyDropDown,首先包括jQuery库到您的web页面。 一定要包括javascript(得到它 在这里 像这样:

和它的CSS文件内 头 标签:

1
2
3.
4
5
<头>
. .
  <链接 rel=“样式表” 类型=“文本/ css” href=“主题/ easydropdown.css”/>
. .
头> 

如果你使用另一个主题,请确保web文件夹内的文件副本。 别担心,你不需要包含在HTML打电话给他们。

样式选择

当使用EasyDropDown。 js,您可以构建一个可定制的下拉菜单和一个干净、语义标记。 的 选择元素可以在HTML的样式。 你可以 禁用元素,定义一个选定的选项或者很容易添加一个标签 。

风格,你必须首先包括 下拉 类标签。 可以通过添加一个标签 标签 类内部的选择。 这是基本的标记:

1
2
3.
4
5
6
7
8
<选择 类=“下拉”>
  <选项 价值=”“ 类=“标签”> < /设置选项>
  <选项 价值=“1”1 < / >选项选项>
  <选项 价值=“2”2 < / >选项选项>
  <选项 价值=“3”3 < / >选项选项>
  <选项 价值=“4”4 < / >选项选项>
  <选项 价值="5"5 < / >选项选项>
选择>

就是这样,你不需要任何定制javascript添加。现在糟糕的,过时的 <选择> 变成了一个美丽、奇特的下拉输入。

如果你想添加一个预先确定的选择只是给你拉 选择 属性。 我们建议不使用标签与此设置完全 选中的值将覆盖标签 。

1
2
3.
4
5
<选择 类=“下拉”>
  …
  <选项 价值=“2” 选择2 < / >选项选项>
  …
选择>

你也可以禁用下拉使用 禁用 属性如下:

1
2
3.
<选择 类=“下拉” 禁用>
选择>

可以使用主题

EasyDropDown。 js附带两个现成的主题: 地铁和公寓 。 使用主题,您可以利用HTML5 数据属性 。

在 <选择> 标签,叫 data-settings = ' {“wrapperClass”:“主题名称”}’ 申请另一个主题。 随时改变 主题名称 可用的主题名称: 地铁 或 平 。 下面是例子:

1
2
3.
<选择 类=“下拉” data-settings=”{“wrapperClass”:“麦德龙”}’>
选择>

佛山公司网站建设旁边 wrapperClass ,你可能有更多的设置添加、查看 文档页面 的细节。 如果你很酷的javascript代码,你可以看到那里的教程。


最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP