常用的前端插件V1

news/2024/4/16 2:57:24
some jquery plugins are used for labelMangerSystem,some things may not be complete,ehhhh...,just leave them to perfection!

flatpickr

INTRODUCTION
  • 轻量级(6k),功能强大的日期选择器,兼容chromefirefox
  • 不依赖于其他库,UI少,使用SVG作为界面的图标
  • 兼容JQuery
  • 在配置参数中,所有的类型为string或boolean的参数都可以通过data-属性在HTML标签中进行设置,例如:data-min-date、data-default-date、data-default-date..
  • 月份可以滚动,年份可以手动输入

CONFIG

option.enableTime

enableTime: true||false;//是否启用日期选择

option.enableSeconds

enableSeconds: true||false,//是否启用秒选择器

option.dateFormat


dataFormat: "Y-m-d"||"d.m.Y";//设置日期显示格式    

option.(minDate&maxDate)


minDate: "today"||"2016-10-20 15:30"..//可选择的最小/最大时间,与dataFormat格式一致

option.weekNumbers

weekNumbers: true||false;//是否显示周数

option.disable


disable: ["2017-03-30","2017-05-1"..]||[{form: "2017-04-01", to: "2017-05-01"}..]||[function(data){return (data.getMonth()%2===0)}]
//禁选日期,具体的值、日期范围或者函数,其余日期启用

option.enable

enable: ["2017-03-30","2017-05-1"..]||[{form: "2017-04-01", to: "2017-05-01"}..]||[function(data){return (data.getMonth()%2===0)}]//启用日期,其他日期禁选 

option.mode

mode: "single"||"multiple"||"range";
//分别表示只能选一个日期/可选多个日期/可选一个日期范围

option.inline

inline: true||false;//日期选择器常开或者点击触发

USAGE
  • 在页面中引入flatpicker.css和flatpicker.js文件
  • 解决于layer同用时,日历显示在layer层下,将 flatpicker.min.css.flatpickr-calendar.openz-index 属性值改为 9999999

① HTML

<input id="flatpickr" placeholder="请选择截止日期">

② JS

_initFlatPickr = function() {$("#flatpickr").flatpickr(//some options...);
}, 

jQgrid

INTRODUCTION
  • JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信
  • jqGrid使用jQuery Java脚本库,并作为该包的插件编写

CONFIG

option.url 设置数据地址,直接获取数据


url: "/api/task/list-task-for-applicant",

option.datatype 数据传输格式

datatype: "json",

option.showLoadtext 读取数据或者排序时所显示的文字内容,比如loading...


showLoadtext: false,

option.showCellTips 显示单元格的提示信息,用 HTML:title 属性就行了

showCellTips: false,

option.altRows 设置为交替行表格


altRows: false,

option.colNames 表头

colNames: ["A","B","C"],

可以为表头设置样式,一般通过函数统一设置

var getHeadContent = function(arr) {var result = [];for (var i = 0, len = arr.length; i < len; i++) {result.push('<span style="color:#666;" lang="cn";>' + arr[i] + '</span>');}return result;
};

此时表头设置为如下所示

colNames: getHeadContent(["A","B","C"]),

option.colModel 设置 每一列 参数列表

colModel: [{name: 'name', //设置列在表格中的唯一名称,此属性是必须的index: 'name', //通过sidx参数设置排序时的索引名fixed: isFixed, //若设为true,列宽不允许重新计算。GridWidth方法改变表格宽度时,列宽也不会改变。width: 120, //设置列的初始宽度,可用pixels和百分比align: "center", //定义表格单元格(非表头)的对齐方式,可取值:left, center, rightclasses: "hello", //此属性用于定义列的类名,当有多个类名时,用空格间隔formatter: format4List
}]

option.rowNum 表格中可见的记录数。此参数通过url传递给服务器供检索数据用。注意:若此参数设置为10,而服务器返回15条记录,将只有10条记录被装入。若此参数被设置为-1,则此检查失效

rowNum: 7,

option.width 表格的宽度为colModel中定义的所有列宽度的总和,若设置了该项,每列的初始宽度按照shrinkToFit 设置的值

width: 1180,

option.mtype 定义提交类型POST或GET

mtype: "post",

option.pager 定义分页浏览导航条。必须是一个HTML元素

pager: '#dataPager',

option.height

height: 'auto',

option.hoverrows 表行是否有鼠标悬停效果

hoverrows: false,

option.sortorder 排序规则

sortorder: 'desc'||'asc',

option.viewsortcols 定义表头中排序图标的外观和行为。缺省为[false,'vertical',true]


viewsortcols: [true, 'vertical', true],

event.onCellSelect 当点击单元格时触发。rowid:当前行id;iCol:当前单元格索引;cellContent:当前单元格内容;e:event对象

onCellSelect: function(rowid, iCol, cellcontent, e) {//coding...
}

event.loadComplete 服务器返回响应的回调函数, xhr:XMLHttpRequest 对象

loadComplete: function(xhr){var total = xhr.records;//表示返回的记录数//coding...
}

event.loadError 请求服务器失败的回调函数

loadError: function(xhr, status, error){//coding...
}

event.loadBeforeSend 此事件发生在XMLHttpRequest被发送前,用于修改对象属性(如headers)

loadBeforeSend: function(xhr, settings) {var header = JwtTool.createAuthorizationTokenHeader();if (header.hasOwnProperty("Authorization")) {xhr.setRequestHeader("Authorization", header.Authorization);}
}

USAGE

CSS

<link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

HTML创建一个承载表格的TABLE元素

<table id="taskConfigGrid"></table>

JS

<script src='/Scripts/js/jquery-2.0.3.min.js' type="text/javascript"></script>
<script src='/Scripts/js/jqGrid/jquery.jqGrid.min.js' type="text/javascript"></script>
<script src='/Scripts/js/jqGrid/i18n/grid.locale-en.js' type="text/javascript"></script>
$("#taskConfigGrid").jqGrid({//options...//events...
});

requireJs

INTRODUCTION
  • JavaScript模块只是遵循SRP(Single Responsibility Principle单一职责原则)的代码段,传统通过 <script> 标签来进行加载,这就需要持续不断的关注模块之间的依赖性,按照一个特定的顺序加载这些模块,否则运行时将会发生错误(这种错误我经常遇到)
  • AMD(异步模块定义)就是这样一种对模块的定义,使模块和它的依赖可以被异步的加载,但又按照正确的顺序
  • RequireJS是一个Javascript 文件和模块框架,使用RequireJS,你可以顺序读取仅需要相关依赖模块。RequireJS所做的是,在你使用script标签加载你所定义的依赖时,将这些依赖通过head.appendChild()函数来加载他们。
  • 当依赖加载以后,RequireJS计算出模块定义的顺序,并按正确的顺序进行调用。这意味着你需要做的仅仅是使用一个“根”来读取你需要的所有功能,然后剩下的事情只需要交给RequireJS就行了。

CONFIG

option.data-main 用来引入 入口文件(当requireJS被加载完成后立即调用的文件称为入口文件)

<script data-main="/require-config" src="/libs/require/require.js"></script>

require-config.baseUrl 用于加载模块的根路径

baseUrl: '/',

require-config.paths 用来配置别名,用别名来代替模块名,注意被替代的模块名不需要.js后缀

paths: {//moduleID:路径(注意moduleID后缀不需要.js)//建议一个moduleId对应一个单独的文件夹,因为可能因为版本不同产生差异'jquery': 'libs/core/jquery.min'
}

require-config.shim shim配置可简单设置为依赖数组,设置shim本身不会触发代码的加载,想要实际加载shim指定的或涉及的模块,仍然需要一个常规的require/define调用

shim: {'jquery': {//加载依赖关系数组deps: ['css!/libs/jquery/jquery.css']}
},

require-config.deps 加载依赖关系数组

deps: ["app"
]        

define 利用它来编写模块,然后在相应的地方进行引入

define(['jquery','text!module/config/task-config-applicant/tpl/task-config-tpl.html'
], function(jQuery, Tpl) {//coding...
}

require 通过它将写好的模块进行引入,并根据这些模块编写我们的主代码

require(['jquery'], function ($) {//jQuery was loaded and can be used now
});

USAGE

主页面引入JS文件

<script data-main="/require" src="/libs/require/require.js"></script>

配置 require.js 文件

require.config({urlArgs: "v=" + (new Date()).getTime(),waitSeconds: 0,baseUrl: '/',paths: {'jquery': 'libs/core/jquery.min',"multiselect": "libs/multiselect/bootstrap-multiselect"        },shim: {'multiselect': {deps: ['css!/libs/multiselect/bootstrap-multiselect.css']},'echarts_theme': {deps: ['echarts']}},deps: ["app"]
});

相应页面引入并使用

define(['jquery','text!module/config/task-config-applicant/tpl/task-config-tpl.html'
], function(jQuery, Tpl) {//coding...
}

layer

INTRODUCTION
  • 可做独立组件,一款优秀的弹出层组件

CONFIG

option.type

type:0 //信息框,默认
type:1 //页面层
type:2 //iframe层
type:3 //加载层
type:4 //tips层

option.title String/Array/Boolean,默认:'信息'

title :'我是标题'
title: ['文本', 'font-size:18px;']
title: false

option.content String/DOM/Array,默认:''

content: '传入任意的文本或html'
content: $('#id')
content: html //可以结合 HandlebarJs 使用

option.skin String 目前layer内置的skin有:layui-layer-lanlayui-layer-molv

skin: 'layui-layer-rim',

option.area String/Array,默认:'auto'

area: '500px'//只定义宽度,高度自适应
area: ['500px', '300px']

option.btn

btn: ['确定', '取消'],
btn1: function(index, layero) {var num = $("#submitNum").val();_controller.updatePassNum(v1, num).done(function(res) {if (res.code == 0) {layer.close(index);layer.msg("提交成功!");scope.refreshGrid();}});
},
btn2: function(index, layero) {layer.close(index);
}

option.zIndex 默认:19891014 一般用于解决和其它组件的层叠冲突

option.success

success: function(layero, index){console.log(layero, index);
}

layer.open

layer.open({option...//上述配置
});

layer.msg


layer.msg('hello',function(){//do something or not });

layer.close 一般结合 btn 回调函数进行使用

layer.close(index)

USAGE

直接引用 layer.js 即可

<script src="layer.js"></script>
<script>
layer.msg('hello'); 
</script>

handlebarsjs

INTRODUCTION
  • Handlebars 是JavaScript一个语义模板库,通过对 viewdata 的分离来快速构建Web模板,意义在于让你的 htmljs 充分解耦,它在加载时被预编译,而不是到了客户端执行到代码时再去编译,这样可以保证模板加载和运行的速度。
  • Handlebars.js 是一个由Javascript构建的编译器,它接收任意HTML与Handlebars.js表达式并将它们编译为Javascript函数。这个派生出来的Javascript函数接着接收一个参数或者一个对象(即你的数据 ),然后它返回一个包含HTML以及被插值在HTML中的对象属性值的字符串。因此,你最终可以得到一个对象属性值位于相应地方的字符串(HTML),你可以将这个字符串插入到页面中。
  • 路径:../ 同CSS文件路径选择
  • Handlebar.js 模板的三个部分:

    **a.** Handlebars.js表达式:{ { ... } },内容可以是变量或者函数等。 **b.** Date(上下文):即你想要展示在页面上的内容,你将你的数据作为一个对象(一个正常的Javascript对象)传递给Handlebars函数。这个数据对象叫做上下文。这个对象能够由数组,字符串,数字,其他对象组成,或者是包含所有的东西。如果数据对象拥有一个对象数组,你可以使用Handlebars中的each辅助函数(稍后将讨论辅助函数)去迭代数组,此时的上下文将被设定为数组中的每个对象。 **c.** handlebars编译函数:Handlebars编译函数接收模板作为参数并返回一个Javascript函数。
    

CONFIG

option.expression 注意HandlebarJs的标签是内闭合的,对 ifunless 只能判断 true or false, ''、undefined、null、0、[]等都会被识别为false

{ { !注释 } }{ { content } }{ { #if } } { { /if } }{ { #if } } { { else } } { { /if } }{ { #if } } { { else if } } { { else } } { { /if } }{ { #unless } } { { /unless } } //用法同if,与if判断条件相反{ { #each } } { { /each } } 遍历数组{ { { richtext } } } 避免转义

Handlebar.registerHelper 自定义一个 Handlebar 函数,可在html中作为标签直接使用

//判断是否为标注管理员
Handlebars.registerHelper("isTaskManger", function(options) {if (_currentUserRole === "ROLE_LABEL_MANAGER") {//满足添加继续执行return options.fn(this);} else {//不满足条件执行{{else}}部分return options.inverse(this);}
});//HTML内使用
{ { #isTaskManger } }
<li>标注任务管理</li>
<li>提交日志管理</li>
{ { /isTaskManger } }

Handlebar.compile 对 handlebars.expression 进行预编译,生成一个JavaScript函数

var source = $('#template-user').html();//获取到html结构
var template = Handlebars.compile(source);//编译成模板
var html = template(data);//生成完成的html结构

USAGE
  • 在页面中引入 Handlebar.js

HTML内构建Handlerbar表达式

{ { #each infoList } }
<div class="single-member effect-3"><div class="member-info"><h3>{ { uname } }</h3><h5>{ { fname } }</h5><p>{ { taskId } }</p><p>{ { fdesc } }</p><p>{ { machine } }</p><p>{ { update } } / {{sum}}</p></div>
</div>
{ { /each } }

JS部分:获取数据格式如下

{"code": 0,"data": [{"taskId": "22000001","uname": "用户1","fname": "PD1","fdesc": "行人检测","machine": "01","update": 50,"sum": 100},{"taskId": "22000002","uname": "用户2","fname": "PD2","fdesc": "脸谱检测","machine": "02","update": 20,"sum": 100}
]
}

JS部分:对HTML进行预编译生成一个JavaScript函数,然后通过生成的函数对数据进行渲染,生成HTML

var _getLabelInfo = function() {_controller.getLabelInfo().done(function(res) {var data = {infoList: res.data},template = Handlebars.compile(rightTpl)(data);$("#right-content").empty();$("#right-content").html(template);});};

jQueryLangJs

INTRODUCTION
  • 即时语言切换,无需重新加载页面或向服务器发出请求
  • 跨网页的语言持久性和通过cookie重新加载(需要js-cookie.js插件)
  • 自动翻译页面的动态部分(例如通过AJAX加载或通过jQuery添加)
  • 增加了对正则表达式匹配的支持

CONFIG

en.json 配置语言包,包含短语部分和正则部分

{"token": {"搜索": "searchFor","首页": "first","尾页": "last"},"regex": [["Budget", "งบประมาณ"],["^Something at start of text", ""],["This will be case insensitive", "i", ""]]
}

option.lang 放置在 HTML 文件中,用于标记需要翻译的元素

翻译 titlealthref

<button title="语言" lang="cn">        

翻译内容

<text lang="cn">标注管理系统</text>

翻译 alert

alert(window.lang.translate('Some text to translate'));

option.data-lang-token 用于标记长文本,自定义令牌替换原文本内容


USAGE

JS部分

js-cookie

<script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
<script src="js/js.cookie.js" charset="utf-8" type="text/javascript"></script>

初始化

var lang = new Lang();
//初始化国际化模块
_changeLang = function() {//定义语言包位置lang.dynamic('en', '../../libs/langpack/en.json');//定义默认语言lang.init({defaultLang: 'cn'});
},

切换

lang.change('en');

ECharts

INTRODUCTION
  • 纯javascript的图表库,支持丰富图表类型,所以下面只对项目所用的图表进行介绍
  • 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)
  • 底层依赖轻量级的 Canvas 类库 ZRender
  • 可定制,个性化
  • 图表父级DIV需要规定高度,否则显示不出来

CONFIG

option.backgroundColor

backgroundColor: '#eee',    

option.title

title: {text: '主标题,subtext: '副标题',textStyle: {...},//设置标题样式x: 'center',y: 'top'},  

option.tooltip

tooltip: {trigger: 'item',//触发类型{item/axis}formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器,支持字符串模板和回调函数两种形式,不同图表类型各个标记代表含义不同
},

option.legend

legend: {orient: 'vertical',//列表的布局朝向{vertical/horizontal}left: 'left',//自适应左边距data: [{name: '系列1',//展示数据['',...]icon: 'circle',// 强制设置图形为圆。textStyle: {color: 'red'// 设置文本为红色}}] },

option.toolbox

toolbox: {orient: 'vertical',//工具栏 icon 的布局朝向{vertical/horizontal}show: true,//默认不显示feature: { //各工具配置项dataZoom: {yAxisIndex: 'none'}, //区域缩放dataView: {readOnly: false}, //查看源数据,false时可更改magicType: {type: ['line', 'bar']}, //折线图和柱状图切换restore: {}, //刷新saveAsImage: {} //保存图像}
},

option.xAxis

xAxis: {position: 'top', //X轴位置,default:bottomname: 'evsion', //X坐标轴名称type: 'category', //坐标轴类型{value,category,time,log}boundaryGap: false, //坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样data: Array//与'category'配合使用,例['2017-4-1', '2017-4-2', '2017-4-3', '2017-4-4', '2017-4-5', '2017-4-6', '2017-4-7']
},

option.yAxis

yAxis: {type: 'value',//坐标轴刻度的相关设置axisLabel: {formatter: '{value}~~~~'}
},

option.series 系列列表。每个系列通过 type 决定自己的图表类型, 每个 type 对应不同的属性

option.radar 雷达图坐标系组件,只适用于雷达图

indicator:  [
{ name: '销售(sales)', max: 6500},
... 
]

option.visualMap

visualMap: {min: 0,max: 10,calculable: true,orient: 'horizontal',left: 'center',bottom: '15%'
},

option.calendar 日历

calendar: {top: 'middle',left: 'center',orient: 'vertical',cellSize: [60], //单元格大小,'auto'||['20','40']//是否显示年yearLabel: {show: true,textStyle: {fontSize: 30}},//是否显示日dayLabel: {margin: 5, //星期标签与轴线之间的距离firstDay: 1, //从周一开始nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']},//是否显示月monthLabel: {show: true},range: ['2017-01-02', '2017-02-23'] // '2017-02'||2017||['2017-01', '2017-02']
},

line

series: [{name: '登陆量',type: 'line',data: [11, 11, 15, 13, 12, 13, 10],//实际运用中用数组代替Array//描点markPoint: {data: [{type: 'max',name: '最大值'}, {type: 'min',name: '最小值'}]},//直线markLine: {data: [{type: 'average',name: '平均值'}]}
},

pie

series: [{name: 'XXX',//饼图某部分激活时名称type: 'pie',radius: '55%',//规定饼图大小center: ['50%', '60%'],data: [{//A部分的值和名称value: {A},name: category[0]}, {value: {B},name: category[1]}, {value: {C},name: category[2]}, {value: {D},name: category[3]}],itemStyle: {//激活时样式emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
}; 

radar

series: [{name: '系统商品数量统计',type: 'radar',data : [{value : gnum,name : '库存'}, {value : snum,name : '销售'}, {value : cnum,name : '评论'}]
}]

map 注意ECharts3不再支持内置地图,需要到ECharts-Map按需下载

series: [{   name: 'XXX',type: 'map',mapType: '湖南',//这里与配置的地图有关,注意省要用中文selectedMode : 'multiple',//选中模式,表示是否支持多个选中,默认关闭{single/multiple}//图形上的文本标签,可用于说明图形的一些数据信息label: {//是否在普通状态下显示标签。normal: {show: true},//是否在高亮状态下显示标签。emphasis: {show: true}},data:[{name:'A', value: 100}//注意A需要与mapType里面的值相对应]},   

USAGE

init

var myChart = echarts.init(document.getElementById('X'));//JQuery需要($("#X")[0])

config.option

var Xoption = {code...//内容既为CONFIG部分
}

setOption

myChart.setOption(Xoption);

event.click
这里params显示点击块的所有配置,然后自动跳转到百度并搜索,params.name代表点击事件触发时的取值

myChart.on('click', function(params) {window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});

pin

INTRODUCTION

它能将任意页面元素“钉”在某个容器顶部,而且在尺寸小的屏幕上能够自动禁用这种效果


CONFIG

将某元素“钉”在容器内

    $(".pinned").pin({containerSelector: ".container"})

在小尺寸的屏幕上禁用Pin效果

    $(".pinned").pin({minWidth: 940})   

USAGE

直接引用 jquery.pin.js 即可


revaelJs

INTRODUCTION
  • reveal.js是一个能够帮助我们很轻易地使用HTML来创建漂亮的PPT演示效果
  • reveal.js不依赖其他任何javascript库,是一个独立的javascript插件库

CONFIG

options

// 是否在右下角展示控制条
controls: true,// 是否显示演示的进度条
progress: true,// 是否显示当前幻灯片的页数
slideNumber: 'c/t',// 是否将每个幻灯片改变加入到浏览器的历史记录中去
history: false,// 是否启用键盘快捷键来导航
keyboard: true,// 是否启用幻灯片的概览模式,开启后,可以使用ESC键查看幻灯片概览
overview: true,// 是否将幻灯片垂直居中
center: true,// 是否在触屏设备上启用触摸导航
touch: true,// 是否循环演示
loop: false,// 是否将演示的方向变成 right to left
rtl: false,// 全局开启和关闭碎片
fragments: true,// 标识演示文稿是否在嵌入模式中运行,即包含在屏幕的有限部分中的
embedded: false,// 标识当问号键被点击的时候是否应该显示一个帮助的覆盖层
help: true,//  两个幻灯片之间自动切换的时间间隔(毫秒),当设置成 0 的时候则禁止自动切换,该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
autoSlide: 0,// 当遇到用户输入的时候停止切换
autoSlideStoppable: true,// 是否启用通过鼠标滚轮来导航幻灯片
mouseWheel: true,//  是否在移动设备上隐藏地址栏
hideAddressBar: true,// 是否在一个弹出的 iframe 中打开幻灯片中的链接
previewLinks: false,// 切换过渡效果
transition: 'default', // none/fade/slide/convex/concave/zoom// 过渡速度
transitionSpeed: 'default', // default/fast/slow// 全屏幻灯片背景的过渡效果
backgroundTransition: 'default', // none/fade/slide/convex/concave/zoom// 除当前可见的之外的幻灯片数量
viewDistance: 3,// 视差背景图片
parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"// 视差背景尺寸
parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"// 移动视差背景(水平和垂直)滑动变化的数量, 例如100
parallaxBackgroundHorizontal: '',
parallaxBackgroundVertical: ''

options.transition None - Fade - Slide - Convex - Concave - Zoom

<section data-transition="zoom">

options.theme Black (default) - White - League - Sky - Beige - SimpleSerif - Blood - Night - Moon - Solarized

<link rel="stylesheet" href="css/theme/moon.css">

options.background #color||image.png(data-background-repeat="repeat" data-background-size="100px)||

<section data-background="#ff0000">

option.data-background-video

<section data-background-video="video.mp4,video.webm">

keyboard


B||.  //pause
o   //preview
F11 // full screen                

USAGE

CSS

<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/moon.css">

HTML

<div class="reveal"><div class="slides"><section data-background="#ff0000" id="s4"><h2>Reveal.js</h2><p>HELLO WORLD!</p>           </section></div>
</div>

JS

<script src="js/reveal.js"></script>
//初始化
Reveal.initialize({//options...    
})

material-icon

INTRODUCTION
  • 大方,美观,跨平台,易于使用

CONFIG

CSS配置,可根据需求自行调节样式

@font-face {font-family: 'Material Icons';font-style: normal;font-weight: 400;src: local('Material Icons'), local('MaterialIcons-Regular'), url(http://fonts.gstatic.com/s/materialicons/v21/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}.material-icons {font-family: 'Material Icons';font-weight: normal;font-style: normal;font-size: 24px;line-height: 1;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr;-webkit-font-feature-settings: 'liga';-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

USAGE
  • 配置CSS文件即可

DEMO

<i class="material-icons">event</i>

Bootstrap Multiselect

INTRODUCTION
  • Bootstrap Multiselect 是一个基于JQuery的插件,用于提供直观的用户界面,用于使用具有多个属性的选择输入。

CONFIG

option.multiple 添加在 <select> 中,启用多选

<select id="test" multiple="multiple">

option.maxHeight 下拉框最大高度

maxHeight: 300

option.buttonWidth 触发按钮宽度

buttonWidth: '400px'

option.includeSelectAllOption 全选

includeSelectAllOption: true

option.enableFiltering 启用筛选

enableFiltering: true

USAGE

引入 JSCSS 文件,在CSS文件内进行相关样式的更改

<link rel="stylesheet" type="text/css" href="./dist/css/bootstrap-multiselect.css">
<link rel="stylesheet" type="text/css" href="./docs/css/bootstrap-3.3.2.min.css">
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="./docs/js/bootstrap-3.3.2.min.js"></script>
<script type="text/javascript" src="./dist/js/bootstrap-multiselect.js"></script>

创建一个下拉选择框

<select id="test" multiple="multiple"><option value="1"> 1 </option><option value="2"> 2</option><option value="3"> 3 </option><option value="4"> 4</option><option value="5"> 5 </option><option value="6"> 6</option>
</select>

初始化插件

<script type="text/javascript">$(document).ready(function(){$("#test").multiselect({//options...});})
</script>


http://www.ppmy.cn/news/790823.html

相关文章

14 Python 办公自动化

目录 1、普通文件自动化管理 1.1 文件的复制 1.2 文件内容的复制 1.3 文件的裁剪 1.4 文件的删除 1.5 文件的压缩与解压缩 1.6 文件的查找 1.7 查找含有指定内容的文件 1.8 清理重复的文件 1.9 批量修改目录中的文件名称 2、文件夹的自动化管理 2.1 文件夹的复制 …

webpack5搭建与基本概念

webpack基础构建 新建文件夹进入文件夹查看是否安装node&#xff0c;命令&#xff1a;node-v创建package.json文件&#xff0c;命令&#xff1a;npm init -y安装webpack和webpack-cli&#xff0c;&#xff08;命令自动创建出package-lock.json文件和node_modules文件夹&#x…

Excel部分单元格不能编辑,什么原因?怎么做到的?

Excel文件打开之后&#xff0c;发现在一个工作表中&#xff0c;有些单元格点击之后没有反应&#xff0c;有些就是正常的。大家可能不知道是什么原因&#xff0c;这个是设置了工作表保护的原因。 大家可能会想&#xff0c;工作表保护是对整个工作表的保护&#xff0c;应该不是保…

python修改单元格格式太多_还在为Excel合并单元格导致的各种问题烦恼吗?这里一起解决...

相信大家在使用Excel的过程中应该经常使用合并单元格吧&#xff0c;但是也是因为合并单元格导致了各种问题&#xff0c;比如&#xff1a;移动问题&#xff0c;序号问题、计数问题、求和问题、排序问题、筛选问题等等。 小编在上一章最后已经分享了关于移动的问题即移动列&#…

@Auto-Annotation自定义注解——日志记录篇

Auto-Annotation自定义注解——日志记录篇 自定义通用注解连更系列—连载中… 首页介绍&#xff1a;点这里 前言 ​ 平时开发中&#xff0c;我们经常需要通过日志或者数据库来记录系统中一些重要的操作&#xff0c;如删除、修改和新增等。但每次在这些方法里手动打印日志或者…

用 ChatGPT 制作中英双语字幕

用 ChatGPT 制作中英双语字幕 0. 背景1. 使用剪映生成英文字幕2. 使用 ChatGPT 的制作中英双语字幕 0. 背景 最近在学习 AI 相关的知识&#xff0c;有很多视频是英文的。 为了提高学习效率&#xff0c;我考虑将这些视频加上中英双语字幕。 效果展示如下&#xff0c; 1. 使用…

qq音乐 android,QQ音乐安卓版

QQ音乐安卓版下载安装介绍 QQ音乐安卓版下载是一款最时尚前沿的音乐播放器手机软件&#xff0c;具备音乐播放、电台、在线音乐搜索等功能。其包含了海量正版高品质音乐&#xff0c;补充精美的专辑和歌手&#xff0c;随意掌控QPlay音箱上的歌曲播放属性。 功能特色&#xff1a; …

腾讯QQ音乐进军“元宇宙”,音乐软件搞社交,虚拟社区你怎么看?

腾讯旗下拥有超过7亿用户的音乐应用QQ音乐&#xff0c;最近在其内部测试版本中增加了“音乐区”功能。“音乐区”为用户提供了一个虚拟空间&#xff0c;可以在虚拟墙上装饰和悬挂虚拟音乐播放器。 用户可以通过从平台提供的付费头像中进行选择来更改其外观&#xff0c;其形式为…

QT-在线音乐播放

QT之在线音乐播放简易版本 1、效果预览查看2、歌名搜索3、音乐本地下载4、音乐播放与暂停5、音乐播放进度条6、本次实例全部代码链接 1、效果预览查看 2、歌名搜索 通过使用外部提供的HTTP访问搜索的方式&#xff0c;这里我们用的是网易云的接口&#xff0c;查询获取歌名和相关…

故障:启动修复无法修复你的电脑

有台笔记本很久没用了无法开机了&#xff0c;还是用的win7的系统&#xff0c;开机后提示我使用启动修复&#xff0c;但是失败了&#xff0c;提示我启动修复无法修复你的电脑 启动修复无法修复你电脑怎么办_自动修复电脑未正确启动的解决方法&#xff0d;win7之家 1、上网查了下…

比对Excel数据

以a个为准绳比对b表数据&#xff0c;添加比对结果列输出。 (本笔记适合初通 Python 的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教程》&#xff0c;不仅仅是基础那么…

smarty上线后不能渲染模板_不能打电话的iPhone XR?苹果新品渲染图上线,网友:要你何用?...

我是侃哥&#xff0c;和你聊聊我想说的科技、互联网趣闻&#xff0c;或许不专业&#xff0c;但希望有所价值 说起iPod Touch&#xff0c;这大概是苹果史上最没有名气的一款产品了&#xff0c;2007年9月5日&#xff0c;苹果在"The Beat Goes On"产品发表会中发布了第一…

vue 类ios的时间组件_Vue选择组件,例如ios 3D选择器样式

vue 类ios的时间组件 pd选择 (pd-select) A mobile UI component like IOS picker for Vue 2.x,can be wheel pick what ever you defined. 诸如Vue 2.x的IOS选择器之类的移动UI组件可以随心所欲定义。 View demo 查看演示 Download Source 下载源 browserversionIE>11Edg&…

Day47

思维导图 练习 实现登录框中&#xff0c;当登录成功时&#xff0c;关闭登录界面&#xff0c;并跳转到其他界面 second.h #ifndef SECOND_H #define SECOND_H#include <QWidget>namespace Ui { class Second; }class Second : public QWidget {Q_OBJECTpublic:explicit …

搭载鸿蒙系统的手机,官宣!首个搭载鸿蒙系统的手机厂商亮相,新品亮点太多...

原标题&#xff1a;官宣&#xff01;首个搭载鸿蒙系统的手机厂商亮相&#xff0c;新品亮点太多 自从2019年8月9日华为发布鸿蒙OS操作系统以来&#xff0c;围绕它的争议就一直不断&#xff0c;虽然在多个场合&#xff0c;华为都表示鸿蒙将会完全地对外开源&#xff0c;但是好像其…

基于PTGui和Ps 有手和低端手机就能拼接生成一张酷酷VR720°商用全景图

基于PTGui和Ps 有手和低端手机就能拼接生成一张酷酷VR720商用全景图 文章目录 基于PTGui和Ps 有手和低端手机就能拼接生成一张酷酷VR720商用全景图第一步&#xff1a;下载软件收藏页面第二步&#xff1a;清楚拍摄要求软件拼接原理从这个原理可得&#xff0c;全景图对环境的要求…

苹果mp3软件_【APP】coolhear 3D:安卓+苹果

四维空间阵 时间 2019年3月15日 第200次分享 上方为本次推送软件的同款音乐,制作出来之后就是这样子,大家可以带上耳机食用!个人觉得APP里面环绕音质比这个好。 200 次分享了,一路走来不容易,感谢大家的不离不弃。大家有没有什么建议给我的,准备把公众号改版一下,手无良…

查找列表中最小的N个元素nsmallest()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 查找列表中最小的N个元素 nsmallest() 选择题 以下python代码输出正确的一项是? import heapq list[11,12,13,14,15] print("【显示】list ", list) print("【执行】heapq.nsm…

蓝牙定位系统|蓝牙网关定位和蓝牙Beacon定位的区别有哪些?

作为室外定位向室内环境的延伸&#xff0c;为了解决室外定位导航“最后一公里”的问题&#xff0c;室内定位领域的科技公司和研究机构也做出了很多的努力。目前市场主流的是基于蓝牙网关、蓝牙Beacon的室内定位方案&#xff0c;经常会有客户问到&#xff0c;这两种方案有什么区…
最新文章