标签：picker 插件 image 参考文献 imagepicker 下拉框 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下拉框内容为图片的插件，效果也不错。即参考文献中第三个链接的插件。对于插件实现的效果，贴张图，感兴趣的同学可以参考下。

标签：picker,插件,image,参考文献,imagepicker,下拉框,select
来源： https://www.cnblogs.com/homehtml/p/11957725.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。