知识库

WebChat/css/app.css

@@ -0,0 +1,21 @@
+/*
+ *这是单独为hello mui准备的个性化css，可以覆盖标准mui的css定义；
+ * 在实际项目开发时，建议为App单独写一个css文件，从而实现项目的自定义皮肤功能；
+ * 
+ * */
+.mui-plus header.mui-bar{
+	display: none;
+}
+.mui-plus .mui-bar-nav~.mui-content{
+	padding: 0;
+}
+
+/*hm开头的表示仅为 Hello MUI示例定义*/
+.hm-description{
+	margin: .5em 0;
+}
+
+.hm-description>li {
+	font-size: 14px;
+	color: #8f8f94;
+}

WebChat/css/mui.picker.all.css

@@ -1,285 +0,0 @@
-/**
- * 选择列表插件
- * varstion 2.0.0
- * by Houfeng
- * Houfeng@DCloud.io
- */
-
-.mui-picker {
-    background-color: #ddd;
-    position: relative;
-    height: 200px;
-    overflow: hidden;
-    border: solid 1px rgba(0, 0, 0, 0.1);
-    -webkit-user-select: none;
-    user-select: none;
-    box-sizing: border-box;
-}
-.mui-picker-inner {
-    box-sizing: border-box;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
-    -webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
-}
-.mui-pciker-list,
-.mui-pciker-rule {
-    box-sizing: border-box;
-    padding: 0px;
-    margin: 0px;
-    width: 100%;
-    height: 36px;
-    line-height: 36px;
-    position: absolute;
-    left: 0px;
-    top: 50%;
-    margin-top: -18px;
-}
-.mui-pciker-rule-bg {
-    z-index: 0;
-    /*background-color: #cfd5da;*/
-}
-.mui-pciker-rule-ft {
-    z-index: 2;
-    border-top: solid 1px rgba(0, 0, 0, 0.1);
-    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
-    /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
-    /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
-}
-.mui-pciker-list {
-    z-index: 1;
-    -webkit-transform-style: preserve-3d;
-    transform-style: preserve-3d;
-    -webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
-    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
-}
-.mui-pciker-list li {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    text-align: center;
-    vertical-align: middle;
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    overflow: hidden;
-    box-sizing: border-box;
-    font-size: 16px;
-    font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
-    color: #888;
-    padding: 0px 8px;
-    white-space: nowrap;
-    -webkit-text-overflow: ellipsis;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    cursor: default;
-    visibility: hidden;
-}
-.mui-pciker-list li.highlight,
-.mui-pciker-list li.visible {
-    visibility: visible;
-}
-.mui-pciker-list li.highlight {
-    color: #222;
-}
-.mui-poppicker {
-	position: fixed;
-	left: 0px;
-	width: 100%;
-	z-index: 999;
-	background-color: #eee;
-	border-top: solid 1px #ccc;
-	box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
-	-webkit-transition: .3s;
-	bottom: 0px;
-	-webkit-transform: translateY(300px);
-}
-.mui-poppicker.mui-active {
-	-webkit-transform: translateY(0px);
-}
-.mui-android-5-1 .mui-poppicker {
-	bottom: -300px;
-	-webkit-transition-property: bottom;
-	-webkit-transform: none;
-}
-.mui-android-5-1 .mui-poppicker.mui-active {
-	bottom: 0px;
-	-webkit-transition-property: bottom;
-	-webkit-transform: none;
-}
-.mui-poppicker-header {
-	padding: 6px;
-	font-size: 14px;
-	color: #888;
-}
-.mui-poppicker-header .mui-btn {
-	font-size: 12px;
-	padding: 5px 10px;
-}
-.mui-poppicker-btn-cancel {
-	float: left;
-}
-.mui-poppicker-btn-ok {
-	float: right;
-}
-.mui-poppicker-clear {
-	clear: both;
-	height: 0px;
-	line-height: 0px;
-	font-size: 0px;
-	overflow: hidden;
-}
-.mui-poppicker-body {
-	position: relative;
-	width: 100%;
-	height: 200px;
-	border-top: solid 1px #ddd;
-	/*-webkit-perspective: 1200px;
-	perspective: 1200px;
-	-webkit-transform-style: preserve-3d;
-	transform-style: preserve-3d;*/
-}
-.mui-poppicker-body .mui-picker {
-	width: 100%;
-	height: 100%;
-	margin: 0px;
-	border: none;
-	float: left;
-}
-.mui-dtpicker {
-	position: fixed;
-	left: 0px;
-	width: 100%;
-	z-index: 999999;
-	background-color: #eee;
-	border-top: solid 1px #ccc;
-	box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
-	-webkit-transition: .3s;
-	bottom: 0px;
-	-webkit-transform: translateY(300px);
-}
-.mui-dtpicker.mui-active {
-	-webkit-transform: translateY(0px);
-}
-/*用于将 html body 禁止滚动条*/
-
-.mui-dtpicker-active-for-page {
-	overflow: hidden !important;
-}
-.mui-android-5-1 .mui-dtpicker {
-	bottom: -300px;
-	-webkit-transition-property: bottom;
-	-webkit-transform: none;
-}
-.mui-android-5-1 .mui-dtpicker.mui-active {
-	bottom: 0px;
-	-webkit-transition-property: bottom;
-	-webkit-transform: none;
-}
-.mui-dtpicker-header {
-	padding: 6px;
-	font-size: 14px;
-	color: #888;
-}
-.mui-dtpicker-header button {
-	font-size: 12px;
-	padding: 5px 10px;
-}
-.mui-dtpicker-header button:last-child {
-	float: right;
-}
-.mui-dtpicker-body {
-	position: relative;
-	width: 100%;
-	height: 200px;
-	/*border-top: solid 1px #eee;
-	background-color: #fff;*/
-}
-.mui-ios .mui-dtpicker-body {
-	-webkit-perspective: 1200px;
-	perspective: 1200px;
-	-webkit-transform-style: preserve-3d;
-	transform-style: preserve-3d;
-}
-.mui-dtpicker-title h5 {
-	display: inline-block;
-	width: 20%;
-	margin: 0px;
-	padding: 8px;
-	text-align: center;
-	border-top: solid 1px #ddd;
-	background-color: #f0f0f0;
-	border-bottom: solid 1px #ccc;
-}
-.mui-dtpicker .mui-picker {
-	width: 20%;
-	height: 100%;
-	margin: 0px;
-	float: left;
-	border: none;
-}
-/*年月日时分*/
-
-[data-type="datetime"] .mui-picker,
-[data-type="time"] .mui-dtpicker-title h5 {
-	width: 20%;
-}
-[data-type="datetime"] [data-id="picker-h"],
-[data-type="datetime"] [data-id="title-h"] {
-	border-left: dotted 1px #ccc;
-}
-/*年月日*/
-
-[data-type="date"] .mui-picker,
-[data-type="date"] .mui-dtpicker-title h5 {
-	width: 33.3%;
-}
-[data-type="date"] [data-id="picker-h"],
-[data-type="date"] [data-id="picker-i"],
-[data-type="date"] [data-id="title-h"],
-[data-type="date"] [data-id="title-i"] {
-	display: none;
-}
-/*年月日时*/
-
-[data-type="hour"] .mui-picker,
-[data-type="hour"] .mui-dtpicker-title h5 {
-	width: 25%;
-}
-[data-type="hour"] [data-id="picker-i"],
-[data-type="hour"] [data-id="title-i"] {
-	display: none;
-}
-[data-type="hour"] [data-id="picker-h"],
-[data-type="hour"] [data-id="title-h"] {
-	border-left: dotted 1px #ccc;
-}
-/*时分*/
-
-[data-type="time"] .mui-picker,
-[data-type="time"] .mui-dtpicker-title h5 {
-	width: 50%;
-}
-[data-type="time"] [data-id="picker-y"],
-[data-type="time"] [data-id="picker-m"],
-[data-type="time"] [data-id="picker-d"],
-[data-type="time"] [data-id="title-y"],
-[data-type="time"] [data-id="title-m"],
-[data-type="time"] [data-id="title-d"] {
-	display: none;
-}
-/*年月*/
-
-[data-type="month"] .mui-picker,
-[data-type="month"] .mui-dtpicker-title h5 {
-	width: 50%;
-}
-[data-type="month"] [data-id="picker-d"],
-[data-type="month"] [data-id="picker-h"],
-[data-type="month"] [data-id="picker-i"],
-[data-type="month"] [data-id="title-d"],
-[data-type="month"] [data-id="title-h"],
-[data-type="month"] [data-id="title-i"] {
-	display: none;
-}

WebChat/css/mui.poppicker.css

@@ -0,0 +1,64 @@
+.mui-poppicker {
+	position: fixed;
+	left: 0px;
+	width: 100%;
+	z-index: 999;
+	background-color: #eee;
+	border-top: solid 1px #ccc;
+	box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
+	-webkit-transition: .3s;
+	bottom: 0px;
+	-webkit-transform: translateY(300px);
+}
+.mui-poppicker.mui-active {
+	-webkit-transform: translateY(0px);
+}
+.mui-android-5-1 .mui-poppicker {
+	bottom: -300px;
+	-webkit-transition-property: bottom;
+	-webkit-transform: none;
+}
+.mui-android-5-1 .mui-poppicker.mui-active {
+	bottom: 0px;
+	-webkit-transition-property: bottom;
+	-webkit-transform: none;
+}
+.mui-poppicker-header {
+	padding: 6px;
+	font-size: 14px;
+	color: #888;
+}
+.mui-poppicker-header .mui-btn {
+	font-size: 12px;
+	padding: 5px 10px;
+}
+.mui-poppicker-btn-cancel {
+	float: left;
+}
+.mui-poppicker-btn-ok {
+	float: right;
+}
+.mui-poppicker-clear {
+	clear: both;
+	height: 0px;
+	line-height: 0px;
+	font-size: 0px;
+	overflow: hidden;
+}
+.mui-poppicker-body {
+	position: relative;
+	width: 100%;
+	height: 200px;
+	border-top: solid 1px #ddd;
+	/*-webkit-perspective: 1200px;
+	perspective: 1200px;
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;*/
+}
+.mui-poppicker-body .mui-picker {
+	width: 100%;
+	height: 100%;
+	margin: 0px;
+	border: none;
+	float: left;
+}

WebChat/html/myTouSu.html

@@ -8,6 +8,9 @@
 		<meta name="apple-mobile-web-app-capable" content="yes">
 		<meta name="apple-mobile-web-app-status-bar-style" content="black">
 		<link href="../css/mui.min.css" rel="stylesheet" />
+		<link rel="stylesheet" href="../css/app.css" />
+		<link href="../css/mui.picker.css" rel="stylesheet" />
+		<link href="../css/mui.poppicker.css" rel="stylesheet" />
 		<link rel="stylesheet" href="../css/iconfont.css" />
 		<link rel="stylesheet" href="../css/inits.css" />
 		<style>
@@ -58,9 +61,10 @@
 		<div class="mui-content">
 			<ul class="mui-table-view">
 				 <li class="mui-table-view-cell">
-				 	<div class="mui-input-row" id="showUserPicker">
+				 	<div class="mui-input-row" >
 						<label>诉求类型：</label>
 						<input type="text" id='userResult' class="ui-alert" />
+						<a href="" ><span id="showUserPicker" class="mui-icon mui-icon-arrowdown mui-pull-right"></span></a>
 					</div>
 				 </li>
 		         <li class="mui-table-view-cell">
@@ -109,55 +113,46 @@
 		</div>
 		
 		<script src="../js/mui.min.js"></script>
+		<script src="../js/mui.picker.js"></script>
+		<script src="../js/mui.poppicker.js"></script>
 		<script type="text/javascript">
 //			mui.init()
 		(function($, doc) {
 				$.init();
 				$.ready(function() {
-					//普通示例
+						//普通示例
 					var userPicker = new $.PopPicker();
 					userPicker.setData([{
-						value: 'ywj',
-						text: '董事长 叶文洁'
+						"value": "ywj",
+						"text": "叶文洁"
 					}, {
-						value: 'aaa',
-						text: '总经理 艾AA'
+						"value": "aaa",
+						"text": "艾AA"
 					}, {
-						value: 'lj',
-						text: '罗辑'
+						"value": "lj",
+						"text": "罗辑"
 					}, {
-						value: 'ymt',
-						text: '云天明'
+						"value": "ymt",
+						"text": "云天明"
 					}, {
-						value: 'shq',
-						text: '史强'
+						"value": "shq",
+						"text": "史强"
 					}, {
-						value: 'zhbh',
-						text: '章北海'
-					}, {
-						value: 'zhy',
-						text: '庄颜'
-					}, {
-						value: 'gyf',
-						text: '关一帆'
-					}, {
-						value: 'zhz',
-						text: '智子'
-					}, {
-						value: 'gezh', 
-						text: '歌者'
+						"value": "zhbh",
+						"text": "章北海"
 					}]);
 					var showUserPickerButton = doc.getElementById('showUserPicker');
 					var userResult = doc.getElementById('userResult');
 					showUserPickerButton.addEventListener('tap', function(event) {
 						userPicker.show(function(items) {
-							userResult.innerText = JSON.stringify(items[0]);
+						console.log(items)
+							userResult.value = items[0].text;
 							//返回 false 可以阻止选择框的关闭
 							//return false;
 						});
 					}, false);
 				})
-		})
+		})(mui, document);
 			
 		</script>
 	</body>

WebChat/js/mui.picker.js

@@ -0,0 +1,389 @@
+/**
+ * 选择列表插件
+ * varstion 2.0.0
+ * by Houfeng
+ * Houfeng@DCloud.io
+ */
+
+(function($, window, document, undefined) {
+
+	var MAX_EXCEED = 30;
+	var VISIBLE_RANGE = 90;
+	var DEFAULT_ITEM_HEIGHT = 40;
+	var BLUR_WIDTH = 10;
+
+	var rad2deg = $.rad2deg = function(rad) {
+		return rad / (Math.PI / 180);
+	};
+
+	var deg2rad = $.deg2rad = function(deg) {
+		return deg * (Math.PI / 180);
+	};
+
+	var platform = navigator.platform.toLowerCase();
+	var userAgent = navigator.userAgent.toLowerCase();
+	var isIos = (userAgent.indexOf('iphone') > -1 ||
+			userAgent.indexOf('ipad') > -1 ||
+			userAgent.indexOf('ipod') > -1) &&
+		(platform.indexOf('iphone') > -1 ||
+			platform.indexOf('ipad') > -1 ||
+			platform.indexOf('ipod') > -1);
+	//alert(isIos);
+
+	var Picker = $.Picker = function(holder, options) {
+		var self = this;
+		self.holder = holder;
+		self.options = options || {};
+		self.init();
+		self.initInertiaParams();
+		self.calcElementItemPostion(true);
+		self.bindEvent();
+	};
+
+	Picker.prototype.findElementItems = function() {
+		var self = this;
+		self.elementItems = [].slice.call(self.holder.querySelectorAll('li'));
+		return self.elementItems;
+	};
+
+	Picker.prototype.init = function() {
+		var self = this;
+		self.list = self.holder.querySelector('ul');
+		self.findElementItems();
+		self.height = self.holder.offsetHeight;
+		self.r = self.height / 2 - BLUR_WIDTH;
+		self.d = self.r * 2;
+		self.itemHeight = self.elementItems.length > 0 ? self.elementItems[0].offsetHeight : DEFAULT_ITEM_HEIGHT;
+		self.itemAngle = parseInt(self.calcAngle(self.itemHeight * 0.8));
+		self.hightlightRange = self.itemAngle / 2;
+		self.visibleRange = VISIBLE_RANGE;
+		self.beginAngle = 0;
+		self.beginExceed = self.beginAngle - MAX_EXCEED;
+		self.list.angle = self.beginAngle;
+		if (isIos) {
+			self.list.style.webkitTransformOrigin = "center center " + self.r + "px";
+		}
+	};
+
+	Picker.prototype.calcElementItemPostion = function(andGenerateItms) {
+		var self = this;
+		if (andGenerateItms) {
+			self.items = [];
+		}
+		self.elementItems.forEach(function(item) {
+			var index = self.elementItems.indexOf(item);
+			self.endAngle = self.itemAngle * index;
+			item.angle = self.endAngle;
+			item.style.webkitTransformOrigin = "center center -" + self.r + "px";
+			item.style.webkitTransform = "translateZ(" + self.r + "px) rotateX(" + (-self.endAngle) + "deg)";
+			if (andGenerateItms) {
+				var dataItem = {};
+				dataItem.text = item.innerHTML || '';
+				dataItem.value = item.getAttribute('data-value') || dataItem.text;
+				self.items.push(dataItem);
+			}
+		});
+		self.endExceed = self.endAngle + MAX_EXCEED;
+		self.calcElementItemVisibility(self.beginAngle);
+	};
+
+	Picker.prototype.calcAngle = function(c) {
+		var self = this;
+		var a = b = parseFloat(self.r);
+		//直径的整倍数部分直接乘以 180
+		c = Math.abs(c); //只算角度不关心正否值
+		var intDeg = parseInt(c / self.d) * 180;
+		c = c % self.d;
+		//余弦
+		var cosC = (a * a + b * b - c * c) / (2 * a * b);
+		var angleC = intDeg + rad2deg(Math.acos(cosC));
+		return angleC;
+	};
+
+	Picker.prototype.calcElementItemVisibility = function(angle) {
+		var self = this;
+		self.elementItems.forEach(function(item) {
+			var difference = Math.abs(item.angle - angle);
+			if (difference < self.hightlightRange) {
+				item.classList.add('highlight');
+			} else if (difference < self.visibleRange) {
+				item.classList.add('visible');
+				item.classList.remove('highlight');
+			} else {
+				item.classList.remove('highlight');
+				item.classList.remove('visible');
+			}
+		});
+	};
+
+	Picker.prototype.setAngle = function(angle) {
+		var self = this;
+		self.list.angle = angle;
+		self.list.style.webkitTransform = "perspective(1000px) rotateY(0deg) rotateX(" + angle + "deg)";
+		self.calcElementItemVisibility(angle);
+	};
+
+	Picker.prototype.bindEvent = function() {
+		var self = this;
+		var lastAngle = 0;
+		var startY = null;
+		var isPicking = false;
+		self.holder.addEventListener($.EVENT_START, function(event) {
+			isPicking = true;
+			event.preventDefault();
+			self.list.style.webkitTransition = '';
+			startY = (event.changedTouches ? event.changedTouches[0] : event).pageY;
+			lastAngle = self.list.angle;
+			self.updateInertiaParams(event, true);
+		}, false);
+		self.holder.addEventListener($.EVENT_END, function(event) {
+			isPicking = false;
+			event.preventDefault();
+			self.startInertiaScroll(event);
+		}, false);
+		self.holder.addEventListener($.EVENT_CANCEL, function(event) {
+			isPicking = false;
+			event.preventDefault();
+			self.startInertiaScroll(event);
+		}, false);
+		self.holder.addEventListener($.EVENT_MOVE, function(event) {
+			if (!isPicking) {
+				return;
+			}
+			event.preventDefault();
+			var endY = (event.changedTouches ? event.changedTouches[0] : event).pageY;
+			var dragRange = endY - startY;
+			var dragAngle = self.calcAngle(dragRange);
+			var newAngle = dragRange > 0 ? lastAngle - dragAngle : lastAngle + dragAngle;
+			if (newAngle > self.endExceed) {
+				newAngle = self.endExceed
+			}
+			if (newAngle < self.beginExceed) {
+				newAngle = self.beginExceed
+			}
+			self.setAngle(newAngle);
+			self.updateInertiaParams(event);
+		}, false);
+		//--
+		self.list.addEventListener('tap', function(event) {
+			elementItem = event.target;
+			if (elementItem.tagName == 'LI') {
+				self.setSelectedIndex(self.elementItems.indexOf(elementItem), 200);
+			}
+		}, false);
+	};
+
+	Picker.prototype.initInertiaParams = function() {
+		var self = this;
+		self.lastMoveTime = 0;
+		self.lastMoveStart = 0;
+		self.stopInertiaMove = false;
+	};
+
+	Picker.prototype.updateInertiaParams = function(event, isStart) {
+		var self = this;
+		var point = event.changedTouches ? event.changedTouches[0] : event;
+		if (isStart) {
+			self.lastMoveStart = point.pageY;
+			self.lastMoveTime = event.timeStamp || Date.now();
+			self.startAngle = self.list.angle;
+		} else {
+			var nowTime = event.timeStamp || Date.now();
+			if (nowTime - self.lastMoveTime > 300) {
+				self.lastMoveTime = nowTime;
+				self.lastMoveStart = point.pageY;
+			}
+		}
+		self.stopInertiaMove = true;
+	};
+
+	Picker.prototype.startInertiaScroll = function(event) {
+		var self = this;
+		var point = event.changedTouches ? event.changedTouches[0] : event;
+		/** 
+		 * 缓动代码
+		 */
+		var nowTime = event.timeStamp || Date.now();
+		var v = (point.pageY - self.lastMoveStart) / (nowTime - self.lastMoveTime); //最后一段时间手指划动速度  
+		var dir = v > 0 ? -1 : 1; //加速度方向  
+		var deceleration = dir * 0.0006 * -1;
+		var duration = Math.abs(v / deceleration); // 速度消减至0所需时间  
+		var dist = v * duration / 2; //最终移动多少 
+		var startAngle = self.list.angle;
+		var distAngle = self.calcAngle(dist) * dir;
+		//----
+		var srcDistAngle = distAngle;
+		if (startAngle + distAngle < self.beginExceed) {
+			distAngle = self.beginExceed - startAngle;
+			duration = duration * (distAngle / srcDistAngle) * 0.6;
+		}
+		if (startAngle + distAngle > self.endExceed) {
+			distAngle = self.endExceed - startAngle;
+			duration = duration * (distAngle / srcDistAngle) * 0.6;
+		}
+		//----
+		if (distAngle == 0) {
+			self.endScroll();
+			return;
+		}
+		self.scrollDistAngle(nowTime, startAngle, distAngle, duration);
+	};
+
+	Picker.prototype.scrollDistAngle = function(nowTime, startAngle, distAngle, duration) {
+		var self = this;
+		self.stopInertiaMove = false;
+		(function(nowTime, startAngle, distAngle, duration) {
+			var frameInterval = 13;
+			var stepCount = duration / frameInterval;
+			var stepIndex = 0;
+			(function inertiaMove() {
+				if (self.stopInertiaMove) return;
+				var newAngle = self.quartEaseOut(stepIndex, startAngle, distAngle, stepCount);
+				self.setAngle(newAngle);
+				stepIndex++;
+				if (stepIndex > stepCount - 1 || newAngle < self.beginExceed || newAngle > self.endExceed) {
+					self.endScroll();
+					return;
+				}
+				setTimeout(inertiaMove, frameInterval);
+			})();
+		})(nowTime, startAngle, distAngle, duration);
+	};
+
+	Picker.prototype.quartEaseOut = function(t, b, c, d) {
+		return -c * ((t = t / d - 1) * t * t * t - 1) + b;
+	};
+
+	Picker.prototype.endScroll = function() {
+		var self = this;
+		if (self.list.angle < self.beginAngle) {
+			self.list.style.webkitTransition = "150ms ease-out";
+			self.setAngle(self.beginAngle);
+		} else if (self.list.angle > self.endAngle) {
+			self.list.style.webkitTransition = "150ms ease-out";
+			self.setAngle(self.endAngle);
+		} else {
+			var index = parseInt((self.list.angle / self.itemAngle).toFixed(0));
+			self.list.style.webkitTransition = "100ms ease-out";
+			self.setAngle(self.itemAngle * index);
+		}
+		self.triggerChange();
+	};
+
+	Picker.prototype.triggerChange = function(force) {
+		var self = this;
+		setTimeout(function() {
+			var index = self.getSelectedIndex();
+			var item = self.items[index];
+			if ($.trigger && (index != self.lastIndex || force === true)) {
+				$.trigger(self.holder, 'change', {
+					"index": index,
+					"item": item
+				});
+				//console.log('change:' + index);
+			}
+			self.lastIndex = index;
+			typeof force === 'function' && force();
+		}, 0);
+	};
+
+	Picker.prototype.correctAngle = function(angle) {
+		var self = this;
+		if (angle < self.beginAngle) {
+			return self.beginAngle;
+		} else if (angle > self.endAngle) {
+			return self.endAngle;
+		} else {
+			return angle;
+		}
+	};
+
+	Picker.prototype.setItems = function(items) {
+		var self = this;
+		self.items = items || [];
+		var buffer = [];
+		self.items.forEach(function(item) {
+			if (item !== null && item !== undefined) {
+				buffer.push('<li>' + (item.text || item) + '</li>');
+			}
+		});
+		self.list.innerHTML = buffer.join('');
+		self.findElementItems();
+		self.calcElementItemPostion();
+		self.setAngle(self.correctAngle(self.list.angle));
+		self.triggerChange(true);
+	};
+
+	Picker.prototype.getItems = function() {
+		var self = this;
+		return self.items;
+	};
+
+	Picker.prototype.getSelectedIndex = function() {
+		var self = this;
+		return parseInt((self.list.angle / self.itemAngle).toFixed(0));
+	};
+
+	Picker.prototype.setSelectedIndex = function(index, duration, callback) {
+		var self = this;
+		self.list.style.webkitTransition = '';
+		var angle = self.correctAngle(self.itemAngle * index);
+		if (duration && duration > 0) {
+			var distAngle = angle - self.list.angle;
+			self.scrollDistAngle(Date.now(), self.list.angle, distAngle, duration);
+		} else {
+			self.setAngle(angle);
+		}
+		self.triggerChange(callback);
+	};
+
+	Picker.prototype.getSelectedItem = function() {
+		var self = this;
+		return self.items[self.getSelectedIndex()];
+	};
+
+	Picker.prototype.getSelectedValue = function() {
+		var self = this;
+		return (self.items[self.getSelectedIndex()] || {}).value;
+	};
+
+	Picker.prototype.getSelectedText = function() {
+		var self = this;
+		return (self.items[self.getSelectedIndex()] || {}).text;
+	};
+
+	Picker.prototype.setSelectedValue = function(value, duration, callback) {
+		var self = this;
+		for (var index in self.items) {
+			var item = self.items[index];
+			if (item.value == value) {
+				self.setSelectedIndex(index, duration, callback);
+				return;
+			}
+		}
+	};
+
+	if ($.fn) {
+		$.fn.picker = function(options) {
+			//遍历选择的元素
+			this.each(function(i, element) {
+				if (element.picker) return;
+				if (options) {
+					element.picker = new Picker(element, options);
+				} else {
+					var optionsText = element.getAttribute('data-picker-options');
+					var _options = optionsText ? JSON.parse(optionsText) : {};
+					element.picker = new Picker(element, _options);
+				}
+			});
+			return this[0] ? this[0].picker : null;
+		};
+
+		//自动初始化
+		$.ready(function() {
+			$('.mui-picker').picker();
+		});
+	}
+
+})(window.mui || window, window, document, undefined);
+//end

WebChat/js/mui.poppicker.js

@@ -0,0 +1,158 @@
+/**
+ * 弹出选择列表插件
+ * 此组件依赖 listpcker ，请在页面中先引入 mui.picker.css + mui.picker.js
+ * varstion 1.0.1
+ * by Houfeng
+ * Houfeng@DCloud.io
+ */
+
+(function($, document) {
+
+	//创建 DOM
+	$.dom = function(str) {
+		if (typeof(str) !== 'string') {
+			if ((str instanceof Array) || (str[0] && str.length)) {
+				return [].slice.call(str);
+			} else {
+				return [str];
+			}
+		}
+		if (!$.__create_dom_div__) {
+			$.__create_dom_div__ = document.createElement('div');
+		}
+		$.__create_dom_div__.innerHTML = str;
+		return [].slice.call($.__create_dom_div__.childNodes);
+	};
+
+	var panelBuffer = '<div class="mui-poppicker">\
+		<div class="mui-poppicker-header">\
+			<button class="mui-btn mui-poppicker-btn-cancel">取消</button>\
+			<button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定</button>\
+			<div class="mui-poppicker-clear"></div>\
+		</div>\
+		<div class="mui-poppicker-body">\
+		</div>\
+	</div>';
+
+	var pickerBuffer = '<div class="mui-picker">\
+		<div class="mui-picker-inner">\
+			<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
+			<ul class="mui-pciker-list">\
+			</ul>\
+			<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
+		</div>\
+	</div>';
+
+	//定义弹出选择器类
+	var PopPicker = $.PopPicker = $.Class.extend({
+		//构造函数
+		init: function(options) {
+			var self = this;
+			self.options = options || {};
+			self.options.buttons = self.options.buttons || ['取消', '确定'];
+			self.panel = $.dom(panelBuffer)[0];
+			document.body.appendChild(self.panel);
+			self.ok = self.panel.querySelector('.mui-poppicker-btn-ok');
+			self.cancel = self.panel.querySelector('.mui-poppicker-btn-cancel');
+			self.body = self.panel.querySelector('.mui-poppicker-body');
+			self.mask = $.createMask();
+			self.cancel.innerText = self.options.buttons[0];
+			self.ok.innerText = self.options.buttons[1];
+			self.cancel.addEventListener('tap', function(event) {
+				self.hide();
+			}, false);
+			self.ok.addEventListener('tap', function(event) {
+				if (self.callback) {
+					var rs = self.callback(self.getSelectedItems());
+					if (rs !== false) {
+						self.hide();
+					}
+				}
+			}, false);
+			self.mask[0].addEventListener('tap', function() {
+				self.hide();
+			}, false);
+			self._createPicker();
+			//防止滚动穿透
+			self.panel.addEventListener($.EVENT_START, function(event) {
+				event.preventDefault();
+			}, false);
+			self.panel.addEventListener($.EVENT_MOVE, function(event) {
+				event.preventDefault();
+			}, false);
+		},
+		_createPicker: function() {
+			var self = this;
+			var layer = self.options.layer || 1;
+			var width = (100 / layer) + '%';
+			self.pickers = [];
+			for (var i = 1; i <= layer; i++) {
+				var pickerElement = $.dom(pickerBuffer)[0];
+				pickerElement.style.width = width;
+				self.body.appendChild(pickerElement);
+				var picker = $(pickerElement).picker();
+				self.pickers.push(picker);
+				pickerElement.addEventListener('change', function(event) {
+					var nextPickerElement = this.nextSibling;
+					if (nextPickerElement && nextPickerElement.picker) {
+						var eventData = event.detail || {};
+						var preItem = eventData.item || {};
+						nextPickerElement.picker.setItems(preItem.children);
+					}
+				}, false);
+			}
+		},
+		//填充数据
+		setData: function(data) {
+			var self = this;
+			data = data || [];
+			self.pickers[0].setItems(data);
+		},
+		//获取选中的项（数组）
+		getSelectedItems: function() {
+			var self = this;
+			var items = [];
+			for (var i in self.pickers) {
+				var picker = self.pickers[i];
+				items.push(picker.getSelectedItem() || {});
+			}
+			return items;
+		},
+		//显示
+		show: function(callback) {
+			var self = this;
+			self.callback = callback;
+			self.mask.show();
+			document.body.classList.add($.className('poppicker-active-for-page'));
+			self.panel.classList.add($.className('active'));
+			//处理物理返回键
+			self.__back = $.back;
+			$.back = function() {
+				self.hide();
+			};
+		},
+		//隐藏
+		hide: function() {
+			var self = this;
+			if (self.disposed) return;
+			self.panel.classList.remove($.className('active'));
+			self.mask.close();
+			document.body.classList.remove($.className('poppicker-active-for-page'));
+			//处理物理返回键
+			$.back=self.__back;
+		},
+		dispose: function() {
+			var self = this;
+			self.hide();
+			setTimeout(function() {
+				self.panel.parentNode.removeChild(self.panel);
+				for (var name in self) {
+					self[name] = null;
+					delete self[name];
+				};
+				self.disposed = true;
+			}, 300);
+		}
+	});
+
+})(mui, document);

WebSite/PG.html

@@ -1,13 +1,32 @@
 <!DOCTYPE html>
-<html>
+<html xmlns:wb="http://open.weibo.com/wb">
 
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
+     <!--必填-->
+    <meta property="og:type" content="article" />
+    <meta property="og:url" content="" />
+    <meta property="og:title" content="" />
+    <meta property="og:description" content="" />
+    <!--选填-->
+    <!--<meta property="og:image" content="文章的显示图片" />-->
+    <meta name="weibo: article:create_at" content="" />
     <title>曝光台</title>
     <link rel="stylesheet" href="css/bootstrap.min.css" />
     <link rel="stylesheet" href="css/indexs.css" />
     <link rel="stylesheet" href="css/bootstrap-table.css" />
+    <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
+    <!--微博直播,微博发布器 用-->
+    <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=4157670774" type="text/javascript" charset="utf-8"></script>
+    <!--微博发布器 调试用 debug=true-->
+    <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=4157670774&debug=true" type="text/javascript" charset="utf-8"></script>
+    <style>
+  	.weibo{
+  		display: inline-block;
+  		vertical-align: middle;
+  	}
+   </style>
 </head>
 
 <body>
@@ -98,7 +117,9 @@
                         <div class="main-content">
 
                             <div class="content-title"></div>
-                            <div class="content-info">来源：本站&nbsp;&nbsp;发布日期：<em class="RQ" style="font-style:normal;"></em> &nbsp;</div>
+                            <div class="content-info">来源：本站&nbsp;&nbsp;发布日期：<em class="RQ" style="font-style:normal;"></em> &nbsp;
+								<sapn class="weibo"><wb:share-button appkey="4157670774" addition="simple" type="button" language="zh_cn"></wb:share-button></sapn>
+                            </div>
                             <div class="content-text">
                                 <div class="content-img" style="text-align: center;width: 100%;">
                                 </div>
@@ -144,6 +165,13 @@
                     $(".RQ").text(result.data.time);
                     $(".news_content_content").html(result.data.nr);
                     $('<img style="width:100%;"src="' + result.data.img + '" alt="" />').appendTo(".content-img")
+                
+						$('meta[property="og:title"]').attr('content',result.data.bt);
+//						$('meta[property="og:description"]').attr('content',result.data.nr);
+						$('meta[property="og:url"]').attr('content',window.location.href);
+						$('meta[name="weibo: article:create_at"]').attr('content',result.data.sj);
+						
+                
                 }
             })
         }

WebSite/dongtai-con.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html xmlns:wb="http://open.weibo.com/wb">
 
 	<head>
 		<meta charset="UTF-8">
@@ -17,9 +17,9 @@
 		<link rel="stylesheet" href="css/bootstrap.min.css" />
 		<link rel="stylesheet" href="css/indexs.css" />
 				<!--[if lt IE 9]>
-  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
-  <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
-<![endif]-->
+	  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
+	  <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
+	 <![endif]-->
   <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
     <!--微博直播,微博发布器 用-->
     <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=4157670774" type="text/javascript" charset="utf-8"></script>
@@ -32,7 +32,6 @@
   		vertical-align: middle;
   	}
   </style>
-
 	</head>
 
 	<body>
@@ -178,7 +177,7 @@
 					</div>
 				
 				<!--微博分享-->
-				<div style="width:100%;"><wb:comments url="auto" width="auto" appkey="2353346562"></wb:comments></div>
+				<!--<div style="width:100%;"><wb:comments url="auto" width="auto" appkey="2353346562"></wb:comments></div>-->
 				</div>
 			</div>
 		</div>

WebSite/gonggao-con.html

@@ -1,16 +1,37 @@
 <!DOCTYPE html>
-<html>
+<html xmlns:wb="http://open.weibo.com/wb">
 
 	<head>
 		<meta charset="UTF-8">
 		<meta http-equiv="x-ua-compatible" content="ie=edge">
+		 <!--必填-->
+	    <meta property="og:type" content="article" />
+	    <meta property="og:url" content="" />
+	    <meta property="og:title" content="" />
+	    <meta property="og:description" content="" />
+	    <!--选填-->
+	    <!--<meta property="og:image" content="文章的显示图片" />-->
+	    <meta name="weibo: article:create_at" content="" />
 		<title>通告通知</title>
 		<link rel="stylesheet" href="../css/bootstrap.min.css" />
 		<link rel="stylesheet" href="../css/indexs.css" />
 				<!--[if lt IE 9]>
-  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
-  <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
-<![endif]-->
+	  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
+	  <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
+	<![endif]-->
+	
+	  <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
+    <!--微博直播,微博发布器 用-->
+    <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=4157670774" type="text/javascript" charset="utf-8"></script>
+    <!--微博发布器 调试用 debug=true-->
+    <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=4157670774&debug=true" type="text/javascript" charset="utf-8"></script>
+	 <style>
+	  	.weibo{
+	  		display: inline-block;
+	  		vertical-align: middle;
+	  	}
+	  </style>
+
 	</head>
 
 	<body>
@@ -100,7 +121,10 @@
 							</div>
 							<div class="main-content">
 								<div class="content-title"></div>
-								<div class="content-info">来源：本站&nbsp;&nbsp;发布日期：<em class="RQ" style="font-style:normal;"></em> &nbsp;</div>
+								<div class="content-info">来源：本站&nbsp;&nbsp;发布日期：<em class="RQ" style="font-style:normal;"></em> &nbsp;
+								<sapn class="weibo"><wb:share-button appkey="4157670774" addition="simple" type="button" language="zh_cn"></wb:share-button></sapn>
+								</div>
+								
 								<div class="content-text">
 									<div class="news_content_content">
 
@@ -143,6 +167,12 @@
 						$(".content-title").text(result.data.bt);
 						$(".RQ").text(result.data.sj);
 						$(".news_content_content").html(result.data.nr);
+						
+						$('meta[property="og:title"]').attr('content',result.data.bt);
+//						$('meta[property="og:description"]').attr('content',result.data.nr);
+						$('meta[property="og:url"]').attr('content',window.location.href);
+						$('meta[name="weibo: article:create_at"]').attr('content',result.data.sj);
+						
 					}
 				})
 			}

WebSite/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html xmlns:wb="http://open.weibo.com/wb">
 
 	<head>
 		<meta charset="UTF-8">

WebSite/zhengce-con.html

@@ -1,9 +1,14 @@
 <!DOCTYPE html>
-<html>
+<html xmlns:wb="http://open.weibo.com/wb">
 
 	<head>
 		<meta charset="UTF-8">
-			<meta http-equiv="x-ua-compatible" content="ie=edge">
+		<meta http-equiv="x-ua-compatible" content="ie=edge">
+	    <meta property="og:type" content="article" />
+	    <meta property="og:url" content="" />
+	    <meta property="og:title" content="" />
+	    <meta property="og:description" content="" />
+	    <meta name="weibo: article:create_at" content="" />
 		<title></title>
 		<link rel="stylesheet" href="css/bootstrap.min.css" />
 		<link rel="stylesheet" href="css/indexs.css" />
@@ -11,6 +16,20 @@
   <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
   <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
+    <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
+    <!--微博直播,微博发布器 用-->
+    <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=4157670774" type="text/javascript" charset="utf-8"></script>
+    <!--微博发布器 调试用 debug=true-->
+    <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=4157670774&debug=true" type="text/javascript" charset="utf-8"></script>
+	
+	 <style>
+  	.weibo{
+  		display: inline-block;
+  		vertical-align: middle;
+  	}
+  </style>
+
+	
 	</head>
 
 	<body>
@@ -98,7 +117,9 @@
 							</div>
 							<div class="main-content">
 								<div class="content-title"></div>
-								<div class="content-info">来源：本站&nbsp;&nbsp;发布日期：<em class="RQ" style="font-style:normal;"></em> &nbsp;</div>
+								<div class="content-info">来源：本站&nbsp;&nbsp;发布日期：<em class="RQ" style="font-style:normal;"></em> &nbsp;
+								<sapn class="weibo"><wb:share-button appkey="4157670774" addition="simple" type="button" language="zh_cn"></wb:share-button></sapn>
+								</div>
 								<div class="content-text">
 									<div class="news_content_content">
 
@@ -140,6 +161,15 @@
 						$(".content-title").text(result.data.bt);
 						$(".RQ").text(result.data.sj);
 						$(".news_content_content").html(result.data.nr);
+						
+						
+						$('meta[property="og:title"]').attr('content',result.data.bt);
+//						$('meta[property="og:description"]').attr('content',result.data.nr);
+						$('meta[property="og:url"]').attr('content',window.location.href);
+						$('meta[name="weibo: article:create_at"]').attr('content',result.data.sj);
+						
+						
+						
 					}
 				})
 			}

WebUI/CallCenterWeb.UI/widgets.html

@@ -610,7 +610,7 @@
 					<div class="ibox float-e-margins mt">
 						<div class="ibox-content">
 							<div class="flot-chart">
-								<div class="flot-chart-content" id="flot-pie-chart" style="height: 300px;width: 110%;"></div>
+								<div class="flot-chart-content" id="flot-pie-chart" style="height: 300px;width: 100%;"></div>
 							</div>
 						</div>
 					</div>

WebUI/CallCenterWeb.UI/zhiShiKu/addZhiShiKu.html

@@ -216,9 +216,6 @@
 			$('.inps').focus(function() {
 				$('.xlAdd').css('display', 'block')
 			})
-			$('.inps').blur(function() {
-				$('.xlAdd').css('display', 'none')
-			})
 			$('.xl').click(function() {
 				if($('.xlAdd').css('display') == 'block') {
 					$('.xlAdd').css('display', 'none')

WebUI/CallCenterWeb.UI/zhiShiKu/js/zhiShiKuFenLei.js

@@ -134,9 +134,6 @@
 	$('.inps1').focus(function() {
 		$('.xlAdd').css('display', 'block')
 	})
-	$('.inps1').blur(function() {
-		$('.xlAdd').css('display', 'none')
-	})
 	$('.xl_one').click(function() {
 		if($('.xlAdd').css('display') == 'block') {
 			$('.xlAdd').css('display', 'none')
@@ -229,10 +226,6 @@
 	$('.inps4').focus(function() {
 		$('.xlChange').css('display', 'block')
 	})
-	$('.inps4').blur(function() {
-		$('.xlChange').css('display', 'none')
-	})
-	
 	//下拉按钮功能
 	$('.xl_two').click(function() {
 		if($('.xlChange').css('display') == 'block') {