footermenu_wev8.js 3.68 KB
define(["css!footermenu_css"], function() {
	var pageEvent = require("pageEvent");

	return {
        show: function(menu_datas, callbackFn){
        	var fm = this;
        	var $fmContainer = $("#wev-fm-container");
        	if($fmContainer.length == 0){
        		var h = '\
        		<div id="wev-fm-container" class="wev-fm-container">\
	        		<div class="wev-fm-mark"></div>\
	        		<div class="wev-fm-content hide">\
	        			<ul class="wev-fm-ul"></ul>\
	        			<ul class="wev-fm-ul-cancel"><li class="cancel">取消</li></ul>\
	        		</div>\
	        	</div>\
        		';
        		$fmContainer = $(h);
        		$(document.body).append($fmContainer);
        	}
        	
        	var $fmMark = $(".wev-fm-mark", $fmContainer);
        	var $fmContent = $(".wev-fm-content", $fmContainer);
        	var $fmContentUl = $(".wev-fm-ul", $fmContainer);
        	
        	for(var i = 0; i < menu_datas.length; i++){
    			var value = menu_datas[i]["menuValue"] || "";
    			var icon = menu_datas[i]["icon"] || "";
    			var iconStyle = menu_datas[i]["iconStyle"] || "";
    			var iconHtml = "";
    			if(icon != ""){
    				var styleHtml = (iconStyle != "") ? "style=\""+iconStyle+"\"" : "";
    				iconHtml = "<img src=\""+icon+"\" class=\"menuIcon\" "+styleHtml+"/>";
    			}
    			var menuText = menu_datas[i]["text"] || menu_datas[i]["menuText"];
    			var htm = "<li class=\"menuLi\" data-index=\""+i+"\" data-value=\""+value+"\"><div class=\"menuText\">"+menuText+"</div>"+iconHtml+"</li>";
    			var $menu = $(htm);
    			$menu[0].callback = menu_datas[i]["callback"];
    			$fmContentUl.append($menu);
    			
    			$menu.on("click", function(ev){
    				var that = this;
    				var $that = $(this);
    				$that.addClass("active");
    				setTimeout(function(){
    					$that.removeClass("active");
    					
    					fm.hide(function(){
    						var menuCallback =  that.callback;
    						if(typeof(menuCallback) == "function"){
    							menuCallback.call(that);
    						}
    						
    						if(typeof(callbackFn) == "function"){
    							var result = {
    									"index" : $that.attr("data-index"),
    									"menuValue" : $that.attr("data-value"),
    									"menuText" : $that.html()
    							};
    							callbackFn.call(that,  result);
    						}
    					});
    				},100);
    				ev.stopPropagation();
    			});
        	}
        	
    		$(".wev-fm-ul-cancel .cancel", $fmContainer).on("click", function(ev){
    			var $that = $(this);
    			$that.addClass("active");
    			setTimeout(function(){
    				$that.removeClass("active");
    				fm.hide();
    			},100);
    			ev.stopPropagation();
    		});
        	
        	setTimeout(function(){
        		$fmContainer.on("click", function(ev){
        			fm.hide();
        			ev.stopPropagation();
        		});
        	}, 300);
        	
        	$fmContainer.show();
        	setTimeout(function(){
        		$fmMark.addClass("show");
        		$fmContent.removeClass("hide");
			}, 10);
			// 页面返回时, 关闭footermenu
			pageEvent.destory("change", fm.hide).register("change", fm.hide);
        },
        hide: function(fn){
        	var $fmContainer = $("#wev-fm-container");
        	var $fmMark = $(".wev-fm-mark", $fmContainer);
        	var $fmContent = $(".wev-fm-content", $fmContainer);
        	
        	$fmMark.removeClass("show");
        	$fmContent.addClass("hide");
        	setTimeout(function(){
        		$fmContainer.hide();
        		if(typeof(fn) == "function"){
        			try{
        				fn.call(this);
        			}catch(e){
        				console.log(e);
        			}
        		}
        		$fmContainer.remove();
			}, 300);
			
			pageEvent.destory("change", this.hide);
        }
	};
});