天天看点
返回

js城市选择器组件

     
  1.  KISSY.add(function(S,Base,Template,Switchable,Data){        
    2.       
  2.      var $ = S.all,        
    3.       
  3.          Evt = S.Event,        
    4.       
  4.          IO = S.io;        
    5.       
  5.      //首字符排序        
    6.       
  6.      var  wordsList;        
    7.       
  7.      var NewCitySelector = function(id,cfg){        
    8.       
  8.          this.init(id,cfg);        
    9.       
  9.      };        
    10.               
  10.      function findCityByCityId(cityId){        
    11.       
  11.          return __findByProp(0,cityId);        
    12.       
  12.      }        
    13.           
  13.      function findCityByCityName(cityName){        
    14.       
  14.          return __findByProp(1,cityName);        
    15.       
  15.      }        
    16.           
  16.      function __findByProp(index,val){        
    17.       
  17.          for(var i in Data){        
    18.       
  18.              for(var j in Data[i]){        
    19.       
  19.                  if(val == Data[i][j][index]){        
    20.       
  20.                      return {        
    21.       
  21.                          cityId:Data[i][j][0],        
    22.       
  22.                          cityName:Data[i][j][1],        
    23.       
  23.                          category:i        
    24.       
  24.                      };        
    25.       
  25.                  }        
    26.       
  26.              }        
    27.       
  27.          }        
    28.       
  28.      }        
    29.           
  29.      /**        
    30.       
  30.          判断元素在元素内部        
    31.       
  31.        **/        
    32.       
  32.        function isIn(t,p){        
    33.       
  33.          var $t = $(t),        
    34.       
  34.              $p = $(p);        
    35.           
  35.          if($t[0] && $p[0] && $t[0] === $p[0]){        
    36.       
  36.              return true;        
    37.       
  37.          }        
    38.           
  38.          if($($t,$p)[0]){        
    39.       
  39.              return true;        
    40.       
  40.          }        
    41.       
  41.        }        
    42.           
  42.      var CLS_PREFIX = "ks-newcityselector-";        
    43.       
  43.      var CONTAINER_TPL = "<div class='"+CLS_PREFIX+"container'>" + "</div>";        
    44.       
  44.      var INNER_CONTAINER_TPL = "`wordsList``citiesList`";        
    45.       
  45.      // var WORDS        
    46.       
  46.      S.extend(NewCitySelector,Base,{        
    47.       
  47.          init:function(id,cfg){        
    48.       
  48.              var self = this;        
    49.       
  49.              var defaultCfg = {        
    50.       
  50.                  autoOpen:false,        
    51.       
  51.                  cityId:330100,        
    52.       
  52.                  css:{        
    53.       
  53.                      "position":"absolute",        
    54.       
  54.                      "z-index":"9999"        
    55.       
  55.                  },        
    56.       
  56.                  target:$(id),        
    57.       
  57.                  tpl:INNER_CONTAINER_TPL,        
    58.       
  58.                  slideWidth:672        
    59.       
  59.              };        
    60.       
  60.              if(!id || !$(id)[0]){        
    61.       
  61.                  S.log("no container");        
    62.       
  62.                  return;        
    63.       
  63.              }        
    64.           
  64.              self.$el = $(id);         
    65.           
  65.              self.cfg = S.mix(defaultCfg,cfg,undefined,undefined,true);        
    66.           
  66.              self.render();        
    67.       
  67.          },        
    68.       
  68.          render:function(){        
    69.       
  69.              var self = this;        
    70.       
  70.              self.$pop = $(CONTAINER_TPL).insertAfter(self.$el);        
    71.       
  71.              self.$pop.css(self.cfg.css);        
    72.       
  72.              wordsList = [];        
    73.       
  73.              var citiesListHTML  = "<div class="+CLS_PREFIX+"citycontainer"+"><div class='scroll'>";        
    74.       
  74.              for(var i in Data){        
    75.       
  75.                  wordsList.push(i);        
    76.       
  76.                  var citiesHTML =  self.getListHTML(Data[i],'city');        
    77.       
  77.                  citiesListHTML += "<div class="+CLS_PREFIX+"tab-content"+" tab="+i+">" + citiesHTML +"</div>"        
    78.       
  78.              }        
    79.       
  79.              citiesListHTML += "</div></div>"        
    80.       
  80.              var wordsListHTML = self.getListHTML(wordsList,'words');        
    81.       
  81.              var tplData = {        
    82.       
  82.                  wordsList : wordsListHTML,        
    83.       
  83.                  citiesList : citiesListHTML        
    84.       
  84.              };        
    85.       
  85.              self.$pop = self.$pop.html(Template("<div class='"+CLS_PREFIX+"inner'>" + self.cfg.tpl + "</div>").render(tplData));        
    86.           
  86.              self.$cityContainer = $("."+CLS_PREFIX+"citycontainer",self.$pop);        
    87.           
  87.              self.$wordListContainer = $("."+CLS_PREFIX+"words",self.$pop);        
    88.           
  88.              self.bindEvt();        
    89.           
  89.              self.autoOpen && self.show();        
    90.           
  90.              S.log(self)        
    91.       
  91.          },        
    92.       
  92.          bindEvt:function(){        
    93.       
  93.              var self = this;        
    94.           
  94.              var timeout;        
    95.           
  95.              self.$el.on("click",function(){        
    96.       
  96.                  self.show();        
    97.       
  97.              });        
    98.           
  98.              $("li",$("." + CLS_PREFIX + "words",self.$pop)).on("click",function(e){        
    99.       
  99.                  e.preventDefault();        
    100.       
  100.                  var $li = $(e.currentTarget);        
    101.       
  101.                  var stype = $li.attr("stype");        
    102.       
  102.                  self.switchTo(stype);        
    103.       
  103.              });        
    104.       
  104.              //自动隐藏覆层        
    105.       
  105.              self.$pop.on("mouseleave",function(e){        
    106.       
  106.                  e.stopPropagation();        
    107.       
  107.                  self.isOnPop = false;        
    108.       
  108.                  clearTimeout(timeout);        
    109.       
  109.                  timeout = setTimeout(function(){self.hide()},1000);        
    110.       
  110.              });        
    111.           
  111.              self.$pop.on("mousemove",function(e){        
    112.       
  112.                  e.stopPropagation();        
    113.       
  113.                  self.isOnPop = 1;        
    114.       
  114.              });        
    115.           
  115.              self.$el.on("mousemove",function(e){        
    116.       
  116.                  e.stopPropagation();        
    117.       
  117.                  self.isOnPop = 1;        
    118.       
  118.              });        
    119.           
  119.              $("li",$("." + CLS_PREFIX + "city",self.$pop)).on("click",function(e){        
    120.       
  120.                  e.preventDefault();        
    121.       
  121.                  var $a = $("a",$(e.currentTarget));        
    122.       
  122.                  self.onSelect({cityName:$a.text(),cityId:$a.attr("cityId")});        
    123.       
  123.              });        
    124.           
  124.              $("body").on("click",function(e){        
    125.       
  125.                  if(!isIn($(e.target),self.$pop) && !isIn($(e.target),self.$el)){        
    126.       
  126.                      self.isOnPop = false;        
    127.       
  127.                      self.hide();        
    128.       
  128.                      self.fire("blur");        
    129.       
  129.                  }        
    130.       
  130.              });        
    131.       
  131.          },        
    132.       
  132.          switchTo:function(stype,cb){        
    133.       
  133.              var self = this,        
    134.       
  134.                  index,        
    135.       
  135.                  slideWidth = self.cfg.slideWidth;        
    136.       
  136.              index = S.isNumber(stype) ? stype - 0 : self.indexOfArray(stype,wordsList);        
    137.       
  137.              $(".scroll",self.$pop).animate({marginLeft:-index * slideWidth},0.5,"easeOut",cb)        
    138.       
  138.              $("li",$("."+CLS_PREFIX+"words")).item(index-0).addClass("cur").siblings().removeClass("cur");        
    139.       
  139.              self.set("category",stype);        
    140.       
  140.          },        
    141.       
  141.          /**        
    142.       
  142.              TODO 设置city         
    143.       
  143.          **/        
    144.       
  144.          setCity:function(city){        
    145.       
  145.              var self = this,        
    146.       
  146.                  cityObj;        
    147.       
  147.              if(city){        
    148.       
  148.                  if(city > 0){        
    149.       
  149.                      cityObj = findCityByCityId(city);        
    150.       
  150.                  }else{        
    151.       
  151.                      cityObj = findCityByCityName(city);        
    152.       
  152.                  }        
    153.       
  153.                  if(cityObj){        
    154.       
  154.                      self.switchTo(cityObj.category);        
    155.       
  155.                      self.set("currentCity",cityObj);        
    156.       
  156.                      self.set("cityId",cityObj.cityId);        
    157.       
  157.                      self.set("cityName",cityObj.cityName);        
    158.       
  158.                      self.set("category",cityObj.category);        
    159.       
  159.                      // var index = self.indexOfArray(cityObj.category,wordsList);        
    160.       
  160.                      // alert(index)        
    161.       
  161.                      // $("li",self.$cityContainer).item(index)        
    162.       
  162.                      $(self.cfg.target).html(cityObj.cityName);        
    163.       
  163.                  }        
    164.           
  164.              }        
    165.       
  165.          },        
    166.       
  166.          indexOfArray:function(el,ary){        
    167.       
  167.              for(var i in ary){        
    168.       
  168.                  if(el == ary[i]) return i || 0;        
    169.       
  169.              }        
    170.       
  170.          },        
    171.       
  171.          show:function(){        
    172.       
  172.              var self = this;        
    173.           
  173.              self.$pop.fadeIn(0.3);        
    174.           
  174.          },        
    175.       
  175.          hide:function(){        
    176.       
  176.              var self = this;        
    177.           
  177.              !self.isOnPop && self.$pop.fadeOut(0.3);        
    178.       
  178.          },        
    179.       
  179.          getListHTML:function(ary,cls){        
    180.       
  180.              if(!ary || !cls) return "";        
    181.       
  181.              var html = "<ul class=" + CLS_PREFIX + cls + ">";        
    182.       
  182.              for(var i in ary){        
    183.       
  183.                  if(S.isArray(ary[i])){        
    184.       
  184.                      html += '<li><a href="#" cityId='+ary[i][0]+' title='+ary[i][1]+' >' + ary[i][1] + '</a></li>';        
    185.       
  185.                  }else{        
    186.       
  186.                      if(ary[i] == "hot"){        
    187.       
  187.                          html += '<li stype="hot"><a href="#">热门</a></li>';          
    188.       
  188.                      }else{        
    189.       
  189.                          html += '<li stype='+ ary[i] +'><a href="#">' + ary[i] + '</a></li>';        
    190.       
  190.                      }        
    191.       
  191.                  }        
    192.       
  192.              }        
    193.       
  193.              return html + '</ul>';        
    194.       
  194.          },        
    195.       
  195.          onSelect:function(e){        
    196.       
  196.              var self = this;        
    197.       
  197.              self.fire("select",e);        
    198.       
  198.              self.isOnPop = false;        
    199.       
  199.              self.hide();        
    200.       
  200.          }        
    201.       
  201.      });        
    202.               
  202.      return NewCitySelector;        
    203.           
  203.  },{requires:['base','template','switchable','./data','./assets/index.css']});        
    204.
js 城市选择器
上一篇: 每天一个Python小技巧(2)
下一篇: 每天一个Python小技巧(1)之JSON转义

继续阅读