JQuery003: $.extend自定义弹窗插件

基础补充

$.fn.extend()

定义一个实例方法。

定义:

$.fn.extend({"插件名":function(参数) {……}})

$.fn.extend({"插件名":function(参数) {……}}) 等于$.fn.插件名 = function(参数){}

调用:

$("div#id").插件名(参数)。

$.extend()

可对多个对象进行合并,

var a ={akey: avalue};

var b ={bkey: bvalue};

$.extend(a,b); => a = {akey: avalue, bkey: bvalue}

可对对象进行深度嵌套

var a ={akey: avalue, obj: {akey: avalue }};

var b ={bkey: bvalue, obj: { bkey: bvalue }};

$.extend(true,a, b); => a = {akey: avalue, bkey: bvalue, obj: { akey: avalue, bkey: bvalue}}

也可以给jQuery添加静态方法

$.extend({

a: function(参数名){return 1;};

b: function(参数名){};

});

var value= jQuery.a; => value = 1;

注意:

$.extend()合并,b的值会覆盖a的值

$.extend(true,a, b)深度合并,会保持值的长度一致,但b的值仍会覆盖a的值。

$.extend({},a, b)建议使用空对象,避免改变原变量值

功能实现-源码

定义一个实例方法

在该方法中初始化点击或其它事件,调用$.extend定义的静态函数。

$.fn.commonLayer = function(options) {
  var oSetting = {};
  var options = options || {};
  
  options.id = options.id;
  options.baseUrl = options.baseUrl;
  options.cascadeNum = options.cascadeNum || 1;
  options.layerHeader = options.layerHeader || '请选择……';
  options.isMultiple = options.isMultiple;
  options.rightColumn = options.rightColumn;
  options.dataType = options.dataType;
  options.dictType = options.dictType;
  options.dataLang = options.dataLang;
  options.dataNavigation = options.dataNavigation || [];
  options.maxSelect = options.maxSelect;
  options.isSearch = options.isSearch;
  options.searchId = options.searchId;
  options.searchClass = options.searchClass;
  options.searchUrl = options.searchUrl;
  options.searchNum = options.searchNum || 5;
  options.isOverseas = options.isOverseas;
  options.isLocal = options.isLocal || true;
  
  return this.each(function() {
    if (options) {
      $.extend(oSetting, options);
    }
    
    if ('undefined' != typeof oSetting.dataType && 'undefined' != typeof oSetting.dictType && 'undefined' != typeof oSetting.path) {
      var lang = 'undefined' != typeof oSetting.dataLang ? '_' + oSetting.dataLang : '';
      oSetting.dataUrl = oSetting.baseUrl + oSetting.path + oSetting.dataType + lang + '.' + oSetting.dictType;
    }
    
    oSetting = jQuery.OLayer.init(oSetting);
    
    if (oSetting.isMultiple) {
      jQuery.OLayer.showSavedToDoc(oSetting);
    }
    
    if (options.dataType.indexOf('functype') != -1) {
      var loadData = jQuery.OLayer.getAjaxData(oSetting);

      $.each(loadData, function(index, value) {
        var lang = 'undefined' != typeof options.dataType ? 'value' : 'eValue';
        oSetting.dataNavigation.push({code: value['code'], value: value[lang]});
      })
      oSetting.getInitCLeftData = redefGetInitCLeftData;
      oSetting.getInitCMiddleData = redefGetInitCMiddleData;
      oSetting.getRightDataEvent = redefGetRightDataEvent;
      oSetting.getInitCRightData = redefGetInitCRightData;
      oSetting.mNavigationIndex = 0;
    }
    $(this).bind('click', oSetting, oSetting.clickEvent);
  });
  
  function redefGetInitCLeftData(oSetting) {
    var lContent = '';
    $.each(oSetting.dataNavigation, function(index, value) {
      var setActive  = '';
      var setChecked = '';
      if (index == oSetting.navigationIndex) {
        setActive = 'active ';
        oSetting.navigationCurrent = value.code;
      }
      if (oSetting.initCheckedNav.indexOf(value.code) != -1) {
        setChecked = 'checked ';
      }
      lContent += '<a data-value="' + value.code + '" id="' + oSetting.data_left + '_' + value.code + '" class="' + setActive + setChecked + '" href="javascript:void(0)">' + value.value + '</a>';
    })
    $('#' + oSetting.data_left).html(lContent);
  }
  
  function redefGetInitCMiddleData(oEvent) {
    var oSetting;
    if (typeof oEvent.preventDefault == 'function') {
      oEvent.stopPropagation();
      oSetting = oEvent.data;
      oSetting.navigationCurrent = $(this).attr('data-value');
      $(this).addClass('active').siblings().removeClass('active');
    } else {
      oSetting = oEvent;
    }
    
    var loadData = jQuery.OLayer.getAjaxData(oSetting);
    var mContent = '';
    var middleData;
    $.each(loadData, function(index, value) {
      if ('undefined' != typeof oSetting.navigationCurrent && oSetting.navigationCurrent.indexOf(value.code) != -1) {
        middleData = value.items;
      }
    })
    oSetting.redefAjaxData = [];
    $.each(middleData, function(index, value) {
      var setActive  = '';
      var setChecked = '';
      if (index == oSetting.mNavigationIndex) {
        setActive = 'active ';
        oSetting.mNavigationCurrent = value.code;
      }
      if (oSetting.initCheckedData.findIndex(function(items) {return items.code.slice(0, 2) == value.code.slice(0, 2)}) != -1) {
        setChecked = 'checked ';
      }
      mContent += '<a data-value="' + value.code + '" id="' + oSetting.data_middle + '_' + value.code + '" class="' + setActive + setChecked + '" href="javascript:void(0)">' + value.value + '</a>';
      oSetting.redefAjaxData.push(value);
    })
    
    oSetting.getInitCRightData(oSetting);
    
    $('#' + oSetting.data_middle).html(mContent);
    $('#' + oSetting.data_middle).find('a').unbind('click').bind('click', oSetting, oSetting.getRightDataEvent);
      
  }
  
  function redefGetInitCRightData(oSetting) {
    var loadData = oSetting.redefAjaxData;
    var rightData = [];
    $.each(loadData, function(index, value) {
      if ('undefined' != typeof oSetting.mNavigationCurrent && oSetting.mNavigationCurrent.indexOf(value.code) != -1) {
        rightData.push(value);
      }
    })
    var rContent = jQuery.OLayer.setRightData(oSetting, rightData);
    
    $('#' + oSetting.data_right).html(rContent);
    
    
    if (!oSetting.isMultiple) {
      $('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getSelectEvent);
    } else {
      $('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getMulSelectEvent);
    }
      
  }
  
  function redefGetRightDataEvent(oEvent) {
    var oSetting = oEvent.data;
    oSetting.mNavigationCurrent = $(this).attr('data-value');
    $(this).addClass('active').siblings('a').removeClass('active');
    
    var loadData = oSetting.redefAjaxData;
    
    var rightData = [];
    $.each(loadData, function(index, value) {
      if ('undefined' != typeof oSetting.mNavigationCurrent && oSetting.mNavigationCurrent.indexOf(value.code) != -1) {
        rightData.push(value);
      }
    })
    var rContent = jQuery.OLayer.setRightData(oSetting, rightData);
    $('#' + oSetting.data_right).html(rContent);
    
    if (!oSetting.isMultiple) {
      $('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getSelectEvent);
    } else {
      $('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getMulSelectEvent);
    }
  
    oEvent.stopPropagation();
  }
  
}

定义一个静态方法

定义了系列处理函数。每一个函数对应弹窗的一部分功能,可后续新增功能。(待完善)

$.extend({
  OLayer: {
    init: function(oSetting) {
      var oInit = ['close', 'cancel', 'save', 'search', 'store', 'saved', 'warn', 'delete', 'layer', 'data_left', 'data_middle', 'data_right', 'code', 'text'];
      
      $.each(oInit, function(i, value) {
        oSetting[value] = oSetting.id + '_' + value;
      });
      
      var oFunctionInit = {
        'open': jQuery.OLayer.open,
        'setMask': jQuery.OLayer.setMask,
        'beforeOpen': jQuery.OLayer.beforeOpen,
        'clickEvent': jQuery.OLayer.getShowLayer,
        'closeEvent': jQuery.OLayer.closeEvent,
        'getInitLayer': jQuery.OLayer.getInitLayer,
        'getInitTop': jQuery.OLayer.getInitTop,
        'getInitBottom': jQuery.OLayer.getInitBottom,
        'getInitCenter': jQuery.OLayer.getInitCenter,
        'getInitCLeftData': jQuery.OLayer.getInitCLeftData,
        'getInitCMiddleData': jQuery.OLayer.getInitCMiddleData,
        'getInitCRightData': jQuery.OLayer.getInitCRightData,
        'getRightDataEvent': jQuery.OLayer.getRightDataEvent,
      };
      
      $.each(oFunctionInit, function(i, value) {
        if (('' == oSetting[i]) || ('undefined' == typeof oSetting[i])) {
          oSetting[i] = value;
        }
      });
      
      oSetting.navigationIndex = 0;
      
      return oSetting;
    },
    getShowLayer: function(oEvent) {
      oEvent.stopPropagation();
      var oSetting = oEvent.data;
      
      var separator = /\+|\,/;
      
      var checkedCode = $('#' + oSetting.code).val();
      
      if (checkedCode == '' || 'undefined' == typeof checkedCode) {
        
        var checkedText = $('#' + oSetting.text).val();
        if (checkedText != '' && !oSetting.isMultiple) {
          oSetting.oCheckedCode = [''];
          oSetting.initCheckedData = jQuery.OLayer.queryCheckedData(oSetting).value;
          oSetting.initCheckedNav = jQuery.OLayer.queryCheckedData(oSetting).nav;
        } else {
          oSetting.initCheckedData = [];
          oSetting.initCheckedNav = [];
        }
      } else {
        oSetting.oCheckedCode = checkedCode.split(separator)
        oSetting.initCheckedData = jQuery.OLayer.queryCheckedData(oSetting).value;
        oSetting.initCheckedNav = jQuery.OLayer.queryCheckedData(oSetting).nav;
      }
      jQuery.OLayer.resetNavigation(oSetting);
      jQuery.OLayer.getInitLayer(oSetting);
    },
    getInitLayer: function(oSetting) {
      var initBottom = oSetting.isMultiple ? jQuery.OLayer.getInitBottom(oSetting) : '';
      if (!oSetting.layerElement) {
        oSetting.layerElement = $('<div id="' + oSetting.layer + '" class="popup_select" style="display:none;">' + jQuery.OLayer.getInitTop(oSetting) + jQuery.OLayer.getInitCenter(oSetting) + initBottom + '</div>' + jQuery.OLayer.setMask()).appendTo('body');
      }
      switch (oSetting.cascadeNum) {
        case 3:
          oSetting.getInitCLeftData(oSetting);
          oSetting.getInitCMiddleData(oSetting);
          break;
        case 2:
          oSetting.getInitCLeftData(oSetting);
          break;
      }
      
      if (oSetting.initCheckedData.length > 0 && oSetting.isMultiple) {
        var hasChecked = jQuery.OLayer.initStorage(oSetting);
        jQuery.OLayer.getInitStorage(oSetting);
        $('#' + oSetting.store).find('.sitem').html(hasChecked);
        $('#' + oSetting.store).find('.snum .count').text(oSetting.initCheckedData.length);
      } else {
        $('#' + oSetting.store).remove();
      }
      oSetting.getInitCRightData(oSetting);
      jQuery.OLayer.open(oSetting);
    },
    setMask: function() {
      return '<div class="popup_mask"></div>';
    },
    getInitTop: function(oSetting) {
      var popupTop = '<div class="popup_top clear">';
      if ('undefined' != typeof oSetting.layerHeader) {
        popupTop += '<p class="h">' + oSetting.layerHeader + '</p>';
      }
      if (oSetting.isSearch) {
        popupTop += jQuery.OLayer.setSearch(oSetting);
      }
      popupTop += '<a href="javascript:void(0)" class="popup_close" id="'+ oSetting.close +'"></a></div>';
      return popupTop;
    },
    setSearch: function(oSetting) {
      var sContent = '<p class="pop_search">';
      sContent += '<input id="' + oSetting.search + '" class="key_input" type="text" maxlength="200" autocomplete="off" placeholder="请输入关键字">';
      sContent += '<em class="search_btn"></em>';
      sContent += '</p>';
      return sContent;
    },
    getInitCenter: function(oSetting) {
      var popupCenter = '<div class="popup_center clear">';
      var rWidth;
      switch (oSetting.cascadeNum) {
        case 3:
          if ('undefined' != typeof oSetting.dataNavigation) popupCenter += '<div id="' + oSetting.data_left + '" class="c_left"></div>';
          popupCenter += '<div id="' + oSetting.data_middle + '" class="c_left c_left_m"></div>';
          rWidth = 480;
          break;
        case 2:
          if ('undefined' != typeof oSetting.dataNavigation) popupCenter += '<div id="' + oSetting.data_left + '" class="c_left"></div>';
          rWidth = 680;
          break;
      } 
      popupCenter += '<div id="' + oSetting.data_right + '" class="c_right" style="width: ' + rWidth + 'px"></div>';
      popupCenter += '</div>';
      return popupCenter;
    },
    getInitBottom: function(oSetting) {
      var popupBottom = '<div class="popup_bottom">';
      popupBottom += '<a id="' + oSetting.cancel + '" class="btn btn_cancel" href="javascript:void(0)">取消</a><a id="' + oSetting.save + '" class="btn btn_ok" href="javascript:void(0)">确定</a>';
      popupBottom += '</div>';
      return popupBottom;
    },
    getInitCLeftData: function(oSetting) {
      var lContent = '';
      $.each(oSetting.dataNavigation, function(index, value) {
        var navigation = '';
        var setChecked = '';
        $.each(value[oSetting.dataLang], function(index, value) {
          navigation += value + ' ';
          if (oSetting.initCheckedNav.indexOf(value) != -1) {
            setChecked = 'checked ';
          }
        })
        var setActive = '';
        if (index == oSetting.navigationIndex) {
          setActive = 'active ';
          oSetting.navigationCurrent = value[oSetting.dataLang].join('');
        }
        
        lContent += '<a data-value="' + navigation.replace(/\s*/g,"") + '" id="' + oSetting.data_left + '_' + navigation.replace(/\s*/g,"") + '" class="' + setActive + setChecked + '" href="javascript:void(0)">' + navigation.trim() + '</a>';
      })
      $('#' + oSetting.data_left).html(lContent);
    },
    getInitCMiddleData: function(oSetting) {},
    getInitCRightData: function(oSetting) {
      var loadData = jQuery.OLayer.getAjaxData(oSetting);
      var rightData = [];
      $.each(loadData, function(index, value) {
        if ('undefined' != typeof oSetting.navigationCurrent && oSetting.navigationCurrent.indexOf(value.title) != -1) {
          rightData.push(value);
        }
      })
      var rContent = jQuery.OLayer.setRightData(oSetting, rightData);
      $('#' + oSetting.data_right).html(rContent);
    },
    setRightData: function(oSetting, initData) {
      var rContent = '';
      $.each(initData, function(index, value) {
        if (oSetting.dataType == 'area') {
          rContent += '<table><tr><th colspan="' + oSetting.rightColumn + '"><span>' + value.title + '</span></th></tr>';
        } else {
          rContent += '<table>';
        }
        $.each(value.items, function(index, value) {
          if (index % oSetting.rightColumn == 0) {
            rContent += '<tr>';
          }
          if ('undefined' != typeof oSetting.initCheckedData && oSetting.initCheckedData.findIndex(function(item) {return item.code === value.code}) != -1) {
              rContent += '<td><a id="' + oSetting.data_right + '_' + value.code + '" class="checked" data-value="' + value.code + '" data-nav="' + oSetting.navigationCurrent + '" href="javascript:void(0);">' + value.value + '</a></td>';
          } else {
            rContent += '<td><a id="' + oSetting.data_right + '_' + value.code + '" data-value="' + value.code + '" data-nav="' + oSetting.navigationCurrent + '" href="javascript:void(0);">' + value.value + '</a></td>';
          }
          if (index % oSetting.rightColumn == oSetting.rightColumn - 1) {
            rContent += '</tr>';
          }
        })
        rContent += '</table>'
      })
      return rContent;
    },
    getAjaxData: function(oSetting) {
      var data = {};
      if ('undefined' != typeof oSetting.dataUrl && oSetting.isLocal) {
        $.ajax({
          url: oSetting.dataUrl,
          async: false,
          dataType: "json",
          success: function(result) {
            switch (oSetting.dataType) {
              case 'area':
                var areaType = [];
                var tempResult = [];
                $.each(oSetting.dataNavigation, function(index, nav) {
                  if (areaType.indexOf(nav.type) == -1) {
                    areaType.push(nav.type)
                  }
                })
                
                $.each(result, function(index, value) {
                  if (value.title.indexOf('全国') != -1) {
                    value.items.unshift({
                      "code": "",
                      "value": "全国",
                      "hasSubArea": false
                    })
                    for (var i = 0; i < value.items.length; i++) {
                      var item = value.items[i];
                      if (item.code == '330000' || item.code == '340000' || item.code == '350000') {
                        value.items.splice(i, 1);
                        i--;
                      }
                    }
                  }
                  if (areaType.indexOf(value.type) != -1) {
                    tempResult.push(value);
                  }
                })
                data = tempResult;
                break;
              default:
                data = result.items;
                break;
            }
          }
        })
      }
      return data;
    },
    queryCheckedData: function(oSetting) {
      var cNav = [];
      var cData = [];
      var dict = jQuery.OLayer.getAjaxData(oSetting);
      var navreg;
      
      $.each(oSetting.oCheckedCode, function(index, code) {
        $.each(dict, function(index, nav) {
          switch (oSetting.dataType) {
            case 'area':
              if (nav.type == '0' || nav.type == '3' ||  nav.type == '4') {
                $.each(nav.items, function(index, value) {
                  if (value.code == code) {
                    cData.push(value);
                    navreg = nav.title;
                  }
                })
                if (navreg == nav.title) {
                  cNav.push(nav.title);
                }
              }
              break;
            default:
              $.each(nav.items, function(index, snav) {
                $.each(snav.items, function(index, value) {
                  if (value.code == code) {
                    cData.push(value);
                    navreg = nav.code;
                  }
                })
              })
              if (navreg == nav.code) {
                cNav.push(nav.code);
              }
              break;
          }
        })
      })
      return {nav: cNav, value: cData};
    },
    beforeOpen: function(oSetting) {
      switch (oSetting.cascadeNum) {
        case 3:
          $("#" + oSetting.data_left).find('a').unbind('click').bind('click', oSetting, oSetting.getInitCMiddleData);
          $("#" + oSetting.data_middle).find('a').unbind('click').bind('click', oSetting, oSetting.getRightDataEvent);
          break;
        case 2:
          $("#" + oSetting.data_left).find('a').unbind('click').bind('click', oSetting, jQuery.OLayer.getRightDataEvent);
          break;
      }
      
      if (oSetting.isSearch) {
        oSetting = jQuery.oSelect.init(oSetting);
        oSetting.popupEvent = true;
        $('#' + oSetting.search).bind('focus', oSetting, jQuery.oSelect.showLayer);
        $('#' + oSetting.search).bind('input propertychange change', oSetting, jQuery.oSelect.showAssociation);
      }
      
      if (!oSetting.isMultiple) {
        $('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getSelectEvent);
      } else {
        $('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getMulSelectEvent);
        $("#" + oSetting.save).unbind('click').bind('click', oSetting, jQuery.OLayer.save);
      }
      $("#" + oSetting.close).unbind('click').bind('click', oSetting, jQuery.OLayer.closeEvent);
      $("#" + oSetting.cancel).unbind('click').bind('click', oSetting, jQuery.OLayer.closeEvent);
      $('#' + oSetting.store).find('.sitem a').unbind('click').bind('click', oSetting, jQuery.OLayer.deleteStorage);
    },
    closeEvent: function(oEvent) {
      oEvent.stopPropagation();
      
      var oSetting = oEvent.data;
      
      oSetting.initCheckedData = jQuery.OLayer.queryCheckedData(oSetting).value;
      oSetting.initCheckedNav = jQuery.OLayer.queryCheckedData(oSetting).nav;
      
      if (oSetting.isMultiple && oSetting.initCheckedData.length == 0) {
        $('#' + oSetting.store).remove();
      }
      
      jQuery.OLayer.close(oSetting);
      return false;
    },
    open: function(oSetting) {
      jQuery.OLayer.beforeOpen(oSetting);
      oSetting.layerElement.show();
      jQuery.OLayer.setPosition(oSetting.layerElement);
    },
    close: function(oSetting) {
      oSetting.layerElement.hide();
    },
    getRightDataEvent: function(oEvent) {
      var oSetting = oEvent.data;
      oSetting.navigationCurrent = $(this).attr('data-value').split(' ').join('');
      $(this).addClass('active').siblings('a').removeClass('active');
      
      var loadData = jQuery.OLayer.getAjaxData(oSetting);
      
      var rightData = [];
      $.each(loadData, function(index, value) {
        if ('undefined' != typeof oSetting.navigationCurrent && oSetting.navigationCurrent.indexOf(value.title) != -1) {
          rightData.push(value);
        }
      })
      var rContent = jQuery.OLayer.setRightData(oSetting, rightData);
      $('#' + oSetting.data_right).html(rContent);
      
      if (!oSetting.isMultiple) {
        $('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getSelectEvent);
      } else {
        $('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getMulSelectEvent);
      }

      oEvent.stopPropagation();
    },
    getSelectEvent: function(oEvent) {
      var oSetting = oEvent.data;
      var selectedCode = $(this).attr('data-value');
      var selectedText = $(this).text();
      
      $('#' + oSetting.code).val(selectedCode);
      $('#' + oSetting.text).val(selectedText);
      jQuery.OLayer.close(oSetting);
      
      oEvent.stopPropagation();
    },
    getMulSelectEvent: function(oEvent) {
      var oSetting = oEvent.data;
      
      var selectedData = {code: $(this).attr('data-value'), value: $(this).text()};
      var selectedNav = jQuery.OLayer.queryDataNavigation(oSetting, selectedData.code).nav;
      
      if (oSetting.initCheckedData.length == 0) jQuery.OLayer.getInitStorage(oSetting);
      
      if (oSetting.initCheckedData.findIndex(function(value) {return value.code === selectedData.code}) == -1) {
        if (oSetting.initCheckedData.length < oSetting.maxSelect) {
          $(this).addClass('checked');
          if (oSetting.initCheckedNav.indexOf(selectedNav) == -1) {
            oSetting.initCheckedNav.push(selectedNav);
          }
          oSetting.initCheckedData.push(selectedData);
          jQuery.OLayer.addStorage(oSetting, selectedData, selectedNav);
          jQuery.OLayer.resetNavigation(oSetting);
        } else {
          jQuery.OLayer.setOverWarn(oSetting);
          setTimeout(function() {
            oSetting.layerWarn.remove();
          }, 3000);
        }
      } else {
        oSetting.initCheckedData.splice(oSetting.initCheckedData.findIndex(function(value) {return value.code === selectedData.code}), 1);
        $(this).removeClass('checked');
        $('#' + oSetting.store).find('.snum .count').html(oSetting.initCheckedData.length);
        $('#' + oSetting.store + selectedData.code).remove();
        
        if (oSetting.initCheckedData.length == 0) {
          $('#' + oSetting.store).remove();
        }
        oSetting.initCheckedNav.splice(oSetting.initCheckedNav.findIndex(function(value) {return value == selectedNav}), 1);
        jQuery.OLayer.resetNavigation(oSetting);
      }
      oEvent.stopPropagation();
    },
    save: function(oEvent) {
      var oSetting = oEvent.data;
      
      var cCode = [];
      var cValue = [];
      $.each(oSetting.initCheckedData, function(index, value) {
        cCode.push(value.code);
        cValue.push(value.value);
      })
      
      oSetting.oCheckedCode = cCode;
      $('#' + oSetting.code).val(cCode.join(','));
      $('#' + oSetting.text).val(cValue.join(','));
      jQuery.OLayer.showSavedToDoc(oSetting);
      jQuery.OLayer.close(oSetting);
      
      oEvent.stopPropagation();
    },
    getInitStorage: function(oSetting) {
      if ($("#" + oSetting.store).length == 0) {
        var sContent = '<div class="popup_storage clear" id="' + oSetting.store + '"><p class="sitem clear"></p><p class="snum">已选:<em class="count"></em>/' + oSetting.maxSelect + '</p></div>';
        $('#' + oSetting.layer).find('.popup_top').after(sContent);
      }
    },
    addStorage: function(oSetting, selectedData, selectedNav) {
      var sContent = '<a href="javascript:void(0)" data-value="' + selectedData.code + '" data-nav="' + selectedNav + '" id="' + oSetting.store + selectedData.code + '">' + selectedData.value + '</a>';
      $('#' + oSetting.store).find('.sitem').append(sContent);
      $('#' + oSetting.store).find('.snum .count').text(oSetting.initCheckedData.length);
      $('#' + oSetting.store).find('.sitem a').unbind('click').bind('click', oSetting, jQuery.OLayer.deleteStorage);
    },
    initStorage: function(oSetting) {
      var sContent = '';
      $.each(oSetting.initCheckedData, function(index, sitem) {
        var navigationCurrent = jQuery.OLayer.queryDataNavigation(oSetting, sitem.code).nav;
        sContent += '<a href="javascript:void(0)" data-value="' + sitem.code + '" data-nav="' + navigationCurrent + '" id="' + oSetting.store + sitem.code + '">' + sitem.value + '</a>';
      })
      
      return sContent;
    },
    deleteStorage: function(oEvent) {
      oEvent.stopPropagation();
      var oSetting = oEvent.data;
      var dData = {code: $(this).attr('data-value'), value: $(this).text()};
      var dNav = $(this).attr('data-nav');
      
      var dBefore = oSetting.initCheckedData;
      dBefore.splice(dBefore.findIndex(function(items) {return items.code === dData.code}), 1);
      
      $(this).remove();
      $('#' + oSetting.store).find('.snum .count').html(dBefore.length);
      $('#' + oSetting.data_right + '_' + dData.code).removeClass('checked');
      
      oSetting.initCheckedData = dBefore;
      jQuery.OLayer.resetNavigation(oSetting);
      
      if (oSetting.initCheckedData.length == 0) {
        $('#' + oSetting.store).remove();
      }
    },
    resetNavigation: function(oSetting) {
      var matchNav = [], matchSub = [];
      $.each(oSetting.initCheckedData, function(index, sitem) {
        var navCurrent = jQuery.OLayer.queryDataNavigation(oSetting, sitem.code).nav;
        var subCurrent = jQuery.OLayer.queryDataNavigation(oSetting, sitem.code).snav;
        if (matchNav.indexOf(navCurrent) == -1 && typeof navCurrent != 'undefined') matchNav.push(navCurrent);
        if (matchSub.indexOf(subCurrent) == -1 && typeof subCurrent != 'undefined') matchSub.push(subCurrent);
      })
      
      var getNav = $('#' + oSetting.data_left).find('a');
      $.each(getNav, function(index, e) {
        var navCode = $(e).attr('data-value');
        if (matchNav.indexOf(navCode) == -1) {
          $('#' + oSetting.data_left + '_' + navCode).removeClass('checked');
        } else {
          $('#' + oSetting.data_left + '_' + navCode).removeClass('checked').addClass('checked');
        }
      })
      
      if ($('#' + oSetting.data_middle).length > 0) {
        var getSub = $('#' + oSetting.data_middle).find('a');
        $.each(getSub, function(index, e) {
          var subCode = $(e).attr('data-value');
          if (matchSub.indexOf(subCode) == -1) {
            $('#' + oSetting.data_middle + '_' + subCode).removeClass('checked');
          } else {
            $('#' + oSetting.data_middle + '_' + subCode).removeClass('checked').addClass('checked');
          }
        })
      }
    },
    deleteSavedToDoc: function(oEvent) {
      oEvent.stopPropagation();
      var oSetting = oEvent.data;
      var dData = {code: $(this).attr('data-value'), value: $(this).text()};
      var dNav = $(this).attr('data-nav');
      
      var dBefore = oSetting.initCheckedData;
      dBefore.splice(dBefore.findIndex(function(items) {return items.code === dData.code}), 1);
      
      $(this).remove();
      var separator = /\+|\,/;
      var dAfterCode = $('#' + oSetting.code).val().split(separator);
      var dAfterText = $('#' + oSetting.text).val().split(separator);
      dAfterCode.splice(dAfterCode.findIndex(function(value) {return value == dData.code}), 1);
      dAfterText.splice(dAfterText.findIndex(function(value) {return value == dData.value}), 1);
      
      $('#' + oSetting.code).val(dAfterCode.join(','));
      $('#' + oSetting.text).val(dAfterText.join(','));
      
    },
    showSavedToDoc: function(oSetting) {
      var sContent = '';
      var separator = /\+|\,/;
      var wCode = $('#' + oSetting.code);
      if (wCode.val() != '') {
        oSetting.oCheckedCode = wCode.val().split(separator);
        oSetting.initCheckedData = jQuery.OLayer.queryCheckedData(oSetting).value;
      }
      $.each(oSetting.initCheckedData, function(index, sitem) {
        var navCurrent = jQuery.OLayer.queryDataNavigation(oSetting, sitem.code).nav;
        sContent += '<a href="javascript:void(0)" data-value="' + sitem.code + '" data-nav="' + navCurrent + '" id="' + oSetting.saved + sitem.code + '">' + sitem.value + '</a>';
      })
      
      wCode.parent().siblings('.sel_val').html(sContent);
      wCode.parent().siblings('.sel_val').find('a').unbind('click').bind('click', oSetting, jQuery.OLayer.deleteSavedToDoc);
    },
    queryDataNavigation: function(oSetting, code) {
      var matchNav, matchNavSec;
      var tempNav;
      var dict = jQuery.OLayer.getAjaxData(oSetting);
      $.each(dict, function(index, nav) {
        switch (oSetting.dataType) {
          case 'area':
            if (nav.type == '0' || nav.type == '3' ||  nav.type == '4') {
              if (nav.items.findIndex(function(items) {return items.code == code}) != -1) {
                tempNav = nav.title;
              }
            }
            break;
          default:
            if (oSetting.cascadeNum == 3) {
              $.each(nav.items, function(index, snav) {
                if (snav.items.findIndex(function(items) {return items.code == code}) != -1) {
                  matchNavSec = snav.code;
                  matchNav = nav.code;
                }
              })
            }
            break;
        }
      })
      
      if (oSetting.dataType == 'area') {
        $.each(oSetting.dataNavigation, function(index, nav) {
          if (nav[oSetting.dataLang].indexOf(tempNav) != -1) {
            matchNav = nav[oSetting.dataLang].join('');
          }
        })
      }
      return {nav: matchNav, snav: matchNavSec};
    },
    setOverWarn: function(oSetting) {
      oSetting.layerWarn = $('<div class="popup_toast" id="' + oSetting.warn + '"><p class="warn">最多只能选择' + oSetting.maxSelect + '个哦~</p></div>').appendTo('body');
      jQuery.OLayer.setPosition(oSetting.layerWarn);
    },
    setPosition: function (oLayerElement) {
      var oLayer = $(oLayerElement[0]);
      
      var ww = $(window).width();
      var wh = $(window).height();
      var ow = oLayer.width();
      var oh = oLayer.height();
      var dl = oLayer.css('position') != 'fixed' ? $(document).scrollLeft() : 0;
      var dt = oLayer.css('position') != 'fixed' ? $(document).scrollTop() : 0;
      
      var left = (ww - ow) / 2 + dl;
      var top = (wh - oh) * 382 / 1000 + dt; //黄金比例
      oLayer.css({'left': Math.max(parseInt(left), dl), 'top': Math.max(parseInt(top), dt)});
    },
  }
})

调用定义的实例方法

$(function() {
    /*地区选择弹框*/
    $("#workCitySel").commonLayer({
      id: 'workCity',
      layerHeader: '选择城市',
      isMultiple: true,
      cascadeNum: 2,
      rightColumn: 4,
      isSearch: false,
      dataType: 'area',
      dictType: 'json',
      dataNavigation: areaDL,
      baseUrl: window.location.origin,
      path: 'scripts/dict/d_',
      method: 'get',
      dataLang: 'c',
      maxSelect: 3,
    });
    /*职位选择弹框*/
    $("#workFuncSel").commonLayer({
      id: 'workFunc',
      layerHeader: '选择职位',
      isMultiple: true,
      cascadeNum: 3,
      rightColumn: 2,
      isSearch: true,
      isLocal: true,
      dataType: 'functype3',
      dictType: 'json',
      baseUrl: window.location.origin,
      path: 'scripts/dict/d_',
      method: 'get',
      maxSelect: 3,
    });
  });

该方法待完善改进,仅为个人学习。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值