wcheng81
/
LSQZrzyAPP


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>APP测试页面</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<!-- 引入自定义样式 -->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<!-- 引入地图页面独有样式 -->
		<link rel="stylesheet" type="text/css" href="css/cr.map.css" />
		<link rel="stylesheet" type="text/css" href="fonts/TTTGB-Medium.css" />
		<style type="text/css">
			.test {
				color: white;
			}
		</style>
	</head>
	<body>
		<!-- <div class="jt-tooltip-popup" onclick="$(this).hide()">
			<div>
				<span class='title'>JKQ20211218123423</span>
				<div>
					<span class="state"><待处理></待处理></span><span class="area">[1.45亩]</span>
				</div>
			</div>
			<div></div>
			<div></div>
		</div>
		<button onclick="test()">测试</button> -->

		<div>
			<ul class="mui-table-view mui-grid-view mui-grid-9" id="test">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<span class="mui-icon mui-icon-home"></span>
					<div class="mui-media-body">Home</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
					<div class="mui-media-body">Email</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<span class="mui-icon mui-icon-chatbubble"></span>
					<div class="mui-media-body">Chat</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<span class="mui-icon mui-icon-location"></span>
					<div class="mui-media-body">location</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<span class="mui-icon mui-icon-search"></span>
					<div class="mui-media-body">Search</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<span class="mui-icon mui-icon-phone"></span>
					<div class="mui-media-body">Phone</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<span class="mui-icon mui-icon-gear"></span>
					<div class="mui-media-body">Setting</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<span class="mui-icon mui-icon-info"></span>
					<div class="mui-media-body">about</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<span class="mui-icon mui-icon-more"></span>
					<div class="mui-media-body">more</div>
				</li>
			</ul>
		</div>


	</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Sortable/Sortable.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

   var list = document.getElementById('test');
	Sortable.create(list);

	// createAirBubbleWindow({
	// 	title: 'YTZ20211223102314',
	// 	id: 'YTZ20211223102314',
	// 	sup: '[123]',
	// 	lng: 118.349,
	// 	lat: 37.26,
	// });

	/**
	 * 创建气泡窗口
	 * @param {JSON} options 配置项
	 * title{string}:标题
	 * sup{string}:子标题
	 * lng{float}:经度
	 * lat{float}:纬度
	 * left{float}:距离左侧位置
	 * top{float}:距离顶部位置
	 */
	// function createAirBubbleWindow(options) {
	// 	var airWindowId = options.id;
	// 	/* 判断该div是否存在 */
	// 	var objAirBubbleWindow = document.getElementById(airWindowId);
	// 	if (objAirBubbleWindow == null) {
	// 		/* 创建div */
	// 		objAirBubbleWindow = document.createElement('div');
	// 		objAirBubbleWindow.id = airWindowId;
	// 		objAirBubbleWindow.setAttribute('tag','label');
	// 		objAirBubbleWindow.className = 'jt-tooltip-popup';
	// 		objAirBubbleWindow.onclick = function() {
	// 			this.style.display = 'none';
	// 		}
	// 		/* 加入到页面 */
	// 		document.body.append(objAirBubbleWindow);
	// 	}
	// 	var contentHtml = "";
	// 	/* 具体内容 */
	// 	contentHtml += "<div>";
	// 	contentHtml += "<span>" + options.title + "</span><sup>" + options.sup + "</sup>";
	// 	contentHtml += "</div>";
	// 	/* 竖线 */
	// 	contentHtml += "<div></div>";
	// 	/* 底部小圆圈 */
	// 	contentHtml += "<div></div>";
	// 	/* 赋值 */
	// 	objAirBubbleWindow.innerHTML = contentHtml;
	// 	/* 赋值位置 */
	// 	if (options.top != undefined && options.left != undefined) {
	// 		objAirBubbleWindow.style.top = options.top + 'px';
	// 		objAirBubbleWindow.style.left = options.left + 'px';
	// 	}
	// 	/* 存储地理位置 */
	// 	if (options.lng != undefined && options.lat != undefined && options.alt != undefined) {
	// 		objAirBubbleWindow.setAttribute('location', options.lng + "," + options.lat + "," + options.alt);
	// 	}
	// }

	// createAirBubbleWindow({
	// 	title: 'YTZ20211223102315',
	// 	sup: '待审核',
	// 	top: 50,
	// 	left: 20,
	// });

	// function test(){
	// 	var objs = document.querySelectorAll("div[tag = 'label']");
	// 	for(var i = 0;i<objs.length;i++){
	// 		alert(objs[i].style.display);
	// 		if(objs[i].style.display === 'none'){
	// 			objs[i].style.display = '';
	// 		}
	// 	}
	// }
</script>