select标签的下拉框为图片的插件
1 参考文献:
[1] https://github.com/rvera/imag...
[2] https://rvera.github.io/image...
[3] http://websemantics.github.io...
2 插件1:image-picker
这个是参考文献中第一个、第二个链接的插件,本文重点说明这个插件。插件的效果先贴张图。
2.1 image-picker的安装与使用
具体的用法可以在参考文献2中找到,那个链接需要fq才能打开。
第一步,导入js与css文件。
<link rel="stylesheet" type="text/css" href="<%=path%>/jquery/image-picker/image-picker.css">
<script type="text/javascript" src="<%=path%>/jquery/image-picker/image-picker.js"></script>
第二步,仅需要在你想预览图片的option标签中加入data-img-src
属性。
<select id="pic" name="pic" class="image-picker show-labels">
<option data-img-src='http://www.example.com/image.jpg' value='42'></select>
第三步,在js中初始化:对目标元素(即对应的select元素)调用imagepicker()方法即可。
<script type="text/javascript">
$("select").imagepicker();
</script>
经过上述三步,即可使用该插件。
2.2 imagepicker其它补充
在imagepicker()
中可以传入一个对象,实现图片的名称显示、原始的select下拉列表不显示、下拉选项仅显示图片的效果,具体的说明可以参考参考文献中第二个链接。
<script type="text/javascript">
$("select").imagepicker({
hide_select: false, //原始的select下拉列表不显示、下拉选项仅显示图片的效果
show_label: true //在图片下显示的图片名称
});
</script>
3 插件2:Image-Select
这个是另一个可以实现select下拉框内容为图片的插件,效果也不错。即参考文献中第三个链接的插件。对于插件实现的效果,贴张图,感兴趣的同学可以参考下。
select标签的下拉框为图片的插件的更多相关文章
- selenium处理select标签的下拉框
有时候我们会碰到<select></select>标签的下拉框.直接点击下拉框中的选项不一定可行.Selenium专门提供了Select类来处理下拉框. <select ...
- 前端 HTML form表单标签 select标签 option 下拉框
<select></select> select里面通常跟option配合使用 <!DOCTYPE html> <html lang="en&quo ...
- jquery美化select,自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
- EazyUI_Datagrid_行内编辑(editor)的combobox下拉框带图片
1.业务需求: 商品的明细列表里面下拉框需要 [图片+文字 ] 显示 2.我们使用的是EazyUI,而我比较懒,不习惯用拼接html来显示列表页面,使用的是eazyui的数据网格(datagrid) ...
- Selenium:利用select模块处理下拉框
在利用selenium进行UI自动化测试过程中,经常会遇到下拉框选项,这篇博客,就介绍下如何利用selenium的Select模块来对标准select下拉框进行操作... 首先导入Select模块: ...
- Selenium: 利用select模块操作下拉框
在利用selenium进行UI自动化测试过程中,经常会遇到下拉框选项,这篇博客,就介绍下如何利用selenium的Select模块来对标准select下拉框进行操作... 首先导入Select模块: ...
- js下拉框选择图片
二种方式:下拉框里面选项有图片与没有图片 1.用下拉框写 下拉框的option没法添加图片如果下拉框里面不需要图片可以用这种方式. <!DOCTYPE html> <html> ...
- jquery Combo Select 下拉框可选可输入插件
Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...
- element-ui select可搜索下拉框无法在IOS或Ipad调起小键盘输入法
参考:https://segmentfault.com/q/1010000021748033 原因:常规select是可以调起小键盘的.但是element-ui的select其实是input.并且这个 ...
随机推荐
- Apache 强制SSL访问
RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R ...
- Dp test solution
Dp test solution 按照难易程度排序题解: Problem B Problem Description Tarzan 现在想要知道,区间 [L,R] 内有多少数是优美的.我们定义一个数是 ...
- P1056排坐椅
这是2008普及组真题,是一个提高—的模拟. 仔细读完题便有了思路:累放在i行能隔开wi个,比较排序wi,输出即可.所以在这里遇到了结构体排序的问题与手写cmp的问题.对于两个语法知识掌握得都不好,所 ...
- PyCharm控制台python shell 和 IPython shell的切换
1. IPython介绍 IPython 是一个 python 的交互式 shell,比默认的python shell 好用得多,支持变量自动补全,自动缩进,支持 bash shell 命令,内置了许 ...
- 一条简单的 SQL 查询语句到底经历了什么?
一.MySQL 基础架构 整体来说 MySQL 主要分为两个部分,一个部分是:Server 层,另一部分是:存储引擎层. 其中 Server 层包括有连接器.查询缓存.分析器.优化器.执行器等,存 ...
- 【源码解读】cycleGAN(一):网络
源码地址:https://github.com/aitorzip/PyTorch-CycleGAN 如图所示,cycleGAN的网络结构包括两个生成器G(X->Y)和F(Y->X),两个判 ...
- 【COSMOS】跨链协议IBC概述
一.什么是IBC? IBC是链间通信协议的缩写(Inter-Blockchain Communication Protocol).通过数据包交换在多个不同的区块链网络之间转移数据和状态信息.最初的用途 ...
- 01.AutoMapper 之约定(Conventions)
转载(https://www.jianshu.com/p/d4c472d95da4) 约定(Conventions) 条件对象映射器 条件对象映射器根据源类型和目标类型之间的条件生成新类型映射. ...
- 解决stanfordnlp一直运行不报错也没有结果
最近学习stanfordnlp,当运行程序时,发现程序一直没有反应,上网查询说是内存不够,但是本地电脑是8g内存.后来重新下载了所需文件,问题解决.
- IsDate(expression)函数
IsDate 函数 返回 Boolean 值指明某表达式是否可以转换为日期. IsDate(expression) expression 参数可以是任意可被识别为日期和时间的日期表达式或字符串表达式. ...