add WmDialog2 and WmRefresh tag

display-server/etc/lua/defineTagConfig.lua

@@ -13,5 +13,7 @@ return{
  ["wm-slider"] = "tag.WmSlider",
  ["wm-slider-item"] = "tag.WmSliderItem",
  ["wm-dropmenu"] = "tag.WmDropmenu",
  ["wm-dropmenu-item"] = "tag.WmDropmenuItem"
  ["wm-dropmenu-item"] = "tag.WmDropmenuItem",
  ["wm-dialog2"] = "tag.WmDialog2",
  ["wm-refresh"] = "tag.WmRefresh"
}

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

@@ -0,0 +1,107 @@
local Class = require("util.Class")
local Tag = require("engine.Tag")
local WmDialog2 = Class(Tag)
function WmDialog2:createNew(obj,htmlbuff)
  self.htmlbuff=htmlbuff
end
function WmDialog2:doStartTag(attr)
	if not (attr.id and attr.title) then
		monitor:error("WmDialog2组件 id、title属性不能为空 ")
		return nil
	end
	
	self.attr = attr
	self.htmlbuff:append('<div class="s-dialog s-dialog-slip" id="'..attr.id..'">')
	self.htmlbuff:append('<div class="s-dialog-content">')
	self.htmlbuff:append('<h3 class="s-dialog-title">'..attr.title..'</h3>')
	self.htmlbuff:append('<div class="s-dialog-mainview">')
	--this is the content area
	
	
end
function WmDialog2:doEndTag()
	local attr = self.attr
	
	self.htmlbuff:append('</div>')
	
	self.htmlbuff:append('<div class="s-dialog-buttons">')
	
	local n_action = nil
	local p_action = nil
	local p_closeDialg = 'true'
	if (not attr.negativeAction) and (not attr.positiveAction) then
		self.htmlbuff:append('<button class="s-dialog-cancle">确定</button>')
	else
		if attr.negativeAction then
			local negative = string.split(attr.negativeAction,",")
			local n_text = negative[1]
			n_action = negative[2]
			
			if n_text then
				self.htmlbuff:append('<button class="s-dialog-cancle">'..n_text..'</button>')
			end
		end
		
		if attr.positiveAction then
			local positive = string.split(attr.positiveAction,",")
			local p_text = positive[1]
			p_action = positive[2]
			
			if positive[3] then
				p_closeDialg = positive[3]
			end
			
			if p_text then
				self.htmlbuff:append('<button class="s-dialog-ok">'..p_text..'</button>')
			end
		end
		
		
	end
	
	self.htmlbuff:append('</div>')	
	
	self.htmlbuff:append('</div>')
	self.htmlbuff:append('</div>')
	
	
	self.htmlbuff:append('<script type="text/javascript">')
	self.htmlbuff:append('require(["wmDialog2","wmWebUI"],function(WmDialog2,WmWebUI) {')
	self.htmlbuff:append('var dialog_'..attr.id..' = new WmDialog2("'..attr.id..'");')
	
	if n_action then
		self.htmlbuff:append('dialog_'..attr.id..'.setNegativeAction('..n_action..',true);')
	end
	
	if p_action then
		self.htmlbuff:append('dialog_'..attr.id..'.setPositiveAction('..p_action..','..p_closeDialg..');')
	end
	
	if attr.contentview then
		local contentView = string.split(attr.contentview,",")
		local id = contentView[1]
		local type = contentView[2]
		
		self.htmlbuff:append('dialog_'..attr.id..'.setContentView("'..id..'","'..type..'");')
	end
	
	self.htmlbuff:append('WmWebUI.store("'..attr.id..'",dialog_'..attr.id..');')
	self.htmlbuff:append('})')
	self.htmlbuff:append('</script>')
end
function string.split(str, delimiter)	
	if str==nil or str=='' or delimiter==nil then		
		return nil	
	end	    
	local result = {}    
	for match in (str..delimiter):gmatch("(.-)"..delimiter) do        
		table.insert(result, match)    
	end    
	return result
end
return WmDialog2

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

@@ -0,0 +1,65 @@
local Class = require("util.Class")
local Tag = require("engine.Tag")
local WmRefresh = Class(Tag)
function WmRefresh:createNew(obj,htmlbuff)
  self.htmlbuff=htmlbuff
end
function WmRefresh:doStartTag(attr)
	if not (attr.id) then
		monitor:error("WmRefresh组件 id属性不能为空 ")
		return nil
	end
	
	self.attr = attr
	self.htmlbuff:append('<div class="c-refresh-container" id="'..attr.id..'">')
	self.htmlbuff:append('<div id="c-refresh-wrapper" style="height:200px;">')
	self.htmlbuff:append('<div id="c-refresh-scroller">')
	self.htmlbuff:append('<div id="pullDown">')
	self.htmlbuff:append('<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>')
	self.htmlbuff:append('</div>')
	self.htmlbuff:append('<div class="c_list">')
	--this is the content area
	
	
end
function WmRefresh:doEndTag()
	local attr = self.attr
	
	self.htmlbuff:append('</div>')
	
	self.htmlbuff:append('<div id="pullUp">')
	self.htmlbuff:append('<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>')
	self.htmlbuff:append('</div> </div> </div> </div>')
	
	self.htmlbuff:append('<script type="text/javascript">')
	self.htmlbuff:append('require([ "wmRefresh","wmWebUI" ], function(WmRefresh,WmWebUI) {')
	self.htmlbuff:append('var refresh_'..attr.id..' = new WmRefresh("'..attr.id..'");')
	
	if attr.pullDownAction then
		self.htmlbuff:append('refresh_'..attr.id..'.setPullDownAction('..attr.pullDownAction..');')
	end
	
	if attr.pullUpAction then
		self.htmlbuff:append('refresh_'..attr.id..'.setPullUpAction('..attr.pullUpAction..');')
	end
	
	self.htmlbuff:append('WmWebUI.store("'..attr.id..'",refresh_'..attr.id..');')
	self.htmlbuff:append('})')
	self.htmlbuff:append('</script>')
end
function string.split(str, delimiter)	
	if str==nil or str=='' or delimiter==nil then		
		return nil	
	end	    
	local result = {}    
	for match in (str..delimiter):gmatch("(.-)"..delimiter) do        
		table.insert(result, match)    
	end    
	return result
end
return WmRefresh

display-server/etc/server-page.xml

@@ -75,4 +75,10 @@
    <action name="IChartBar2d01" template="template/webapp/chart/ichart/IChartBar2d01.html"></action>
    <action name="IChartColumn3d01" template="template/webapp/chart/ichart/IChartColumn3d01.html"></action>
    <action name="IChartPie2d01" template="template/webapp/chart/ichart/IChartPie2d01.html"></action>
    
    <action name="WmDialog2Src" template="template/webapp/tag/WmDialog2Src.html"></action>
    <action name="WmDialog2" template="template/webapp/tag/WmDialog2.html"></action>
    
    <action name="WmRefreshSrc" template="template/webapp/tag/WmRefreshSrc.html"></action>
    <action name="WmRefresh" template="template/webapp/tag/WmRefresh.html"></action>
</pages>

display-server/web/res/css/base.css

@@ -921,4 +921,177 @@ input[type="checkbox"]:checked { opacity:1; }
.l_page-current-2 { left:-100%;}
.l_page-current-3 { left:-200%;}
.l_page-current-4 { left:-400%;}
.l_page-current-5 { left:-500%;}
.l_page-current-5 { left:-500%;}
/* custome dialog */
.s-dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 80%;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
.s-dialog-show {
	visibility: visible;
}
.s-dialog-content {
	color: #fff;
	background: #0085d0;
	position: relative;
	border-radius: 3px;
	margin: 0 auto;
}
.s-dialog-content h3 {
	margin: 0;
	padding: 0.4em;
	text-align: center;
	font-size: 2.4em;
	font-weight: 300;
	opacity: 0.8;
	background: rgba(0,0,0,0.1);
	border-radius: 3px 3px 0 0;
}
.s-dialog-content > div {
	padding: 15px 40px 30px;
	margin: 0;
	font-weight: 300;
	font-size: 1.15em;
}
.s-dialog .s-dialog-mainview{
	min-height: 1.15rem;
}
.s-dialog-content > .s-dialog-buttons{
	text-align: center;
	margin:0 auto;
}
.s-dialog-buttons button {
	border: none;
	padding: 3% 3%;
	background: #0085ff;
	color: #fff;
	letter-spacing: 1px;
	cursor: pointer;
	border-radius: 2px;
	display: inline-block;
	margin: 0 0.05rem;
	font-size: 0.8em;
	box-shadow: 7px 7px 5px #216AAD;
	width:45%;
}
.s-dialog-buttons button:hover {
	background: #216AAD;
}
.s-dialog-buttons .s-dialog-ok{
	background: #92E818;
	box-shadow: 7px 7px 5px #78C30D;
}
.s-dialog-buttons .s-dialog-ok:hover{
	background: #78C30D;
}
.s-dialog-slip .s-dialog-content {
	-webkit-transform: translateY(20%);
	-moz-transform: translateY(20%);
	-ms-transform: translateY(20%);
	transform: translateY(20%);
	
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.s-dialog-show.s-dialog-slip .s-dialog-content {				
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	
	opacity: 1;
}
/*8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888
8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888
8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888
8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888
8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888*/
.c-refresh-container { position:absolute !important; top:0.62rem; bottom:0px; width:100%;}
[id*="c-refresh-wrapper"] { position:relative; overflow:auto;}
.m_wrapper { height:100%; overflow:auto; position:relative;}
/*下拉刷新*/
#pullDown, #pullUp {
	background:#fff;
	height:2.22em;
	line-height:2.22em;
	padding:0.28em 0.56em;
	border-bottom:1px solid #ccc;
	font-weight:bold;
	color:#888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon  {
	display:block; float:left;
	width:2.22em; height:2.22em;
	background:url(../img/pull.png) 0 0 no-repeat;
	-webkit-background-size:100% 100%; background-size:100% 100%;
	-webkit-transition-property:-webkit-transform;
	-webkit-transition-duration:250ms;	
}
#pullDown .pullDownIcon {
	-webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon  {
	-webkit-transform:rotate(-180deg) translateZ(0);
}
#pullDown.flip .pullDownIcon {
	-webkit-transform:rotate(-180deg) translateZ(0);
}
#pullUp.flip .pullUpIcon {
	-webkit-transform:rotate(0deg) translateZ(0);
}
#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
	background-image:url(../img/pullLoading.png);
	-webkit-transform:rotate(0deg) translateZ(0);
	-webkit-transition-duration:0ms;
	-webkit-animation-name:loading;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}
@-webkit-keyframes loading {
	from { -webkit-transform:rotate(0deg) translateZ(0); }
	to { -webkit-transform:rotate(360deg) translateZ(0); }
}

display-server/web/res/js/require-config.js

@@ -43,7 +43,9 @@ require.config({
		'wmProgress' : 'ui/wm-progress',
		'wmSegment' : 'ui/wm-segment',
		'wmDialog' : 'ui/wm-dialog',
		'wmDropmenu' : 'ui/wm-dropmenu'
		'wmDialog2' : 'ui/wm-dialog2',
		'wmDropmenu' : 'ui/wm-dropmenu',
		'wmRefresh' : 'ui/wm-refresh'
		
	},
	deps: [],

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

@@ -0,0 +1,80 @@
/*引入util对应的js文件*/
define(['util'], function(){
	var isClose = true;
	/*WmNavBar对象定义*/
	function WmDialog2(id){
		this.listeners = new Array(); //存储监听事件
		this.id = id;
		/*常用对象*/
		this.box = (function(obj){
			if(typeof(obj)=="object"){
				obj = $(obj);
			}else if(typeof(obj)=="string"){
				obj = $("#"+obj);
			}else{
				alert("没有匹配类型");
				return null;
			}
			return obj;
		})(id);
		this.negativeButton = this.box.find(".s-dialog-cancle");
		this.positiveButton = this.box.find(".s-dialog-ok");
		this.title = this.box.find('.s-dialog-title');
		this.mainView = this.box.find('.s-dialog-mainview');
		
		var that = this;
		this.negativeButton.tap(function(){
			that.hide();
		});
	}
	
	WmDialog2.prototype.show = function(){
		this.box.addClass('s-dialog-show');
	}
	
	WmDialog2.prototype.hide = function(){
		this.box.removeClass('s-dialog-show');
	}
	
	WmDialog2.prototype.setPositiveAction = function(action,isHide){
		var that = this;
		if(this.positiveButton.length != 0){
			this.positiveButton.tap(function(){
				if(typeof(action) == "function") {
					action();
				}
				if(isHide){
					that.hide();
				}
			});
		}
	}
	
	WmDialog2.prototype.setNegativeAction = function(action,isHide){
		var that = this;
		if(this.negativeButton.length != 0){
			this.negativeButton.tap(function(){
				if(typeof(action) == "function") {
					action();
				}
				if(isHide){
					that.hide();
				}
			});
		}
	}
	
	WmDialog2.prototype.setTitle = function(title){
		this.title.text(title);
	}
	/*设置内容*/
	WmDialog2.prototype.setContentView = function(str,setBy) {
		if (setBy == "html") {
			this.mainView.html($("#" + str).html());
		} else {
			this.mainView.html("<div>" + str + "</div>");
		}
	}
	
	return WmDialog2;
});

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

@@ -1,3 +1,117 @@
define(["jcl","iScroll","wmWebUI"], function($,iScrol,WmWebUI){
define(["iScroll"], function(iScroll){
	
	function WmRefresh(id){
		this.id = id;
		this.pullDownAction = null;
		this.pullUpAction = null;
		this.init();
		
	}
	
	/**
	* 下拉刷新 （自定义实现此方法）
	* myScroll.refresh();		// 数据加载完成后，调用界面更新方法
	*/
	
	WmRefresh.prototype.setPullDownAction = function(action){
		if(typeof(action) == "function") {
			this.pullDownAction = action;
		}
		
	}
	
	/**
	* 滚动翻页 （自定义实现此方法）
	* myScroll.refresh();		// 数据加载完成后，调用界面更新方法
	*/
	
	WmRefresh.prototype.setPullUpAction = function(action){
		if(typeof(action) == "function") {
			this.pullUpAction = action;
		}
	}
	/**
	* 初始化iScroll控件
	*/
	WmRefresh.prototype.init = function() { 
		var pullDownEl, pullDownOffset,
		pullUpEl, pullUpOffset;
		var that = this;
		var maxHeight = document.getElementById(that.id).offsetHeight + "px";
		document.getElementById("c-refresh-wrapper").style.height = maxHeight;
		pullDownEl = document.getElementById('pullDown');
		pullDownOffset = pullDownEl.offsetHeight;
		pullUpEl = document.getElementById('pullUp');	
		pullUpOffset = pullUpEl.offsetHeight;
		var myScroll = new iScroll('c-refresh-wrapper', {
		//	scrollbarClass: 'myScrollbar', /* 重要样式 */
			useTransition: true, /* 此属性不知用意，本人从true改为false */
			topOffset: pullDownOffset,
			onRefresh: function () {
				console.log(this.maxScrollY);
				if (pullDownEl.className.match('loading')) {
					pullDownEl.className = '';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
				} else if (pullUpEl.className.match('loading')) {
					pullUpEl.className = '';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
				}
			},
			onScrollMove: function () {
				if (this.y > 5 && !pullDownEl.className.match('flip')) {
					pullDownEl.className = 'flip';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
					this.minScrollY = 0;
				} else if (this.y < 5 && pullDownEl.className.match('flip')) {
					pullDownEl.className = '';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
					this.minScrollY = -pullDownOffset;
				} else{
					var c_height = document.getElementById("c-refresh-wrapper").offsetHeight;
					var s_height = document.getElementById("c-refresh-scroller").offsetHeight;
					var distance;
					if (c_height > s_height) {
						distance = - (1.5 * pullUpOffset);
					}else{
						distance = this.maxScrollY - pullUpOffset;
					}
					if (this.y < distance && !pullUpEl.className.match('flip')) {
						pullUpEl.className = 'flip';
						pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
						this.maxScrollY = this.maxScrollY;
					} else if (this.y > distance && pullUpEl.className.match('flip')) {
						pullUpEl.className = '';
						pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
						// this.maxScrollY = pullUpOffset;
					}
				}
			},
			onScrollEnd: function () {
				if (pullDownEl.className.match('flip')) {
					pullDownEl.className = 'loading';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
					if(that.pullDownAction){
						that.pullDownAction(myScroll);	
					}else{
						console.log("未定义下拉刷新方法");
						myScroll.refresh();	
					}
					
				} else if (pullUpEl.className.match('flip')) {
					pullUpEl.className = 'loading';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
					if(that.pullUpAction){
						that.pullUpAction(myScroll);	
					}else{
						console.log("未定义上拉加载更多");
						myScroll.refresh();	
					}
				}
			}
		});
	}
		
	return WmRefresh;
})

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

@@ -0,0 +1,82 @@
<!DOCTYPE HTML>
<html class="s_bs">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	<title>web UI 组件</title>
	{%>template/common/head.html%}
</head>
<body>
<div class="c_navBar">
	<div class="back">
		<span class="e_ico-back"></span>
		<div class="text">WmDialog</div>
	</div>
</div>
<div class="m_content m_content-nofooter" id="content">
	<div class="c_title">弹窗中可以放置任意组件以保证弹窗的多样性</div>
	<div class="c_list">
		<ul>
			<li>
				<div class="content">
					<div class="main">
						<div class="title">进度显示</div>
					</div>
					<div class="fn fn-2" id="testButton_1">测试</div>
				</div>
			</li>
			<li>
				<div class="content">
					<div class="main">
						<div class="title">待选选项</div>
					</div>
					<div class="fn fn-2">测试</div>
				</div>
			</li>
			<li>
				<div class="content">
					<div class="main">
						<div class="title">确认对话框</div>
					</div>
					<div class="fn fn-2">测试</div>
				</div>
			</li>
			<li>
				<div class="content">
					<div class="main">
						<div class="title">数据展示</div>
					</div>
					<div class="fn fn-2">测试</div>
				</div>
			</li>
		</ul>
	</div>
</div>
<wm-dialog2 id="testDialog" title="弹弹弹" positiveAction="submit,openAction,false" negativeAction="close,closeAction" contentview="outer-div,html">
   <div id="outer-div">
		I am an outer div;
	</div>
</wm-dialog2>
</body>
<script>
	function testSubmitAction() { alert("提交成功！")}
	function testCancelAction() { alert("惨了，要被取消了！")}
	//设置关闭/打开动作
	function closeAction() {
		alert("弹出窗口被关闭了");
	}
	function openAction() {
		alert("弹出窗口被打开了");
	}
	require(['util'], function() {
		$("#testButton_1").tap(function(){
			var dialog2 = WmWebUI.select("testDialog");
			dialog2.show()
		});
	});
</script>
</html>

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

@@ -0,0 +1,100 @@
<!DOCTYPE HTML>
<html class="s_bs">
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>web UI 组件</title> {%>template/common/Head.html%}
</head>
<body>
	<div class="c_navBar">
		<div class="back">
			<span class="e_ico-back"></span>
			<div class="text">WmDialogSrc</div>
		</div>
	</div>
	<div class="m_content m_content-nofooter" id="content">
		<div class="c_title">弹窗中可以放置任意组件以保证弹窗的多样性</div>
		<div class="c_list">
			<ul>
				<li>
					<div class="content">
						<div class="main">
							<div class="title">进度显示</div>
						</div>
						<div class="fn fn-2" id="testButton_1">测试</div>
					</div>
				</li>
				<li>
					<div class="content">
						<div class="main">
							<div class="title">待选选项</div>
						</div>
						<div class="fn fn-2">测试</div>
					</div>
				</li>
				<li>
					<div class="content">
						<div class="main">
							<div class="title">确认对话框</div>
						</div>
						<div class="fn fn-2">测试</div>
					</div>
				</li>
				<li>
					<div class="content">
						<div class="main">
							<div class="title">数据展示</div>
						</div>
						<div class="fn fn-2">测试</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="s-dialog s-dialog-slip" id="mydialog">
		<div class="s-dialog-content">
			<h3 class="s-dialog-title">标题</h3>
			<div class="s-dialog-mainview">
				池塘边的榕树上<br />
				知了在声声叫着夏天<br />
				操场边的秋千上<br />
				只有蝴蝶停在上面<br />
				黑板上老师的粉笔<br />
				还在拼命叽叽喳喳写个不停<br />
				等待着下课<br />
				等待着放学<br />
				等待游戏的童年
			</div>
			<div class="s-dialog-buttons">
				<button class="s-dialog-cancle">取消</button> 
				<button class="s-dialog-ok">确定</button>
			</div>
		</div>
	</div>
	
	<div id="outer-div">
		I am an outer div;
	</div>
</body>
<script>
	
	require([ "wmDialog2" ], function(WmDialog2) {
		var dialog2 = new WmDialog2("mydialog");
		var name = 'Shelomi';
		dialog2.setTitle(name);
		dialog2.setNegativeAction(function (){
			alert(name);
		},true);
		dialog2.setPositiveAction(function (){
			alert(name);
		},true);
		dialog2.setContentView("outer-div","html");
		$("#testButton_1").tap(function() {
			dialog2.show();
		})
	});
</script>
</html>

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

@@ -0,0 +1,65 @@
<!DOCTYPE HTML>
<html class="s_bs">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	<title>web UI 组件</title>
	{%>template/common/Head.html%}
</head>
<body>
<div class="c_navBar">
	<div class="back">
		<span class="e_ico-back"></span>
		<div class="text">WmRefreshSrc</div>
	</div>
</div>
<wm-refresh id="c_refresh" pullDownAction="pullDownAction" pullUpAction="pullUpAction">
				
	第一行<br/>
	第一行<br/>
	第一行<br/>
	第一行<br/>
	第一行<br/>
	第一行<br/>
	第一行<br/>
	第一行<br/>
	<ul class="ul" id="thelist"></ul>
</wm-refresh>
			
</body>
<script>
var generatedCount = 0
function pullDownAction (scroller) {
	setTimeout(function () {	
		var el, li, i;
		el = document.getElementById('thelist');
		for (i=0; i<10; i++) {
			li = document.createElement('li');
			li.className = "li";
			li.innerText = 'Generated row ' + (++generatedCount);
			el.insertBefore(li, el.childNodes[0]);
		}
		scroller.refresh();		
	}, 1000);	
}
function pullUpAction (scroller) {
	setTimeout(function () {	
		var el, li, i;
		el = document.getElementById('thelist');
		for (i=0; i<10; i++) {
			li = document.createElement('li');
			li.className = "li";
			li.innerText = 'Generated row ' + (++generatedCount);
			el.appendChild(li, el.childNodes[0]);
		}
		scroller.refresh();		
	}, 1000);	
}
</script>
</html>

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

@@ -0,0 +1,81 @@
<!DOCTYPE HTML>
<html class="s_bs">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	<title>web UI 组件</title>
	{%>template/common/Head.html%}
</head>
<body>
<div class="c_navBar">
	<div class="back">
		<span class="e_ico-back"></span>
		<div class="text">WmRefreshSrc</div>
	</div>
</div>
<div class="c-refresh-container" id="c-refresh">
	<div id="c-refresh-wrapper" style="height:200px;">
		<div id="c-refresh-scroller">
			<div id="pullDown">
				<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
			</div>
			<div class="c_list">
				
				第一行<br/>
				第一行<br/>
				第一行<br/>
				第一行<br/>
				第一行<br/>
				第一行<br/>
				第一行<br/>
				第一行<br/>
				<ul class="ul" id="thelist"></ul>
			</div>
			<div id="pullUp">
				<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
			</div>
		</div>
	</div>
</div>
</body>
<script>
var generatedCount = 0
function pullDownAction (scroller) {
	setTimeout(function () {	
		var el, li, i;
		el = document.getElementById('thelist');
		for (i=0; i<10; i++) {
			li = document.createElement('li');
			li.className = "li";
			li.innerText = 'Generated row ' + (++generatedCount);
			el.insertBefore(li, el.childNodes[0]);
		}
		scroller.refresh();		
	}, 1000);	
}
function pullUpAction (scroller) {
	setTimeout(function () {	
		var el, li, i;
		el = document.getElementById('thelist');
		for (i=0; i<10; i++) {
			li = document.createElement('li');
			li.className = "li";
			li.innerText = 'Generated row ' + (++generatedCount);
			el.appendChild(li);
		}
		scroller.refresh();		
	}, 1000);	
}
	require([ "wmRefresh" ], function(WmRefresh) {
		
		var refresh = new WmRefresh("c-refresh");
		refresh.setPullDownAction(pullDownAction);
		refresh.setPullUpAction(pullUpAction);
	})
</script>
</html>