利用jQuery实现触屏弹出对话框



43 168 57



特效描述:利用jQuery实现 触屏弹出 对话框,利用jQuery实现触屏弹出对话框

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="images/styles.css" />
<link rel="stylesheet" type="text/css" href="images/styles.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/dialog.jquery.of.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/dialog.jquery.of.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

3. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" />
<title></title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
</head>
<body class="index" onorientationchange="$.fn.touchDialog.updateOrientationIPhoneOnly();">
	<div class="mainContainer">
		<ul id="shareLinks">
			<li><a href="javascript:alert('Social site pressed')">Social site</a></li>
			<li><a href="javascript:alert('Say it! pressed')">Say it!</a></li>
			<li><a href="javascript:alert('Email pressed')">Email</a></li>
		</ul>
		<ul id="userList">
			<li><a href="javascript:alert('View pressed')">View</a></li>
			<li><a href="javascript:alert('Edit pressed')">Edit</a></li>
			<li><a href="javascript:alert('Delete pressed')">Delete</a></li>
		</ul>
		<ul id="socialLinks">
			<li><a href="javascript:alert('Profile pressed')">View profile</a></li>
			<li><a href="javascript:alert('Follow pressed')">Follow user</a></li>
		</ul>
		<ul id="goPixelatom">
			<li><a href="http://51qianduan.com">Go to the Chinaz site</a></li>
		</ul>
		<h1 id="touchLaunch">Pixelatom Demos</h1>
		<hr />
		<img src="images/img.png" width="150" height="100" alt="Dummy image" class="floatLeft" />
		<h2>Lorem ipsum dolor sit amet</h2>
		<a href="javascript:void(0)" class="openShare"><img src="images/share.png" width="100" height="38" alt="Share" /></a>
		<p class="demoText">Consectetur adipiscing elit. Vivamus consectetur 
		justo et nibh euismod mollis. In tellus elit, venenatis vitae adipiscing 
		ut, varius et ante. Suspendisse dapibus nunc at quam euismod 
		pellentesque. Nulla ac enim est. Curabitur blandit, metus a convallis 
		lacinia, elit ante tempor massa, nec suscipit lacus magna in elit.</p>
		<hr />
		<h2>User list</h2>
		<table class="tableTest">
			<tr>
				<td class="nameCell">John Doe</td>
				<td><a href="javascript:void(0);" class="openOptions"><img src="images/actions.png" width="100" height="38" alt="Options" /></a></td>
			</tr>
			<tr>
				<td class="nameCell">Jane Doe</td>
				<td><a href="javascript:void(0);" class="openOptions"><img src="images/actions.png" width="100" height="38" alt="Options" /></a></td>
			</tr>
			<tr>
				<td class="nameCell">Juan Perez</td>
				<td><a href="javascript:void(0);" class="openOptions"><img src="images/actions.png" width="100" height="38" alt="Options" /></a></td>
			</tr>
			<tr>
				<td class="nameCell">Richard Mall</td>
				<td><a href="javascript:void(0);" class="openOptions"><img src="images/actions.png" width="100" height="38" alt="Options" /></a></td>
			</tr>
			<tr>
				<td class="nameCell">Sharon Richards</td>
				<td><a href="javascript:void(0);" class="openOptions"><img src="images/actions.png" width="100" height="38" alt="Options" /></a></td>
			</tr>
			<tr>
				<td class="nameCell">Ed Goobler</td>
				<td><a href="javascript:void(0);" class="openOptions"><img src="images/actions.png" width="100" height="38" alt="Options" /></a></td>
			</tr>
		</table>
		<hr />
		<div class="singleUser">
			<a href="javascript:void(0)" class="openSocial floatLeft"><img src="images/twiface.png" width="73" height="73" alt="User 1" /></a>
			<p>Nulla a lobortis purus. Nullam pharetra elit nec orci luctus 
			ornare. Nam in enim urna. Quisque in orci enim. Maecenas ac justo 
			malesuada elit varius iaculis.</p>
		</div>
		<div class="singleUser">
			<a href="javascript:void(0)" class="openSocial floatRight"><img src="images/twiface2.png" width="73" height="73" alt="User 2" /></a>
			<p class="textRight">Vestibulum mattis velit ac tortor iaculis 
			pretium. Phasellus ac nunc odio. Cras tellus orci, fringilla 
			fringilla pretium eget, pharetra sit amet augue.</p>
		</div>
	</div> <!-- end mainContainer -->
<div style="text-align:center;clear:both">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到