bootstrap-multiselect項(xiàng)目

引入的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放在最后面，因?yàn)樗蕾囉谇懊娴膉s

不引入?popper.js的報(bào)錯(cuò)且應(yīng)當(dāng)只調(diào)入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	進(jìn)行分類別或者說分組
enableCollapsibleOptGroups	分組折疊使用
maxHeight	下拉列表的最大高度，超過出現(xiàn)滾動(dòng)條
nonSelectedText	沒有進(jìn)行選擇的提示語
numberDisplayed?	下拉列表中的內(nèi)容個(gè)數(shù)，默認(rèn)為3
enableFiltering?	拉列表上設(shè)置一個(gè)搜索框
includeSelectAllOption?	設(shè)置全選
selectAllName ??	設(shè)置全選項(xiàng)名字，默認(rèn)為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復(fù)制插件

引入的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文本框的內(nèi)容 </button>//data-clipboard-action copy cut（剪切屬性只支持 input 和 textarea） //data-clipboard-target 指定被復(fù)制內(nèi)容 //data-clipboard-text 指定需要復(fù)制的內(nèi)容//事件 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 //新版本構(gòu)造函數(shù)是 ClipboardJS 而不是舊版本的 Clipboard，如果使用 var clipboard = new Clipboard(btn); 會(huì)提示 Uncaught TypeError: Illegal constructor 錯(cuò)誤

高級(jí)用法

//可以設(shè)置回調(diào)方法供 Clipboard 使用： new ClipboardJS('.btn', {target: function(trigger) {return trigger.nextElementSibling;} });//清理 Clipboard 對(duì)象： 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圖片預(yù)覽</p> <a href="./1.png" data-lightbox="example-set" title="文字說明信息"><img class="example-image" src="./1.png" width="150" height="150" /> </a>

總結(jié)

以上是生活随笔為你收集整理的bootstrap-multiselect.js插件、chosen插件、clipboard复制插件、layer.photos、lightbox插件相册预览插件学习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。