- KISSY.add(function(S,Base,Template,Switchable,Data){
- var $ = S.all,
- Evt = S.Event,
- IO = S.io;
- //首字符排序
- var wordsList;
- var NewCitySelector = function(id,cfg){
- this.init(id,cfg);
- };
- function findCityByCityId(cityId){
- return __findByProp(0,cityId);
- }
- function findCityByCityName(cityName){
- return __findByProp(1,cityName);
- }
- function __findByProp(index,val){
- for(var i in Data){
- for(var j in Data[i]){
- if(val == Data[i][j][index]){
- return {
- cityId:Data[i][j][0],
- cityName:Data[i][j][1],
- category:i
- };
- }
- }
- }
- }
- /**
- 判断元素在元素内部
- **/
- function isIn(t,p){
- var $t = $(t),
- $p = $(p);
- if($t[0] && $p[0] && $t[0] === $p[0]){
- return true;
- }
- if($($t,$p)[0]){
- return true;
- }
- }
- var CLS_PREFIX = "ks-newcityselector-";
- var CONTAINER_TPL = "<div class='"+CLS_PREFIX+"container'>" + "</div>";
- var INNER_CONTAINER_TPL = "`wordsList``citiesList`";
- // var WORDS
- S.extend(NewCitySelector,Base,{
- init:function(id,cfg){
- var self = this;
- var defaultCfg = {
- autoOpen:false,
- cityId:330100,
- css:{
- "position":"absolute",
- "z-index":"9999"
- },
- target:$(id),
- tpl:INNER_CONTAINER_TPL,
- slideWidth:672
- };
- if(!id || !$(id)[0]){
- S.log("no container");
- return;
- }
- self.$el = $(id);
- self.cfg = S.mix(defaultCfg,cfg,undefined,undefined,true);
- self.render();
- },
- render:function(){
- var self = this;
- self.$pop = $(CONTAINER_TPL).insertAfter(self.$el);
- self.$pop.css(self.cfg.css);
- wordsList = [];
- var citiesListHTML = "<div class="+CLS_PREFIX+"citycontainer"+"><div class='scroll'>";
- for(var i in Data){
- wordsList.push(i);
- var citiesHTML = self.getListHTML(Data[i],'city');
- citiesListHTML += "<div class="+CLS_PREFIX+"tab-content"+" tab="+i+">" + citiesHTML +"</div>"
- }
- citiesListHTML += "</div></div>"
- var wordsListHTML = self.getListHTML(wordsList,'words');
- var tplData = {
- wordsList : wordsListHTML,
- citiesList : citiesListHTML
- };
- self.$pop = self.$pop.html(Template("<div class='"+CLS_PREFIX+"inner'>" + self.cfg.tpl + "</div>").render(tplData));
- self.$cityContainer = $("."+CLS_PREFIX+"citycontainer",self.$pop);
- self.$wordListContainer = $("."+CLS_PREFIX+"words",self.$pop);
- self.bindEvt();
- self.autoOpen && self.show();
- S.log(self)
- },
- bindEvt:function(){
- var self = this;
- var timeout;
- self.$el.on("click",function(){
- self.show();
- });
- $("li",$("." + CLS_PREFIX + "words",self.$pop)).on("click",function(e){
- e.preventDefault();
- var $li = $(e.currentTarget);
- var stype = $li.attr("stype");
- self.switchTo(stype);
- });
- //自动隐藏覆层
- self.$pop.on("mouseleave",function(e){
- e.stopPropagation();
- self.isOnPop = false;
- clearTimeout(timeout);
- timeout = setTimeout(function(){self.hide()},1000);
- });
- self.$pop.on("mousemove",function(e){
- e.stopPropagation();
- self.isOnPop = 1;
- });
- self.$el.on("mousemove",function(e){
- e.stopPropagation();
- self.isOnPop = 1;
- });
- $("li",$("." + CLS_PREFIX + "city",self.$pop)).on("click",function(e){
- e.preventDefault();
- var $a = $("a",$(e.currentTarget));
- self.onSelect({cityName:$a.text(),cityId:$a.attr("cityId")});
- });
- $("body").on("click",function(e){
- if(!isIn($(e.target),self.$pop) && !isIn($(e.target),self.$el)){
- self.isOnPop = false;
- self.hide();
- self.fire("blur");
- }
- });
- },
- switchTo:function(stype,cb){
- var self = this,
- index,
- slideWidth = self.cfg.slideWidth;
- index = S.isNumber(stype) ? stype - 0 : self.indexOfArray(stype,wordsList);
- $(".scroll",self.$pop).animate({marginLeft:-index * slideWidth},0.5,"easeOut",cb)
- $("li",$("."+CLS_PREFIX+"words")).item(index-0).addClass("cur").siblings().removeClass("cur");
- self.set("category",stype);
- },
- /**
- TODO 设置city
- **/
- setCity:function(city){
- var self = this,
- cityObj;
- if(city){
- if(city > 0){
- cityObj = findCityByCityId(city);
- }else{
- cityObj = findCityByCityName(city);
- }
- if(cityObj){
- self.switchTo(cityObj.category);
- self.set("currentCity",cityObj);
- self.set("cityId",cityObj.cityId);
- self.set("cityName",cityObj.cityName);
- self.set("category",cityObj.category);
- // var index = self.indexOfArray(cityObj.category,wordsList);
- // alert(index)
- // $("li",self.$cityContainer).item(index)
- $(self.cfg.target).html(cityObj.cityName);
- }
- }
- },
- indexOfArray:function(el,ary){
- for(var i in ary){
- if(el == ary[i]) return i || 0;
- }
- },
- show:function(){
- var self = this;
- self.$pop.fadeIn(0.3);
- },
- hide:function(){
- var self = this;
- !self.isOnPop && self.$pop.fadeOut(0.3);
- },
- getListHTML:function(ary,cls){
- if(!ary || !cls) return "";
- var html = "<ul class=" + CLS_PREFIX + cls + ">";
- for(var i in ary){
- if(S.isArray(ary[i])){
- html += '<li><a href="#" cityId='+ary[i][0]+' title='+ary[i][1]+' >' + ary[i][1] + '</a></li>';
- }else{
- if(ary[i] == "hot"){
- html += '<li stype="hot"><a href="#">热门</a></li>';
- }else{
- html += '<li stype='+ ary[i] +'><a href="#">' + ary[i] + '</a></li>';
- }
- }
- }
- return html + '</ul>';
- },
- onSelect:function(e){
- var self = this;
- self.fire("select",e);
- self.isOnPop = false;
- self.hide();
- }
- });
- return NewCitySelector;
- },{requires:['base','template','switchable','./data','./assets/index.css']});
转载于:https://blog.51cto.com/huxiaoqi/1181023