目前知道的插件有以下 下面有一部分我还是使用过的，但还有一部分是搜集资料了解到的 后边还会持续更新 后边我也会将这些插件的整合和全部的插件的例子放在个人github上面 欢迎star
fontAwesome 字体 已经介绍 SweetAlert 已经介绍 toastr通知 已经介绍 jquerylazyload 懒加载 已经介绍 bootstrap-switch 开关插件 已经介绍 intro.js 用户引导 已经简单介绍 jqcloud 云词 已经介绍 validate 表单验证 layPage分页插件 supersized图片全屏 iCheck 复选框美化 fullPage.js全屏滚动 zyUpload.js 上传插件 zTree.js 树插件 fullcalendar日历插件 iscroll.js手机端滚动插件 bootstrap-datetimepicker时间插件
fontAwesome 字体官方地址 http://fontawesome.dashgame.com/使用cdn 国内建议使用<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">国外建议使用 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">简单使用
<i class="fa fa-area-chart"></i>
效果
SweetAlert官方地址 https://sweetalert.bootcss.com/使用cdn
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
简单使用 在底部javascript里边添加下面的脚本
swal({
title : "支付成功",
type : "success",
confirmButtonText : "确定",
closeOnConfirm : false
});
效果（更多参数可以查看官方文档） 推荐一个博客这里对于这个插件的使用讲解的很好 https://www.cnblogs.com/lvxisha/p/9791931.html
toastr 通知cdn样式链接 <link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">脚本链接 <script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>基本参数
toastr.options = {
closeButton: false,
debug: false,
progressBar: true,
positionClass: "toast-top-center",
onclick: null,
showDuration: "300",
hideDuration: "1000",
timeOut: "2000",
extendedTimeOut: "1000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut" ,
newestOnTop: true,
preventDuplicates: true,
preventOpenDuplicates: true,
maxOpened:1
};
简单的使用
toastr.success(‘Hello world!‘, ‘Toastr fun!‘);
效果
jquerylazyload 图片懒加载 cdn js链接https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.jshttps://cdn.bootcss.com/jquery/3.4.1/jquery.min.js jquery库连接 简单使用
$(function() {
$("img").lazyload({
effect : "fadeIn", //显示效果
threshold : 200,//看到图片之前先加载200像素
placeholder:‘./1.jpg‘,//相当于占位符
event:‘sporty‘,//在灰色占位图片被点击之前阻止加载图片 或者click
//这里可以结合 定时器在5秒之后出发这个事件 $("img").trigger("sporty")
});
});
bootstrap-switch 开关插件官方地址http://www.bootcss.com/p/bootstrap-switch/ cdn
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><!--必须引入--> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
html
<input type="checkbox" name="test">
js
$("[name=‘test‘]").bootstrapSwitch()
效果
用户引导 intro.js
用于向首页使用网站或者移动应用添加漂亮的分布指南效果
需要的文件
intro.js
introjs.css
参数说明
/* 下一步按钮的显示名称 */
nextLabel: ‘Next →‘,
/* 上一步按钮的显示名称 */
prevLabel: ‘← Back‘,
/* 跳过按钮的显示名称 */
skipLabel: ‘Skip‘,
/* 结束按钮的显示名称 */
doneLabel: ‘Done‘,
/* 引导说明框相对高亮说明区域的位置 */
tooltipPosition: ‘bottom‘,
/* 引导说明文本框的样式 */
tooltipClass: ‘‘,
/* 说明高亮区域的样式 */
highlightClass: ‘‘,
/* 是否使用键盘Esc退出 */
exitOnEsc: true,
/* 是否允许点击空白处退出 */
exitOnOverlayClick: true,
/* 是否显示说明的数据步骤*/
showStepNumbers: true,
/* 是否允许键盘来操作 */
keyboardNavigation: true,
/* 是否按键来操作 */
showButtons: true,
/* 是否使用点点点显示进度 */
showBullets: true,
/* 是否显示进度条 */
showProgress: false,
/* 是否滑动到高亮的区域 */
scrollToElement: true,
/* 遮罩层的透明度 */
overlayOpacity: 0.8,
/* 当位置选择自动的时候，位置排列的优先级 */
positionPrecedence: ["bottom", "top", "right", "left"],
/* 是否禁止与元素的相互关联 */
disableInteraction: false,
/* 默认提示位置 */
hintPosition: ‘top-middle‘,
/* 默认提示内容 */
hintButtonLabel: ‘Got it‘
未完
jqcloud 云标签
cdn
https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
<link href="//cdn.bootcss.com/jqcloud/1.0.4/jqcloud.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jqcloud/1.0.4/jqcloud-1.0.4.min.js"></script>
简单使用
var arr = [‘算法‘,‘java‘,‘web前端‘,‘php服务端‘,‘linux‘];
function createobj(){
var rst = {};
var i = Math.ceil(Math.random(0,5)*10);
console.log(i);
rst.text = arr[i];
rst.weight = Math.floor(Math.random(2,10)*10);
return rst;
}
var test = [];
for(var i=0;i<30;i++){
test.push(createobj());
if(test.length == 30){
$("#cloud").jQCloud(test, {
removeOverflowing: true,
shape: "elliptic",
height: 200
});
}
}
参数
html : 设置html属性，如 obj.html = {class: "customclass", title: "A title"};
link : 设置链接，如 obj.link = {"http://blog.wange21.top"};
afterWordRender:设置这个词在渲染后调用的函数。
handlers : 一个指定将绑定到单词的事件处理程序的对象，如 obj.handlers = {click: function() { alert(“it works!”); } };
原文地址：https://www.cnblogs.com/webcyh/p/11621557.html
时间： 2024-08-02 23:02:16