layui加载jquery插件,加载tagsinput插件

用layui有时候需要加载jquery的插件,可以用直接引入的方式,当然jquery也要直接引入,不能用layui.use加载。

layui的js模块加载标准与commonjs与seajs都不一样,它是有一套自己的规范,所以这个要自己改,如果不会可以去官方网站看一下,官方网站有介绍。

要使用layui.use加载需要更改一下插件,这里就用jquery的tagsinput插件来举例,因为我今天用到的就是它。

代码如下:

//文件名:tagsinput.js
layui.define('jquery',function(exports){//自己加的
var jQuery = $=layui.$;//自己加的
    var tagsinput = function($) {//这行是自己加的
//(function($) { //这行是它原来的代码注释掉 不要
    var delimiter = new Array();
    var tags_callbacks = new Array();
    $.fn.doAutosize = function(o){
    .....
        var _checkDelimiter = function(event){
        var found = false;
        if (event.which == 13) {
            return true;
        }

        if (typeof event.data.delimiter === 'string') {
            if (event.which == event.data.delimiter.charCodeAt(0)) {
                found = true;
            }
        } else {
            $.each(event.data.delimiter, function(index, delimiter) {
                if (event.which == delimiter.charCodeAt(0)) {
                    found = true;
                }
            });
        }

        return found;
    }
};//这行是自己加的
//})(jQuery);//这行是原来的,注释掉
    exports('tagsinput',new tagsinput(jQuery));//这一行是自己加的
});

加载的时候用的代码:

layui.extend({tagsinput:'path/tagsinput'});//这里需要指写js文件的路径,结尾不要加.js扩展名
//使用的时候
layui.use(['layer', 'tagsinput'], callback);
//直接使用layui.use加载它就行了

加载不止有这一种方法,我只是用这种方法方便一些,可以用它的layui.config方法来设置base路径来加设置加载,后面还是要用extend来设置模块加载名,具体的看官方文档有写。

加载好后 $('#tags').tagsInput();就可以直接这样子使用了。


还有一个方法来加载它,还是要修改插件的代码,这里粗略介绍一下,自己可以去改一下,其实也就是加个判断做成在AMD与CMD规范后再加一个layui的,简单写一个代码,具体的自己去研究。

(function (factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. 
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // Node CommonJS.    
    module.exports = factory(require('jquery'));
  }else if (window.layui && layui.define) {
      //layui
      layui.define('jquery',function (exports) {
          exports('tagsinput', new factory(layui.jquery));
        //exports('tagsinput',factory(layui.jquery));
      });
  } else {
   factory(jQuery);
  }
}(function($){//这里面就是插件的代码主体}));


大致就是这样子的了,自己感兴趣可以去试验 一下。

Tags javascript

留言(0)

评论