常用插件
程序员文章站
2022-07-12 21:10:52
...
// 带搜索框的下拉框插件Bootstrap-select
// 使用方法
<link rel="stylesheet" href="bootstrap-3.3.4.css">
<link rel="stylesheet" href="bootstrap-select.css">
<script src="jquery.min.js"></script>
<script src="bootstrap-3.3.4.js"></script>
<script src="bootstrap-select.js"></script>
<form class="form-inline">
<div class="form-group">
<label class="col-md-1 control-label" for="lunch">Lunch:</label>
</div>
<div class="form-group">
<select id="lunch" class="selectpicker" data-live-search="true" title="">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>
</div>
</form>// 表单验证插件validate
// 使用方法
<form action="" id="demoForm">
<fieldset>
<legend>用户登录</legend>
<p id="info"></p>
<p>
<label for="username">用户名</label>
<input type="text" id="username" name="username" class="input">
</p>
<p>
<label for="password">密码</label>
<input type="password" id="password" name="password" class="input">
</p>
<p>
<label for="confirmPassword">确认密码</label>
<input type="password" id="confirmPassword" name="confirmPassword" class="input">
</p>
<p>
<button>检查表单</button>
</p>
<p>
<input type="submit" value="登录" id="check">
</p>
</fieldset>
</form>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<script type="text/javascript">
$(function(){
/*
基本验证方法
required 必填 remote 远程校验
minlength 最小长度 maxlength 最大长度 rangelength 长度范围
min 最小值 max 最大值 range 值范围
email email格式 url URL格式 date 日期
number 数字 digits 整数 equalTo 与另一元素值相等
:blank 选择所有值为空的元素
:filled 选择所有值不为空的元素
:unchecked 选择所有没有被选中的元素
*/
$('#demoForm').validate({
rules:{
username:{
required:true,
minlength:2,
maxlength:19,
// remote:'remote.json'
// remote:{
// url:'remote.json',
// type:'post',
// data:{
// loginTime:function(){
// return +new Date;
// }
// }
// }
rangelength:[2,19],
// email:true,
// url:true,
// date:true,
//
},
password:{
required:true,
minlength:2,
maxlength:16,
},
confirmPassword:{
equalTo:'#password',
}
},
messages:{
username:{
// required:'请输入用户名',
minlength:'最少输入两位',
maxlength:'最多输入十位',
rangelength:'在2-19位之间',
},
password:{
// required:'请输入密码',
minlength:'最少输入两位',
maxlength:'最多输入十六位',
},
confirmPassword:{
equalTo:'',
}
},
// debug: true, // 为true表示表单不会提交，只进行检查
// groups:{
// login:'username password confirmPassword'
// },
// errorPlacement:function(error,element){
// error.insertBefore('#info')
// }
});
// 自定义验证方法
$.validator.addMethod('postcode',function(value,element){
var postcode=/^[0-9]{6}$/;
return this.optional(element) || (postcode.test(value));
},'请填写正确的邮编！');
// valid方法：检查表单或某些元素是否有效
$('#check').click(function(){
alert($('#demoForm').valid()?'填写正确':'填写错误')
})
})
</script>
// 日期插件bootstrap-datetimepicker
// 使用方法
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>
<form action="" class="form-horizontal">
<fieldset>
<legend>Test</legend>
<div class="control-group">
<label class="control-label">Date Picking</label>
<div class="controls input-append date form_date" data-date="" data-link-field="dtp_input2" >
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<input type="hidden" id="dtp_input2" value="" /><br/>
</div>
</fieldset>
</form>
<script type="text/javascript">
$('.form_date').datetimepicker({
language: 'zh-CN', // 显示中文
format: 'yyyy-mm-dd', // 显示格式 yyyy-mm-dd HH:mm:ss
weekStart: 1, // 一周从哪一天开始，即表头上是从周几开始排，0表示周日开始，1表示周一开始
todayBtn: 1, // 显示今日按钮，1：true，0：false
autoclose: 1, // 选择日期后自动关闭
todayHighlight: 1, // 高亮当前日期
startView: 2, // 日期时间选择器打开之后首先显示的视图，0：选择秒，1：选择小时，2：选择几号，3：选择几月，4：选择哪年
minView: 2, // 日期时间选择器所能够提供的最精确的时间选择视图
maxView: 4, // 日期时间选择器最高能展示的选择范围视图
keyboardNavigation: 1, // 是否允许通过方向键改变日期
});
</script>// 上传插件 WebUploader
// 使用方法
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="webuploader.css">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="webuploader.min.js"></script>
<div id="uploader-demo">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="filePicker">选择图片</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
</div>
<script type="text/javascript">
$(function(){
/*init webuploader*/
var $list=$("#thelist"); //这几个初始化全局的百度文档上没说明，好蛋疼。
var $btn =$("#ctlBtn"); //开始上传
var thumbnailWidth = 100; //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
var thumbnailHeight = 100;
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: false,
// swf文件路径
swf: 'Uploader.swf',
// 文件接收服务端。
server: '/apm-web/a/test/',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
method:'POST',
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) { // webuploader事件.当选择文件后，文件被加载到文件队列中，触发该事件。等效于 uploader.onFileueued = function(file){...} ，类似js的事件定义。
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src ) { //webuploader方法
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<p class="progress"><span></span></p>')
.appendTo( $li )
.find('span');
}
$percent.css( 'width', percentage * 100 + '%' );
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file ) {
$( '#'+file.id ).addClass('upload-state-done');
});
// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.text('上传失败');
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
});
$btn.on( 'click', function() {
console.log("上传...");
uploader.upload();
console.log("上传成功");
});
});
</script>// 滚动条插件jquery.nicescroll
// 使用方法
<style>
#content1,#content2,#content3{ width:200px; height:500px; border:1px solid #ddd; overflow:auto; padding:10px;}
#inner{ width: 500px; height: 300px; }
</style>
<div id="content1">
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
<p>这是填充字1填充字1</p>
</div>
<div id="content2">
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
<p>这是填充字2填充字2</p>
</div>
<!-- 水平滚动 -->
<div id="content3">
<div id="inner">
<p>这是填充字3填充字3这是填充字3填充字3这是填充字3填充字3这是填充字3填充字3</p>
<p>这是填充字3填充字3这是填充字3填充字3这是填充字3填充字3这是填充字3填充字3</p>
<p>这是填充字3填充字3这是填充字3填充字3这是填充字3填充字3这是填充字3填充字3</p>
<p>这是填充字3填充字3这是填充字3填充字3这是填充字3填充字3这是填充字3填充字3</p>
<p>这是填充字3填充字3这是填充字3填充字3这是填充字3填充字3这是填充字3填充字3</p>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script>
$('#content1').niceScroll({
cursorcolor: "#424242",//滚动条的颜色
background: "", // 轨道的背景颜色
cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0
cursorwidth: "5px", //滚动条的宽度
cursorminheight: 32, // 设置滚动条的最小高度 (像素)
railpadding: { top:0, right:0, left:0, bottom:0 },//滚动条的位置
cursorborder: "1px solid #fff", // 游标边框css定义
cursorborderradius: "5px",//以像素为光标边界半径 圆角
zindex:"auto",//给滚动条设置z-index值
});
$('#content2').niceScroll({
cursorcolor: "#424242",//滚动条的颜色
background: "", // 轨道的背景颜色
cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0
cursorwidth: "5px", //滚动条的宽度
cursorminheight: 32, // 设置滚动条的最小高度 (像素)
railpadding: { top:0, right:0, left:0, bottom:0 },//滚动条的位置
cursorborder: "1px solid #fff", // 游标边框css定义
cursorborderradius: "5px",//以像素为光标边界半径 圆角
zindex:"auto",//给滚动条设置z-index值
});
$('#content3').niceScroll({
cursorcolor: "#424242", //滚动条的颜色
background: "", // 轨道的背景颜色
cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0
cursorwidth: "5px", //滚动条的宽度
cursorminheight: 32, // 设置滚动条的最小高度 (像素)
railpadding: { top:0, right:0, left:0, bottom:0 },//滚动条的位置
cursorborder: "1px solid #fff", // 游标边框css定义
cursorborderradius: "5px", //以像素为光标边界半径 圆角
zindex:"auto", //给滚动条设置z-index值
enablemousewheel: true, // nicescroll可以管理鼠标滚轮事件
enablekeyboard: true, // nicescroll可以管理键盘事件
oneaxismousemode: "auto", //当只有水平滚动时可以用鼠标滚轮来滚动，如果设为false则不支持水平滚动，如果设为auto支持双轴滚动
// scrollspeed: 60, // 滚动速度
// mousescrollstep: 40, // 鼠标滚轮的滚动速度 (像素)
// touchbehavior: false, // **拖拽滚动
// boxzoom: false, // **放大box的内容
// dblclickzoom: true, // (仅当 boxzoom=true时有效)双击box时放大
// gesturezoom: true, // (仅 boxzoom=true 和触屏设备时有效) **变焦当out/in（两个手指外张或收缩）
// grabcursorenabled: true // (仅当 touchbehavior=true) 显示“抓住”图标display "grab" icon
// autohidemode: true, // 隐藏滚动条的方式, 可用的值: true 无滚动时隐藏, "cursor" 隐藏 false 不隐藏, "leave" 仅在指针离开内容时隐藏, "hidden" 一直隐藏, "scroll" 仅在滚动时显示
// iframeautoresize: true, // 在加载事件时自动重置iframe大小
// preservenativescrolling: true, // 你可以用鼠标滚动可滚动区域的滚动条和增加鼠标滚轮事件
// railoffset: false, // 可以使用top/left来修正位置
// bouncescroll: false, // (only hw accell) 启用滚动跳跃的内容移动
// spacebarenabled: true, // 当按下空格时使页面向下滚动
// disableoutline: true, // 当选中一个使用nicescroll的div时，chrome浏览器中禁用outline
// horizrailenabled: true, // nicescroll可以管理水平滚动
// railalign: right, // 对齐垂直轨道
// railvalign: bottom, // 对齐水平轨道
// enabletranslate3d: true, // nicescroll 可以使用CSS变型来滚动内容
// smoothscroll: true, // ease动画滚动
// sensitiverail: true, // 单击轨道产生滚动
// enablemouselockapi: true, // 可以用鼠标锁定API标题 (类似对象拖动)
// cursorfixedheight: false, // 修正光标的高度（像素）
// hidecursordelay: 400, // 设置滚动条淡出的延迟时间（毫秒）
// directionlockdeadzone: 6, // 设定死区，为**方向锁定（像素）
// nativeparentscrolling: true, // 检测内容底部便于让父级滚动
// enablescrollonselection: true, // 当选择文本时**内容自动滚动
// cursordragspeed: 0.3, // 设置拖拽的速度
// rtlmode: "auto", // DIV的水平滚动从左边开始
// cursordragontouch: false, // 使用触屏模式来实现拖拽
// scriptpath: "" // 为boxmode图片自定义路径 ("" => same script path)
// preventmultitouchscrolling: true // 防止多触点事件引发滚动
// 注意:不显示滚动条的原因和解决方法
// 原因一：需要滚动条的标签使用了绝对布局(position:absolute)，而且z-index>0。
// 解决办法：niceScroll({zindex:200});这里设置zindex的值要比标签的z-index大。
// 原因二：需要滚动条的标签使用了ajax填充数据。
// 解决办法：将$(selector).niceScroll()放在ajax返回成功的函数里，即在ajax完成时填充数据完成后，在给标签绑定滚动条。
});
</script>
上一篇： js实现复制到剪贴板功能，兼容ie9+
下一篇： VUE插件记录