pagination分页、jedate日期、wangEditor富文本插件使用总结

插件的使用

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>