jQuery插件

jQury插件

1.jQuery插件的网站

2.经典jQuery插件

① select2 下拉框搜索插件
  • 官网 https://select2.org/
  • github http://github.com/select2/select2
  • 用法

    $(dom).select()
    $(dom).select({
        width:,    // 宽度
        data:,    // 对象数组
        ajax: { // 请求远程数据
    url: "http://localhost:3000/dizhi",
    dataType: "json",
    processResults: function (data) {
    console.log(data);
    return {
      results: data
    }
        }       
        placeholder: // 提示文字
        language: "zh-CN",//汉化
        allowClear: true//允许清空
        ...
    })
② datetimepicker 时间日期插件
③ fullpage 全屏滚动插件
  • 官网 https://alvarotrigo.com/fullPage/zh/
  • github https://github.com/alvarotrigo/fullpage.js/
  • 用法

    <!-- HTML部分 -->
    <div id="fullpage">
        <div class="section"></div>
        <div class="section">
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
        <div class="section"></div>
        <div class="section"></div>
    </div>
    <!-- 自定义导航 写在包裹元素的外面 -->
    
    <!-- JS部分 -->
    <script>
        $("#fullpage").fullpage({
            navigation: true,  // 显示圆点
            sectionsColor : ['orange', 'skyblue','pink','#369'],  // 背景色
            navigationTooltips: ['第一页','第二页','第三页','第四页'],  // 提示
            anchors:['one', 'two','there','four'],  // 锚点链接
            ...
        })
    </script>
④ lazyload 图片懒加载
⑤ layer 弹窗插件
  • 官网 http://layer.layui.com/?alone
  • github https://github.com/sentsin/layer/

    layer.alert()
    layer.confirm()
    layer.msg()
    layer.tips()
    layer.load()
    layer.close()
    layer.open({
        type: ,
        title: ,
        content: , // type默认0的时候可以加文字和标签,type为1的时候可以是网址
        area:["500px","300px"], // 弹框大小
        shadeClose: true    // 点遮罩层就可以关闭
        ...
    })
    ...
⑥ nice validator
⑦ jQuery-easing
  • 官网 http://gsgd.co.uk/sandbox/jquery/easing/
  • github http://github.com/gdsmith/jquery.easing
  • 用法

    <script src="../../jqueryFile/jquery-3.4.1.js"></script>
    <script src="../easing/jquery.easing.1.3.js"></script>
    <script src="../easing/jquery.easing.compatibility.js"></script>
    <script>
        $(document).ready(function (){
            $("#btn").click(function (){
                $("#box").slideToggle(2000,"easeInExpo",function (){
                    console.log("toogle");
                })
            })
            
        })
    </script>
Last modification:October 7th, 2019 at 09:37 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment