JavaScript插件使用笔记

最新推荐文章于 2019-11-05 18:03:46 发布

转载最新推荐文章于 2019-11-05 18:03:46 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3160411/blog/838962

文章标签：

#ui #javascript #python #ViewUI

本文介绍了多种常用的前端插件及其使用方法，包括jQueryUI日期插件、分页插件、iscroll、yxMobileSlider.js等，并提供了具体示例代码。

2019独角兽企业重金招聘Python工程师标准>>>

1.jQuery UI日期插件

依赖关系：jQuery UI依赖jQuery库，jQuery UI插件依赖jQuery UI基本库

问题：jQuery UI官网下载日期插件不能直接选择年份，需要导入以下文件

jquery.ui.datepicker-zh-CN

jquery-ui-slide.min

jquery-ui-timepicker-addon

2.jQuery分页插件

3.iscroll

4.yxMobileSlider.js

5.iosselect

//基于iscroll5
//包含文件iscroll.js/iosselect.js/iosselect.css
//github:https://github.com/zhoushengmufc/iosselect

//用法:
//创建IosSelect对象，会弹出滑动选择框
//参数2表示两列，array1和array2是数组，
var demo = new IosSelect(2,[array1,array2],
    {
        title: 'this is a title',
        itemHeight: 40,
        headerHeight:100,
        oneLevelId: array1,
        twoLevelId: array2,
        relation:[1],//此处设置一级和二级关联，不关联不需设置
        callback: function (array1, array2) {}//点击确定调用回调函数
    }
);

//array1形如,value是显示的值，parentId用于关联
var array1 = [{'id':'','value':'','parentId':''}]

6.dropload.js

//依赖jQuery
//需要引入文件jQuery.js/dropload.js/dropload.css
//用法：选取需要滑动的区域，调用dropload方法
$(".content").dropload({
    //定义上划执行的函数
    loadUpFn:function (me) {
        $.ajax({
            url: "",
            type: "get",
            data: {},
            dataType: "json",
            success: function (data) {
                me.resetload();
            },
            error: function () {
                new Toast({message: "加载出错，请重试！"})
                me.resetload();
            }
        });
    },
    //定义下划执行的函数
    loadDownFn:function (me) {
    $.ajax({
        url:"",
        type:"get",
        data:{},
        dataType:"json",
        success:function (data) {
            me.resetload();
        },
        error:function () {
            new Toast({message:"加载出错，请重试！"})
            me.resetload();
        }
    });
}
})

7.swiper.js

//包含css和js文件
var mySwiper3 = new Swiper('#menu_swiper',{
    freeMode : true,
    slidesPerView : 'auto'
});

8.toast.js

new Toast({message:'提示信息!'}).show();

插件资源:

jQuery插件库：http://www.jq22.com/

转载于:https://my.oschina.net/u/3160411/blog/838962