bootstrap-multiselect.js插件、chosen插件、clipboard复制插件、layer.photos、lightbox插件相册预览插件学习

bootstrap-multiselect项目

引入的js，css

<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>//注意 jq和popper.js一定要在bootstrap.js前面，bootstrap-multiselect.js放在最后面，因为它依赖于前面的js

不引入 popper.js的报错且应当只调入umd文件夹中的popper.js文件

代码：

<select multiple="multiple" style="width:100%; "><option>一室一厅</option><option>两室一厅</option><option>三室一厅</option>
</select>//js脚本
$("select").multiselect({buttonWidth:195,  //选择框的大小includeSelectAllOption: true,//有无全选按钮
});

效果截图：

属性配置

multiple	支持多选
enableClickableOptGroups	进行分类别或者说分组
enableCollapsibleOptGroups	分组折叠使用
maxHeight	下拉列表的最大高度，超过出现滚动条
nonSelectedText	没有进行选择的提示语
numberDisplayed	下拉列表中的内容个数，默认为3
enableFiltering	拉列表上设置一个搜索框
includeSelectAllOption	设置全选
selectAllName	设置全选项名字，默认为select-all

chosen插件

官方文档

引入的js，css

<link href="https://cdn.bootcss.com/chosen/1.8.8.rc6/chosen.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/chosen/1.8.8.rc6/chosen.jquery.min.js"></script>

代码

<p>chosen下拉选择</p>
<div><select class="chosen-select" multiple data-placeholder="Choose a Country..."><option>United States</option><option>United Kingdom</option><option>Afghanistan</option></select>
</div>

脚本

$(".chosen-select").chosen();

属性

data-placeholder、multiple、selected, disabled

事件

change

效果

clipboard复制插件

引入的js

<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>

代码

<input id="foo" readonly value="https://github.com/zenorocha/clipboard.js.git"><!-- Trigger -->
<button class="copyBtn" data-clipboard-action="copy" data-clipboard-target="#foo">copy文本框的内容
</button>//data-clipboard-action  copy cut（剪切属性只支持 input 和 textarea）
//data-clipboard-target 指定被复制内容
//data-clipboard-text  指定需要复制的内容//事件
clipboard.on('success', function(e) {console.info('Action:', e.action);console.info('Text:', e.text);console.info('Trigger:', e.trigger);e.clearSelection();
});clipboard.on('error', function(e) {console.error('Action:', e.action);console.error('Trigger:', e.trigger);
});

脚本

new ClipboardJS('.copyBtn');   //className
//新版本构造函数是 ClipboardJS 而不是旧版本的 Clipboard，如果使用 var clipboard = new Clipboard(btn); 会提示 Uncaught TypeError: Illegal constructor 错误

高级用法

//可以设置回调方法供 Clipboard 使用：
new ClipboardJS('.btn', {target: function(trigger) {return trigger.nextElementSibling;}
});//清理 Clipboard 对象：
clipboard.destroy();

更多用法参考

layer.photos插件

引入的js

<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>

代码

<img src="./1.png" alt="" class="lazy" data-original="./2.jpg">//脚本
$("img").click(function(e){layer.photos({photos: { "data": [{"src": e.target.src},{"src": "./1.png"}] }})
})

lightbox插件

引入的js，css

<link href="https://cdn.bootcss.com/lightbox2/2.11.1/css/lightbox.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/lightbox2/2.11.1/js/lightbox.min.js"></script>

代码

<p>lightbox图片预览</p>
<a href="./1.png" data-lightbox="example-set" title="文字说明信息"><img class="example-image" src="./1.png" width="150" height="150" />
</a>

bootstrap-multiselect.js插件、chosen插件、clipboard复制插件、layer.photos、lightbox插件相册预览插件学习相关推荐

移动端图片预览插件-fly-zomm-img.min.js
移动端图片预览插件,一个JQ的插件,支持手势放大缩小:有点小bug,不过感觉是可以接受的: 插件的地址:http://www.jq22.com/jquery-info15466 那里有具体的说明,但是 ...
PDF在线预览插件touchPDF.js：手机端预览
接上一篇web端预览,博主找了一篇关于手机端的预览插件,丑是丑了点,但是能用,下面就来介绍一下吧! PDF在线预览插件:手机端预览 1.编辑界面的HTML代码 2.第二步就没了 3.既然这样那我们直接 ...
html页面点击图片名称查看图片------图片预览插件viewer.js使用
前言在做项目时,会遇到在前台展示附件详情,比如图片,word,pdf等.viewer.js 图片查看器,用来查看页面中的图片. 基本效果: Viewer.js的使用这是一个github工程,功能很 ...
Bootstrap商品弹出快速预览插件
下载地址使用Bootstrap+jQuery实现的商品快速预览功能,点击快速预览图标,商品详情的弹出层出现,展现商品的详细信息以及购买按钮.这个插件可以帮助用户更加便捷的购买商品.基于Bootstra ...
dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件（巨详细）
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
html做在线预览pdf文件,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
VSCode图片预览插件 Image preview
VSCode前端开发图片预览插件 Image preview(支持css预览支持svg格式) 一款提高前端开发效率的插件 ,代码中hover直接预览图片先上效果图不仅html中可以预览 js代码 ...
html 在线预览pdf功能,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件!javascript 翻来覆去找到两种办法 ,最后采用了jquery.media.js插 ...
图片预览小窗口html,jQuery和css3超酷图片预览插件
这是一款使用css3和Velocity.js制作的jquery图片预览插件. 电子商务网站设计的宗旨是通过简化的设计提高用户体验,提高转化率也有一定的模式.另外一种模式是在需要的地方提供更多的信息来达 ...

bootstrap-multiselect.js插件、chosen插件、clipboard复制插件、layer.photos、lightbox插件相册预览插件学习

bootstrap-multiselect项目

chosen插件

clipboard复制插件

layer.photos插件

lightbox插件

bootstrap-multiselect.js插件、chosen插件、clipboard复制插件、layer.photos、lightbox插件相册预览插件学习相关推荐

最新文章

热门文章