插件的使用
1. 导包
2. 写HTML结构
3. 初始化
pagination分页插件
- 官方文档:http://josecebe.github.io/twbs-pagination/
Demo:
1. 导包
<!-- 1.导包 : pagination插件是基于bootstrap封装的,所以先导入bootstrap -->
<script src="./bootstrap/js/jquery-1.12.4.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<script src="./jquery.twbsPagination.js"></script>
- 常见问题:开发中总页数是动态变化的
- 方法:
- (1)先销毁旧分页插件
- (2)重新初始化
2.HTML结构
<!-- 2.写HTML结构 -->
<ul id="pagination" class="pagination-sm"></ul>
<div>
<button id="btn">筛选按钮</button>
</div>
3.初始化
- 生成随机页模拟数据库动态数据
<script>
/* 3.初始化 */
$('#pagination').twbsPagination({
totalPages: 35,//总页数
startPage: 1,//起始页
visiblePages: 6,//可见页
first: '首页',
prev: '上一页',
next: '下一页',
last: '尾页',
onPageClick: function (event, page) {
$('#page-content').text('Page ' + page);
console.log('点击页:' + page);
}
});
$('#btn').click(function () {
//生成1-100随机数,模拟ajax返回新的总页数
let totalPage = Math.ceil(Math.random() * 100);
//(1)先销毁旧分页插件
$('#pagination').twbsPagination('destroy');
//(2)重新初始化
$('#pagination').twbsPagination({
totalPages: totalPage,//总页数
startPage: 1,//起始页
visiblePages: 6,//可见页
first: '首页',
prev: '上一页',
next: '下一页',
last: '尾页',
onPageClick: function (event, page) {
$('#page-content').text('Page ' + page);
console.log('点击页:' + page);
}
});
});
</script>
- 官网选项解释:
选项名 | 描述 | 类型 | 默认值 |
---|---|---|---|
totalPages | 页数 | 数 | 1 |
startPage | 显示在开始时的当前页面。 | 数 | 1 |
visiblePages | 最大可见页 | 数 | 5 |
initiateStartPageClick | 初始化插件时,在开始页面上按火 | 布尔 | true |
hideOnlyOnePage | 如果只有一个页面,就会隐藏所有的控件按钮。 | 布尔 | false |
href | 生成查询字符串或生成# | 布尔 | false |
pageVariable | 将被页号替换的模板。 | 弦 | '{{page}}' |
totalPagesVariable | 将被替换为总页码。 | 弦 | '{{total_pages}}' |
page | 它可用于自定义页码标签。 | 弦 | null |
first | “第一个”按钮的文本标签 | 弦 | 'First' |
prev | “前一个”按钮的标签 | 弦 | 'Previous' |
next | “下一步”按钮的标签 | 弦 | 'Next' |
last | “最后”按钮的标签 | 弦 | 'Last' |
loop | 旋转木马式分页 | 布尔 | false |
onPageClick | 单击事件回调 | 功能 | null |
paginationClass | 分页组件的根样式。 | 弦 | 'pagination' |
nextClass | “Next”按钮的CSS类(ES) | 弦 | 'page-item next' |
prevClass | 类(ES)用于“上一次”按钮。 | 弦 | 'page-item prev' |
lastClass | “最后”按钮的类(ES)。 | 弦 | 'page-item last' |
firstClass | 类(Es)用于“第一个”按钮。 | 弦 | 'page-item first' |
pageClass | 类(Es)用于页按钮。 | 弦 | 'page-item' |
activeClass | 活动按钮的(Es)类 | 弦 | 'active' |
disabledClass | 用于禁用按钮的(Es)类。 | 弦 | 'disabled' |
anchorClass | 用于按钮内锚的CSS类 | 弦 | 'page-link' |
jedate日期插件
- 官方文档:http://www.jemui.com/uidoc/jedate.html
Demo
1.导包
<!-- 1.导包 -->
<link rel="stylesheet" href="./jedate-6.5.0/test/jeDate-test.css">
<link rel="stylesheet" href="./jedate-6.5.0/skin/jedate.css">
<script src="./jedate-6.5.0/src/jedate.js"></script>
2.HTML结构
<!-- 2.写html结构 -->
<div class="jeitem">
<label class="jelabel">点击图标</label>
<div class="jeinpbox">
<input type="text" class="jeinput" id="testico" placeholder="YYYY-MM-DD">
<div class="icons jebtns" onclick="jeDate('#testico',{trigger:false,format: 'YYYY-MM-DD'})"></div>
</div>
</div>
3.初始化
<script>
/* 3.初始化 */
jeDate('#testico', {
trigger: 'click',
format: "YYYY-MM-DD",
isShow:true, //是否显示日历面板
multiPane:true,//false :双面板 true:单面板
isinitVal:true,//显示默认时间
theme:{ bgcolor:"#ffff00",color:"#ff0000", pnColor:"#ee2388"},
festival: true,//是否显示农历
});
//手动给输入框注册点击事件 : 点击输入框之后弹出日历才可以修改样式
document.querySelector('#testico').onclick = function(){
document.querySelector('.daystable').style.background = 'url("./1.gif") no-repeat center/cover';
};
</script>
- 官网核心方法(配置)
skinCell:"jedateblue", //日期风格样式,默认蓝色
format:"YYYY-MM-DD hh:mm:ss", //日期格式
minDate:"1900-01-01 00:00:00", //最小日期 或者 "1900-01-01" 或者 "10:30:25"
maxDate:"2099-12-31 23:59:59", //最大日期 或者 "2099-12-31" 或者 "16:35:25"
language:{ //多语言设置
name : "cn",
month : ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
weeks : [ "日", "一", "二", "三", "四", "五", "六" ],
times : ["小时","分钟","秒数"],
titText: "请选择日期时间",
clear : "清空",
today : "今天",
yes : "确定",
close : "关闭"
},
isShow:true, //是否显示为固定日历,为false的时候固定显示
multiPane:true, //是否为双面板,为false是展示双面板
onClose:true, //是否为选中日期后关闭弹层,为false时选中日期后关闭弹层
range:null, //如果不为空,则会进行区域选择,例如 " 至 "," ~ "," To "
trigger:"click", //是否为内部触发事件,默认为内部触发事件
position:[], //自定义日期弹层的偏移位置,长度为0,弹层自动查找位置
valiDate:[], //有效日期与非有效日期,例如 ["0[4-7]$,1[1-5]$,2[58]$",true]
isinitVal:false, //是否初始化时间,默认不初始化时间
initDate:{}, //初始化时间,加减 天 时 分
isTime:true, //是否开启时间选择
isClear:true, //是否显示清空
isToday:true, //是否显示今天或本月
festival:false, //是否显示农历节日
fixed:true, //是否静止定位,为true时定位在输入框,为false时居中定位
zIndex:2099, //弹出层的层级高度
marks:null, //给日期做标注
clearfun:function(elem, val) {}, //清除日期后的回调, elem当前输入框ID, val当前选择的值
donefun:function(obj) {}, //点击确定后的回调,obj包含{ elem当前输入框ID, val当前选择的值, date当前的日期值}
success:function(elem) {}, //层弹出后的成功回调方法, elem当前输入框ID
wangEditor富文本插件
- 官方文档:http://www.wangeditor.com/index.html
Demo:
1.导包
<!-- 1.导包 -->
<script src="wangEditor.min.js"></script>
2.HTML结构
<!-- 2.写HTML结构 -->
<div id="editor" style="width: 800px;height: 400px;"></div>
<button id="btn1">设置内容</button>
<button id="btn2">获取内容</button>
3.初始化
<script>
/* 3.js初始化 */
let E = window.wangEditor
let editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create();
//设置内容
document.querySelector('#btn1').onclick = function () {
editor.txt.html('<b>用 JS 设置的内容</b>')
};
//获取内容
document.querySelector('#btn2').onclick = function () {
console.log(editor.txt.html());
};
</script>