开关组件优化

display-server/etc/lua/tag/WmSwitch.lua

@@ -4,7 +4,7 @@ local WmSwitch = Class(Tag)
--htmlbuff
function WmSwitch:createNew(obj,htmlbuff)
  self.htmlbuff=htmlbuff
  self.htmlbuff = htmlbuff
end
local function split(s, delim)
@@ -30,71 +30,73 @@ end
--attr 所有属性
function WmSwitch:doStartTag(attr)
  --[[for k,v in pairs(attr) do
    self.htmlbuff:append(k,v)
  end--]]
  ---[[属性初始化
  attr.value=attr.value or "true"
  attr.label=attr.label or "On|Off"
  attr.onAction=attr.onAction or "console.log('On')"
  attr.offAction=attr.offAction or "console.log('Off')"
  attr.changeAction=attr.changeAction or "console.log('onChange')"
  attr.isEnable=attr.isEnable or "true"
  local stateStyle=""
  if attr.value=="false"
    then 
  --属性初始化
  attr.value = attr.value or "true"
  attr.label = attr.label or "on|off"
  local stateStyle = ""
  if attr.value=="false" then
    stateStyle="transform:translateX(-100%)"
  end
  self.htmlbuff:append([[
    <div class="value">
        <span class="e_switch e_switch-on" id="]])
  self.htmlbuff:append(attr.id)
  self.htmlbuff:append([[">
          <span class="e_switchOn">]])
  self.htmlbuff:append('">','\n')
  
  local labelTable=split(attr.label,"|")
  self.htmlbuff:append('<span class="e_switchOn">')
  self.htmlbuff:append(labelTable[1])
  self.htmlbuff:append([[</span>
          <span class="e_switchOff">]])
  self.htmlbuff:append('</span>','\n')
  
  self.htmlbuff:append('<span class="e_switchOff">')
  self.htmlbuff:append(labelTable[2])
  self.htmlbuff:append([[</span>
          <span class="e_switchBar" style="]])
  self.htmlbuff:append('</span>','\n')
  
  self.htmlbuff:append('<span class="e_switchBar" style="')
  self.htmlbuff:append(stateStyle)
  self.htmlbuff:append([["></span>
          <input type="hidden" value="]])
  self.htmlbuff:append('"></span>','\n')
  
  self.htmlbuff:append('<input type="hidden" value="')
  self.htmlbuff:append(attr.value)
  self.htmlbuff:append([[" >
  self.htmlbuff:append([["/>
        </span>
     </div>
  ]]);
  
  
  self.htmlbuff:append([[
  <script>
  require(["iScroll","wmSwitch","util"],function(iScroll,wmSwitch) {
  var obj=new wmSwitch("]])
  self.htmlbuff:append(attr.id)
  self.htmlbuff:append([[");
  obj.setOnAction(function(){]])
  self.htmlbuff:append(attr.onAction)
  self.htmlbuff:append([[});
  obj.setOffAction(function(){]])
  self.htmlbuff:append(attr.offAction)
  self.htmlbuff:append([[});
  obj.setChangeAction(function(){]])
  self.htmlbuff:append(attr.changeAction)
  self.htmlbuff:append([[});
  obj.isEnable(]])
  self.htmlbuff:append(attr.isEnable)
  self.htmlbuff:append([[);
  obj.create();
  WmWebUI.store("]])
  require(["wmSwitch"],function(WmSwitch) {
  	var wmSwitch = new WmSwitch("]])
  self.htmlbuff:append(attr.id)
  self.htmlbuff:append([[",obj);
  self.htmlbuff:append('");','\n')
  self.htmlbuff:append('wmSwitch.create();','\n');
  if attr.onAction then
	self.htmlbuff:append('	wmSwitch.setOnAction(function(){','\n')
	self.htmlbuff:append(attr.onAction,'\n')
	self.htmlbuff:append('});','\n');
  end
  if attr.offAction then
   	self.htmlbuff:append('	wmSwitch.setOffAction(function(){','\n')
	self.htmlbuff:append(attr.offAction,'\n')
	self.htmlbuff:append('});','\n');
  end
  if attr.changeAction then
   	self.htmlbuff:append('	wmSwitch.setChangeAction(function(){','\n')
	self.htmlbuff:append(attr.changeAction,'\n')
	self.htmlbuff:append('});','\n');
  end
  if attr.disabled then
   	self.htmlbuff:append('	wmSwitch.setDisabled(')
	self.htmlbuff:append(attr.disabled)
	self.htmlbuff:append(');','\n');
  end
  self.htmlbuff:append([[
  });
  </script>
  ]])
end
--结束标签
function WmSwitch:doEndTag()
end

display-server/web/biz/js/tag/WmSwitch.js

@@ -1,67 +1,57 @@
require(["domReady!","wmWebUI","jcl","mobile","iScroll5"],function(doc,WmWebUI,$,Mobile,IScroll){
	$("#open").tap( function(){
		var that = $(this);
		var switch01=WmWebUI.select("TestSwitchID1");
		if(switch01.isEnable()){
			if(switch01.getValue()){
				switch01.setValue(false);
				that.html("打开开关");
	new IScroll("#content",{tap:true,scrollbars: true});
	/*开关打开和关闭*/
	$("#testSwitch").tap( function(){
		var mySwitch = WmWebUI.select("mySwitch");
		if(!mySwitch.disabled){
			if(mySwitch.getValue()){
				$(this).html("打开开关");
				mySwitch.setValue(false);
			}else{
				switch01.setValue(true);
				that.html("关闭开关");
				$(this).html("关闭开关");
				mySwitch.setValue(true);
			}
		}else{
			Mobile.tip("开关不可用！");
		}
	});
	$("#setAction").tap(function(){
		var switch01=WmWebUI.select("TestSwitchID1");
		var myDate=new Date();
		switch01.setOnAction(function(){
			Mobile.tip("正在打开。事件设置时间："+myDate.toLocaleString());
		});
		switch01.setOffAction(function(){
			Mobile.tip("正在关闭。事件设置时间："+myDate.toLocaleString());
		});
		switch01.setChangeAction(function(){
			Mobile.tip("即将改变开关状态。事件设置时间："+myDate.toLocaleString());
		});
		Mobile.tip("事件设置成功。设置时间："+myDate.toLocaleString());
	});
	$("#cleanAction").tap(function(){
		var switch01=WmWebUI.select("TestSwitchID1");
		switch01.setOnAction(function(){
		});
		switch01.setOffAction(function(){
		});
		switch01.setChangeAction(function(){
		});
		Mobile.tip("事件清除成功！");
	/*开关禁用和取消*/
	$("#testSetDisabled").tap(function() {
		var mySwitch = WmWebUI.select("mySwitch");
		if (!mySwitch.disabled) {
			$(this).html("取消禁用");
			mySwitch.setDisabled(true);
		} else {
			$(this).html("禁用开关");
			mySwitch.setDisabled(false);
		}
	});
	$("#isEnable").tap(function(){
		var that = $(this);
		var switch01=WmWebUI.select("TestSwitchID1");
		if(switch01.isEnable()){
			switch01.isEnable(false);
			Mobile.tip("开关被设置为不可用。");
			that.html("取消禁用");
	/*开关文本设置*/
	$("#testSetLable").tap(function(){
		var mySwitch = WmWebUI.select("mySwitch");
		if(mySwitch.getLabel()=="开|关"){
			$(this).html("还原文本");
			mySwitch.setLabel("on|off");
		}else{
			switch01.isEnable(true);
			Mobile.tip("开关被设置为可用。");
			that.html("禁用开关");
			$(this).html("设置文本");
			mySwitch.setLabel("开|关");
		}
	});
	$("#lable").tap(function(){
		var str=prompt("请输入开关显示的内容……示例：   A|B");
		if(str == undefined){
			return;
		}
		var switch01=WmWebUI.select("TestSwitchID1");
		var strs = str.split("|");
		if(strs[1] == undefined){
			return ;
	/*开关事件设置*/
	$("#testSetAction").tap(function(){
		var mySwitch = WmWebUI.select("mySwitch");
		if(mySwitch.onAction){
			$(this).html("设置事件");
			mySwitch.setOnAction(null);
			mySwitch.setOffAction(null);
		}else{
			$(this).html("清除事件");
			mySwitch.setOnAction(function(){
				Mobile.tip("开关打开事件");
			});
			mySwitch.setOffAction(function(){
				Mobile.tip("开关关闭事件");
			});
		}
		switch01.setLabel(str);
	});
	new IScroll("#content",{tap:true,scrollbars: true});
});

display-server/web/res/js/ui/wm-switch.js

@@ -1,234 +1,210 @@
define(["jcl","iScroll","wmWebUI"],function($,iScrol,WmWebUI){
	function WmSwitch(id){
		this.entity=(function(obj){
			if(typeof(obj)=="object"){
				obj=$(obj);
			}else if(typeof(obj)=="string"){
				obj=$("#"+obj);
			}else{
				alert("没有匹配类型");
				return null;
			}
			return obj;
		})(id);
		//存储开关状态的值
		this.input=this.entity.find("input");
		//三个span，用来存储开、关、及开关滑块
		this.span=this.entity.find("span");
		//根据开关的默认状态，计算开关滑块到开关控件最边缘的间隙
		var space=0;
		space=this.span[2].offsetLeft-this.span[2].offsetWidth;	
		//console.log("space:"+space)
		//计算滑块左右应当移动的距离
		this.distance=this.entity[0].offsetWidth-this.span[2].offsetWidth-2*space;
		//console.log("distancd:"+this.distance)
		//设置开关是否可用
		this.enable=true;
		//当开关状态改变，或试图改变开关状态时调用(开关不可用时)。
		this.changeAction=function(){};
		//当开关被打开时调用。
		this.onAction=function(){};
		//当开关被关闭时调用。
		this.offAction=function(){};
/**
 * 开关组件
 */
define(["jcl","wmWebUI"],function($,WmWebUI){
	function WmSwitch(id) {
		this.entity = WmWebUI.getElement(id);
		this.input = this.entity.find("input");// 存储开关状态的值
		this.span = this.entity.find("span");// 三个span，用来存储开、关、及开关滑块
		var space = 0;// 根据开关的默认状态，计算开关滑块到开关控件最边缘的间隙
		space = this.span[2].offsetLeft - this.span[2].offsetWidth;
		this.distance = this.entity[0].offsetWidth - this.span[2].offsetWidth - 2 * space;// 计算滑块左右应当移动的距离
		this.disabled = false;// 设置开关非禁用
		this.onAction;	// 开关打开事件
		this.offAction;	// 开关关闭事件
		this.changeAction;// 开关状态变化时的事件
		this.clickAction;// 开关点击事件
		
		WmWebUI.store(id,this);
	}
	WmSwitch.prototype.create=function(){
		var that=this;
		if(!this.entity){
			alert("无法获取网页元素");
			return;
		}
		dragEvent(this);
	};
	
	function getX(event){
		return event.touches?event.touches[0].pageX:event.clientX;
	};
	//鼠标拖拽事件
	/*鼠标拖拽事件*/
	function dragEvent(that){
		//开关控件本身
		var obj=that.entity[0];
		//滑块
		var blockObj=obj.children[2];
		//是否为触屏
		var obj = that.entity[0];// 开关控件本身
		var blockObj = obj.children[2];// 滑块
		// 判断是否为触屏
		var hasTouch = "ontouchstart" in window;
		var START_EVENT = hasTouch ? "touchstart" : "mousedown";
		var MOVE_EVENT = hasTouch ? "touchmove" : "mousemove";
		var END_EVENT = hasTouch ? "touchend" : "mouseup";
		var CANCEL_EVENT = hasTouch ? "touchcancel" : "mouseup";
		//开始移动的位置
		var startX=-1;
		//当前被操作的元素
		var currElement;
		//是否在移动
		var isMoving=false;
		//正则，用于获取translateX的数值
		var reg=/\-?[0-9]+/g;
		//移动标志，用于区分是单击，还是移动事件
		var moveFlag=false;
		//body上的鼠标结束移动回调函数
		var handler=function(event){
		
		var startX = -1;// 开始移动的位置
		var currElement;// 当前被操作的元素
		var isMoving = false;// 是否在移动
		var reg = /\-?[0-9]+/g;// 正则，用于获取translateX的数值
		var moveFlag = false;// 移动标志，用于区分是单击，还是移动事件
		// body上的鼠标结束移动回调函数
		var handler = function(event){
			switchEvent(event);
		}
		//body上的鼠标移动回调函数
		var moveHandler=function(event){
		// body上的鼠标移动回调函数
		var moveHandler = function(event){
			moveEvent(event);
		}
		//滑块上添加拖拽开始事件
		// 滑块上添加拖拽开始事件
		blockObj.addEventListener(START_EVENT,function(event){
			//如果正在移动，则忽略
			// 如果正在移动，则忽略
			if(!isMoving){
				//记录当前被单击的对象
				currElement=obj;
				// 记录当前被单击的对象
				currElement = obj;
				startX= getX(event);
				document.body.addEventListener(CANCEL_EVENT,handler,false);//使用touchcancel事件
				document.body.addEventListener(CANCEL_EVENT,handler,false);// 使用touchcancel事件
				document.body.addEventListener(MOVE_EVENT,moveHandler,false);
			}
		},false);
		//在开关控件上添加移动事件
		// 在开关上添加移动事件
		obj.addEventListener(MOVE_EVENT,function(event){
			moveEvent(event);
		},false);
		//在开关控件上添加移动结束事件
		// 在开关上添加移动结束事件
		obj.addEventListener(END_EVENT,function(event){
			if(currElement!=obj){
				if(that.enable){
				if(!that.disabled){
					that.setValue(!that.getValue());
				}else{
					that.changeAction(that.enable);	
				}
				if(that.clickAction){
					that.clickAction(that.disabled);
				}
			}
			switchEvent(event);
		},false);
		//在开关控件上添加移动取消事件
		// 在开关上添加移动取消事件
		obj.addEventListener(CANCEL_EVENT,function(event){
			switchEvent(event);
		},false);
		//移动事件
		// 移动事件
		function moveEvent(event){
			if(currElement==obj){
				if(that.enable){
					//如果进入了移动事件，刚将移动状态设置为true，以区分单击事件
					moveFlag=true;
					//鼠标当前位置与起始位置的偏移量
					var leftX=getX(event)-startX;
					//如果开关为打开状态，则leftX为负数，that.distance为正数，并且不会执行下面一段逻辑
					//如果开关为关闭状态，则leftX为正数，that.distance为正数，执行下面一段逻辑后，得到一个绝对值较小的负数。
				if(!that.disabled){
					moveFlag = true; //设置移动状态为true，区分单击事件
					var leftX = getX(event)-startX; // 鼠标当前位置与起始位置的偏移量
					// 如果开关为打开状态，则leftX为负数，that.distance为正数，并且不会执行下面一段逻辑
					// 如果开关为关闭状态，则leftX为正数，that.distance为正数，得到一个绝对值较小的负数
					if(!that.getValue()){
						leftX=leftX-that.distance;
						leftX = leftX-that.distance;
					}
					//计算出界。
					// 计算出界
					if(leftX>=-that.distance && leftX<=0 ){
						blockObj.style.webkitTransform = "translateX(" + leftX + "px)"
					}
				}
			}
		}
		//松开滑块后，自动执行动画的事件
		/*松开滑块自动执行动画*/
		function switchEvent(event){
			if(currElement==obj){
				//此方法根据currElement对象来区分是否执行。当执行了一次此方法后，在将currElement置空，表示一次流程已经走完。
				//也用currElement来区分是那个对象触发的事件。
				currElement=null;
				if(that.enable){
				// 使用currElement判断事件是否执行,同时也用来获取事件源
				currElement = null;	//currElement置空，表示一次操作结束。
				if(!that.disabled){
					if(moveFlag){
						//当执行拖拽完成后的小动画的时候，通过一个状态位，将开关控件锁定。
						isMoving=true;
						blockObj.style.webkitTransition="none";//关闭css3动画
						//获取到当前translateX的值
						isMoving = true;	//粘滞动画时锁定移动状态
						blockObj.style.webkitTransition="none";// 关闭css3动画
						// 获取到当前translateX的值
						var translateX=parseInt(blockObj.style.webkitTransform.match(reg));
						//判断此时滑块在哪一边
						// 判断此时滑块在哪一边
						if(translateX<-that.distance/2 && translateX<0){
							blockObj.style.webkitTransition="-webkit-transform 0.1s ease";//粘滞时长0.1秒
							blockObj.style.webkitTransition="-webkit-transform 0.1s ease";// 粘滞时长0.1秒
							blockObj.style.webkitTransform="translateX(-"+that.distance+"px)";
							if(that.getValue()){
								that.changeAction(that.enable);
								//console.log(that.offAction());
								that.offAction();
								if(that.changeAction)
									that.changeAction();
								if(that.offAction)
									that.offAction();
							}
							that.input.val(false);
						}else{
							blockObj.style.webkitTransition="-webkit-transform 0.1s ease";//粘滞时长0.1秒
							blockObj.style.webkitTransition="-webkit-transform 0.1s ease";// 粘滞时长0.1秒
							blockObj.style.webkitTransform="translateX(0px)";
							if(!that.getValue()){
								that.changeAction(that.enable);
								//console.log(that.onAction());
								that.onAction();
								if(that.changeAction)
									that.changeAction();
								if(that.onAction)
									that.onAction();
							}
							that.input.val(true);
						}
						setTimeout(function(){
							//关闭动画
							blockObj.style.webkitTransition="none";
							//当动画完成，自动解除锁定
							isMoving=false;
							blockObj.style.webkitTransition="none";// 关闭动画
							isMoving = false;// 动画完成时自动解除锁定
						},200);
					}else{
						//如果是单击事件，则转换一次开关的状态
						that.setValue(!that.getValue());
						that.setValue(!that.getValue());// 单击则改变开关状态
					}
				}else{
					//如果开关被关闭，则仅执行changeAction回调方法。
					that.changeAction(that.enable);	
				}
				document.body.removeEventListener(END_EVENT,handler,false);
				document.body.removeEventListener(MOVE_EVENT,moveHandler,false);
				moveFlag=false;
				moveFlag = false;
			}
		}
	}
	WmSwitch.prototype.isEnable=function(enable){
		if(enable==undefined){
			return this.enable;
	/*设置开关是否可用*/
	WmSwitch.prototype.setDisabled = function(disabled){
		if(disabled==undefined){
			return this.disabled;
		}
		if(enable){
			this.enable=true;
			this.entity.removeClass("e_dis");
		}else{
			this.enable=false;
		
		if(disabled){
			this.disabled = true;
			this.entity.addClass("e_dis");
		}else{
			this.disabled = false;
			this.entity.removeClass("e_dis");
		}
	};
	WmSwitch.prototype.setLabel=function(label){
		var strs=label.split("|");
		this.span[0].innerHTML=strs[0];
		this.span[1].innerHTML=strs[1];
	/*设置开关文本*/
	WmSwitch.prototype.setLabel = function(label) {
		var strs = label.split("|");
		this.span[0].innerHTML = strs[0];
		this.span[1].innerHTML = strs[1];
	};
	WmSwitch.prototype.getLabel=function(){
		return this.span[0].innerHTML+"|"+this.span[1].innerHTML;
	/*获取开关文本*/
	WmSwitch.prototype.getLabel = function() {
		return this.span[0].innerHTML + "|" + this.span[1].innerHTML;
	};
	WmSwitch.prototype.setValue=function(val){
		if(this.getValue()!=val){
			if(val){
				if(this.onAction){
					this.changeAction(this.enable);
					//console.log(this.onAction());
	/*设置开关的值*/
	WmSwitch.prototype.setValue = function(value) {
		if (this.getValue() != value) {
			if (value) {
				if (this.onAction)
					this.onAction();
				}
				this.span[2].style.webkitTransition="-webkit-transform 0.2s ease";//滑动时长0.1秒
				this.span[2].style.webkitTransform="translateX(0px)";
			}else{
				if(this.offAction){
					this.changeAction(this.enable);
					//console.log(this.offAction());
				if(this.changeAction)	
					this.changeAction();
				this.span[2].style.webkitTransition = "-webkit-transform 0.2s ease";// 滑动时长0.1秒
				this.span[2].style.webkitTransform = "translateX(0px)";
			} else {
				if (this.offAction)
					this.offAction();
				}
				this.span[2].style.webkitTransition="-webkit-transform 0.2s ease";//滑动时长0.1秒
				this.span[2].style.webkitTransform="translateX(-"+this.distance+"px)";
				if(this.changeAction)	
					this.changeAction();
				this.span[2].style.webkitTransition = "-webkit-transform 0.2s ease";// 滑动时长0.1秒
				this.span[2].style.webkitTransform = "translateX(-" + this.distance + "px)";
			}
			this.input.val(val);
			this.input.val(value);
		}
	};
	WmSwitch.prototype.getValue=function(){
	/*获取开关的值*/
	WmSwitch.prototype.getValue = function(){
		return this.input.val()=="true";
	};
	WmSwitch.prototype.setChangeAction=function(callback){
		this.changeAction=callback;
	}
	/*指定开关打开事件*/
	WmSwitch.prototype.setOnAction=function(callback){
		this.onAction=callback;	
		this.onAction = callback;	
	};
	/*指定开关关闭事件*/
	WmSwitch.prototype.setOffAction=function(callback){
		this.offAction=callback;
		this.offAction = callback;
	};
	/*指定开关状态变化时的事件*/
	WmSwitch.prototype.setChangeAction=function(callback){
		this.changeAction = callback;
	}
	return WmSwitch;
});

display-server/web/template/webapp/tag/WmSwitch.html

@@ -10,6 +10,7 @@
		}
	</style>
	{%>template/common/Head.html%}
	<script type="text/javascript" src="biz/js/tag/WmSwitch.js"></script>
</head>
<body>
<div class="c_navBar">
@@ -25,14 +26,14 @@
		<div class="c_list">
			<ul>
				<li style="text-align:center;padding-top: 0.1rem;padding-bottom: 0.1rem;">
					<wm-switch id="TestSwitchID1" value=false label="开|关" onAction="console.log('开')" offAction="console.log('关')" changeAction="console.log('变化')" >
					<wm-switch id="mySwitch" value="false" label="开|关">
					</wm-switch>
				</li>
				<li ontap>
					<div class="content">
						<div class="main">
							<div class="title">描述：</div>
							<div class="info">此标签设置了几乎所有的属性，同时可以通过上面的控制台控制动态控制此标签的属性。</div>
							<div class="info"></div>
						</div>
					</div>
				</li>
@@ -41,24 +42,20 @@
		<div class="c_title">控制台</div>
		<div class="c_submit" id="consoleMenu" >
			<ul>
				<li><button class="e_button-ok" ontap id="open">打开开关</button></li>
				<li><button class="e_button-ok" id="testSwitch">打开开关</button></li>
			</ul>
			<ul>
				<li><button class="e_button-ok" ontap id="isEnable">禁用开关</button></li>
				<li><button class="e_button-ok" id="testSetDisabled">禁用开关</button></li>
			</ul>
			<ul>
				<li><button class="e_button-ok" ontap id="lable" >设置内容</button></li>
				<li><button class="e_button-ok" id="testSetLable">设置文本</button></li>
			</ul>
			<ul>
				<li><button class="e_button-ok" ontap id="setAction">设置事件</button></li>
			</ul>
			<ul>
				<li><button class="e_button-ok" ontap  id="cleanAction">清除事件</button></li>
				<li><button class="e_button-ok" id="testSetAction">设置事件</button></li>
			</ul>
		</div>
		<div class="e_space"></div>
	</div>
</div>
</body>
<script type="text/javascript" src="biz/js/tag/WmSwitch.js"></script>
</html>