master

分支 (1)

管理

管理

master

Example
/
addDiv.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>添加新窗口</title>
	<style type="text/css">
		html,body {
			width:100%;
			height:100%;
			padding:0px;
			margin: 0px;
			cursor: default;
		}

		#move {
			background: rgba(0,159,93,.6);
			width:200px;
			height:100%;
			position: absolute;
		}

		#tag {
			position:absolute;
			background: white;
			box-shadow: 0px 0px 12px rgba(0,0,0,.4);
			width:100px;
			border-left: 1px solid rgba(0,0,0,.2);
			border-right: 1px solid rgba(0,0,0,.2);
			border-top: 1px solid rgba(0,0,0,.2);
		}

		#tag .item {
			width:100%;
			line-height: 24px;
			text-align: center;
			color:#555;
			border-bottom: 1px solid rgba(0,0,0,.3);
			cursor: pointer;
			transition: all 0.3s ease;
		    -webkit-transition: all 0.3s ease;
		    -moz-transition:all 0.3s ease;
		    -o-transition:all 0.3s ease;
		}

		#tag .item:hover {
			background: #019fde;
			color:white;
		}

		#move .menu {
			width:100%;
			list-style: none;
			margin:0px;
			padding:0px;
		}

		#move .menu .item {
			padding : 0px 20px;
			cursor: pointer;
			line-height: 30px;
			font-size: 14px;
		}

		#move .select_menu {
			font-size: 14px;
		    line-height: 24px;
		    overflow: hidden;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    padding-left: 15px;
		    background: rgba(159, 159, 159, 0.71);
		    cursor: default!important;
		    position: fixed;
		    top: 0;
		    left: 0;
		    z-index: 1000;
		    opacity: 0.5;
		}

		#move .select_menu a {
			color : white;
			margin: 0 10px 0 5px;
		}
	</style>
</head>
<body>
<div id="move" v-on:mousedown="onMouseDown($event)">
	<div id="tag"  v-if="tagShow" v-bind:style="positionStyle">
		<div class="item">item1</div>
		<div class="item">item1</div>
		<div class="item">item1</div>
	</div>
	<ul class="menu">
		<li class="item" v-on:click="onClick(item)"
		v-on:mousedown.stop="onMouseDown($event,index,item)" v-for="(index,item) in tree"><a>{{item}}</a></li>
	</ul>
	<div class="select_menu"  v-if="selectShow" v-bind:style="menuStyle">
		<a>{{selectPointer}}</a>
	</div>
</div>
<div class="content">
	<div class="wicket"></div>
</div>
</body>
<script type="text/javascript" src="semantic/js/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el : 'body',
		data : {
			positionStyle : '',
			menuStyle : '',
			tagShow : false,
			rightClick : true,
			postionX : '',
			positionY : '',
			tree : [
				"第一章","第二章","第三章","第四章","第五章"
			],
			selectPointer : '',
			selectShow : false,
			mouseDownAndUpTimer : null,
			lock : true

		},
		methods : {
			onClick : function(item) {
				if(this.lock){
					alert(item);
				}

			},
			onMouseDown : function(e,index,item) {
				var e = e || window.event;
				var self = this;
				document.getElementById("move").oncontextmenu = function(){
					return false;
				};
				document.getElementById("move").onselectstart = onselectstart = new Function('event.returnValue=false;');
				if(e.button == 2 && self.rightClick) {
					self.positionStyle = {
						left : e.clientX + 'px',
						top : e.clientY + 'px'
					};
					self.tagShow = true;
					self.rightClick = false;
				}else if (e.button == 0) {
					self.tagShow = false;
					self.rightClick = true;
					item = typeof(item) == "undefined" ? "" : item;
					index = typeof(index) == "undefined" ? "" : index;
					self.selectPointer = item;
					if(self.selectPointer != "") {
						self.mouseDownAndUpTimer = setTimeout(function(){
							self.selectShow = true;
						},150);
					}
				}
			},
			moveSelect : function(e) {
				var self = this;
				e = e || window.event;
				self.menuStyle = {
					top : e.clientY + 'px',
					left : e.clientX+20+ 'px',
					background : '#ff1244',
					color : 'white'
				};
				if(Number(e.clientX) > 200) {
					self.menuStyle.background = "#d1d2d4";
					self.menuStyle.color = "#999"
				}
			},
			cancelSelect : function(e) {
				var self = this;
				if(self.selectShow) {
					self.selectShow = false;
					self.selectPointer = "";
					self.lock = false;
				}else {
					clearTimeout(self.mouseDownAndUpTimer);
					self.lock = true;
				}

			}
		},
		ready : function(){
                    var self = this;
                    document.onmousemove = self.moveSelect;
                    document.onmouseup = self.cancelSelect;
                }
	});
</script>
</html>