利用jquery實現多種樣式彈出層插件



48 188 63



特效描述:利用jquery實現 多種樣式 彈出層插件,利用jquery實現多種樣式彈出層插件

代碼結構

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery.webui-popover.min.css">

2. 引入JS

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.webui-popover.min.js"></script>

3. HTML代碼

		<div class="container">
			<div class="row">
				<div class="col-md-12"><h1>Settings <small>styles and some options</small></h1>
				</div>
			</div>
		</div>
		<section class="container demo-container">
			<div class="row">				
				<div class="col-md-12">
					<nav class="navbar navbar-default" role="navigation">
					   <p class="navbar-text navbar-left">style:</p>
					   <div class="btn-group navbar-left" data-toggle="buttons">
						  <a href="#" class="btn btn-default navbar-btn btn-settings btn-style active" data-option="style" data-style="">default</a>
						  <a href="#" class="btn btn-default navbar-btn btn-settings btn-style" data-option="style" data-style="inverse">inverse</a>					  
						</div>
						<p class="navbar-text navbar-left">trigger:</p>
					   	<div class="btn-group navbar-left" data-toggle="buttons">
						  <a href="#" class="btn btn-default navbar-btn btn-settings btn-trigger active" data-option="trigger" data-trigger="click">click</a>
						  <a href="#" class="btn btn-default navbar-btn btn-settings btn-trigger" data-option="trigger" data-trigger="hover">hover</a>						  
						</div>
						<p class="navbar-text navbar-left">title:</p>
					   	<div class="btn-group navbar-left" data-toggle="buttons">
						  <a href="#" class="btn btn-default navbar-btn btn-settings btn-title active" data-option="title" data-title="Pop Title">yes</a>
						  <a href="#" class="btn btn-default navbar-btn btn-settings btn-title " data-option="title" data-title="">no</a>				
						</div>
						<p class="navbar-text navbar-left">closeable:</p>
					   	<div class="btn-group navbar-left" data-toggle="buttons">
						  <a href="#" class="btn btn-default navbar-btn btn-settings btn-closeable " data-option="closeable" data-closeable="true">yes</a>
						  <a href="#" class="btn btn-default navbar-btn btn-settings btn-closeable active"  data-option="closeable" data-closeable ="false">no</a>				
						</div>
						<p class="navbar-text navbar-left">multi:</p>
					   	<div class="btn-group navbar-left" data-toggle="buttons">
						  <a href="#" class="btn btn-default navbar-btn btn-settings btn-multi active" data-option="multi" data-multi="true">yes</a>
						  <a href="#" class="btn btn-default navbar-btn btn-settings btn-multi " data-option="multi" data-multi ="false">no</a>				
						</div>
						<p class="navbar-text navbar-left">arrow:</p>
					   	<div class="btn-group navbar-left" data-toggle="buttons">
						  <a href="#" class="btn btn-default navbar-btn btn-settings btn-arrow active" data-option="arrow" data-arrow="true">yes</a>
						  <a href="#" class="btn btn-default navbar-btn btn-settings btn-arrow " data-option="arrow" data-arrow ="false">no</a>				
						</div>
						<p class="navbar-text navbar-right">&nbsp;</p>
						<div class="btn-group navbar-right">							
							<a href="#" class="btn btn-primary navbar-btn btn-reset">reset</a>							
						</div>
					</nav>					
				</div>				
			</div>
		</section>	
		<div class="container">
			<div class="row">
				<div class="col-md-12"><h1>Specified placement <small>use the specified placement.</small></h1></div>
			</div>
		</div>
		<section class="container demo-container">			
			<div class="row">				
				<div class="col-md-5"><a href="#" class="show-pop btn btn-danger" data-placement="bottom-right" >pop bottom-right</a></div>
				<div class="col-md-2"><a href="#" class="show-pop btn btn-danger" data-placement="bottom">pop bottom</a></div>
				<div class="col-md-5"><a href="#" class="show-pop btn btn-danger pull-right" data-placement="bottom-left">pop bottom-left</a></div>
			</div>
			<div class="row row-middle">
				<div class="col-md-4"><a href="#" class="show-pop btn btn-danger" data-placement="right">pop right</a></div>
				<div class="col-md-4">
					<div class="webui-popover  webui-popover-demo top in" style=" display: block;"><div class="arrow"></div><div class="webui-popover-inner"><h3 class="webui-popover-title">Welcome to WebUI Popover</h3><div class="webui-popover-content"><p>This is webui popover demo.</p><p>just enjoy it and have fun !</p><p>email : [email protected]</p></div></div></div>
				</div>
				<div class="col-md-4"><a href="#" class="show-pop btn btn-danger pull-right" data-placement="left">pop left</a></div>
			</div>
			<div class="row">				
				<div class="col-md-5"><a href="#" class="show-pop btn btn-danger" data-placement="top-right">pop top-right</a></div>
				<div class="col-md-2"><a href="#" class="show-pop btn btn-danger" data-placement="top">pop top</a></div>
				<div class="col-md-5"><a href="#" class="show-pop btn btn-danger pull-right" data-placement="top-left">pop top-left</a></div>
			</div>
		</section>
		<div class="container">
			<div class="row">
				<div class="col-md-12"><h1>Auto detect  placement <small>auto detect the placement, always poped in page</small></h1></div>
			</div>
		</div>
		<section class="container demo-container">
			<div class="row">				
				<div class="col-md-5"><a href="#" class="show-pop btn btn-success">auto detect</a></div>
				<div class="col-md-2"><a href="#" class="show-pop btn btn-success">auto detect</a></div>
				<div class="col-md-5"><a href="#" class="show-pop btn btn-success pull-right" data-placement="auto">auto detect</a></div>
			</div>
		</section>
		<div class="container">
			<div class="row">
				<div class="col-md-12"><h1>Advanced examples </h1></div>
			</div>
		</div>
		<section class="container demo-container">
			<div class="row">				
				<div class="col-md-2"><a href="#" class="show-pop-table btn btn-info" data-placement="auto">pop with table</a></div>
				<div class="col-md-2"><a href="#" class="show-pop-list btn btn-info" data-placement="auto">pop with list</a></div>
				<div class="col-md-2"><a href="#" class="show-pop-large btn btn-info pull-right" data-placement="auto">pop large content</a></div>
				<div class="col-md-2"></div>
				<div class="col-md-2"><a href="#" class="show-pop-async btn btn-info" data-placement="auto">pop async</a></div>
				<div class="col-md-2"><a href="#" class="show-pop-iframe btn btn-info" data-placement="auto">pop iframe </a></div>
			</div>
		</section>
		<div class="container">
			<div class="row">
				<div class="col-md-12"><h1>Events </h1></div>
			</div>
		</div>
		<section class="container demo-container">
			<div class="row">				
				<div class="col-md-3"><a href="#" class="show-pop-event btn btn-info" data-placement="auto">show</a></div>
				<div class="col-md-3"><a href="#" class="show-pop-event btn btn-info" data-placement="auto">shown</a></div>
				<div class="col-md-3"><a href="#" class="show-pop-event btn btn-info" data-placement="auto">hide</a></div>
				<div class="col-md-3"><a href="#" class="show-pop-event btn btn-info pull-right" data-placement="auto">hidden</a></div>				
			</div>
			<div class="row">
				<div class="col-md-12">
					<br>
					<textarea class="form-control" rows="5" id="eventLogs"></textarea>
					<a href="#" class="btn btn-default" id="resetLogs">reset logs</a>
				</div>
			</div>
		</section>
		<div id="tableContent" style="display:none;">
			<table class="table">
		      <thead>
		        <tr>
		          <th>#</th>
		          <th>First Name</th>
		          <th>Last Name</th>
		          <th>Username</th>
		        </tr>
		      </thead>
		      <tbody>
		        <tr>
		          <td>1</td>
		          <td>Mark</td>
		          <td>Otto</td>
		          <td>@mdo</td>
		        </tr>
		        <tr>
		          <td>2</td>
		          <td>Jacob</td>
		          <td>Thornton</td>
		          <td>@fat</td>
		        </tr>
		        <tr>
		          <td>3</td>
		          <td>Larry</td>
		          <td>the Bird</td>
		          <td>@twitter</td>
		        </tr>
		      </tbody>
		    </table>
		</div>
		<div id="listContent" style="display:none;">
			<ul class="list-group">
			  <li class="list-group-item">Cras justo odio</li>
			  <li class="list-group-item">Dapibus ac facilisis in</li>
			  <li class="list-group-item">Morbi leo risus</li>
			  <li class="list-group-item">Porta ac consectetur ac</li>
			  <li class="list-group-item">Vestibulum at eros</li>
			</ul>
		</div>
		<div id="largeContent" style="display:none;">
			<p>The jQuery Foundation&#8217;s <a href="http://jquery.org/mission">mission</a> has always been about more than just our namesake projects of jQuery, jQuery UI, and jQuery Mobile. We already host several projects such as Sizzle, QUnit and Globalize that are not dependent on the jQuery library.</p>
<p>This wider web-oriented mission is evident in our jQuery Conferences, which span a wide range of developer concerns beyond jQuery, including Node, CSS, tooling, testing and much more. Over the years we&#8217;ve had talks on build tools, accessibility, security, performance, design patterns, and frameworks such as Ember and Angular. At our San Diego conference this past February, for example, Lenny Markus gave a great talk on <a title="NodeJS In the Enterprise" href="http://www.vxisgr.tw//watch?v=qJVk6KiOEBA" target="_blank">PayPal&#8217;s continuing adoption of Node</a> as they move away from Java and proprietary solutions, Catherine Farman talked about <a title="Real World Responsive Design Projects and Patterns" href="http://www.vxisgr.tw//watch?v=CkC8F3x8-nc" target="_blank">real world responsive design</a>, and John Dimm gave a talk on the <a title="Fun with Speech" href="http://www.vxisgr.tw//watch?v=n8G1CuR2zZc" target="_blank">HTML5 speech APIs</a>.</p>
<p>The jQuery Foundation is participating in the continuing evolution of the web platform via our memberships in both the W3C and ECMA TC39 (The group standardizing what we know as JavaScript). We feel that it&#8217;s essential to have strong representation in those standards groups to ensure they meet the needs of developers. The Foundation provides a platform for developers to have a voice in these standards bodies.</p>
<p>Beyond the technical compatibility between our projects, we also share the open source model and all the benefits it provides. The Foundation adds the benefit of a top-level structure designed to serve the projects, providing the resources they need but letting the contributors decide the best direction for the project based on community input. Any project that joins the Foundation is given the ability to serve their community&#8217;s needs rather than be constrained by the goals of a for-profit company.</p>
<p>Though this has been our mission for a long time, we felt we needed to make this clearer. We are excited to start bringing this part of our mission into the light and start actively working toward a more open web accessible to everyone. If you are excited as well, please help us. Contribute your time to <a href="https://jquery.org/projects/" target="_blank">Foundation projects</a>. Offer your company&#8217;s services. If you or your company have an established open source project that you believe could benefit everyone and flourish by becoming part of the jQuery Foundation, check out our philosophy around <a href="https://jquery.org/projects/join/">projects joining the Foundation</a> and <a href="mailto:[email protected]">let us know you’re interested</a>. If you would rather just support the existing and future projects of the Foundation through financial support, <a href="https://jquery.org/join/">become a member of the Foundation.</a> Open source projects will only thrive if everyone who benefits from them contributes back in whatever way they can.</p>
		</div>		
		<script src="js/jquery-1.11.1.min.js"></script>		
		<script src="js/jquery.webui-popover.min.js"></script>	
		<script>
			(function(){
				var settings = {
						trigger:'click',
						title:'Pop Title',
						content:'<p>This is webui popover demo.</p><p>just enjoy it and have fun !</p>',
						width:300,						
						multi:true,						
						closeable:false,
						style:'',
						padding:true
				};
				$('.btn-settings').on('click',function(e){
						e.preventDefault();
						$(this).addClass('active').siblings().removeClass('active');
						var option = $(this).data('option');
						settings[option]= $(this).data(option);					
						initPopover();
				});	
				$('.btn-reset').on('click',function(e){
					e.preventDefault();
					location.reload();
				});			
				function initPopover(){					
					$('a.show-pop').webuiPopover('destroy').webuiPopover(settings);				
					var tableContent = $('#tableContent').html(),
						tableSettings = {content:tableContent,
											width:500
										};
					$('a.show-pop-table').webuiPopover('destroy').webuiPopover($.extend({},settings,tableSettings));
					var listContent = $('#listContent').html(),
						listSettings = {content:listContent,
											title:'',
											padding:false
										};
					$('a.show-pop-list').webuiPopover('destroy').webuiPopover($.extend({},settings,listSettings));
					var largeContent = $('#largeContent').html(),
						largeSettings = {content:largeContent,
											width:400,
											height:350,
											closeable:true
										};
					$('a.show-pop-large').webuiPopover('destroy').webuiPopover($.extend({},settings,largeSettings));
					 var
					 	iframeSettings = {	width:500,
					 						height:350,
					 						closeable:true,
					 						padding:false,
					 						type:'iframe',
					 						url:'http://getbootstrap.com'};					
					$('a.show-pop-iframe').webuiPopover('destroy').webuiPopover($.extend({},settings,iframeSettings));
					var
					 	asyncSettings = {	width:260,
					 						height:350,
					 						closeable:true,
					 						padding:false,
					 						cache:false,
					 						url:'https://api.github.com/',
					 						type:'async',
					 						content:function(data){
					 							var html = '<ul class="list-group">';
					 							for(var key in data){
					 								html+='<li class="list-group-item"><a href="'+ data[key] +'" target="_blank">'
					 								+ '<i class="glyphicon glyphicon-leaf"></i> '+ key+'</a>'+'</li>';	
					 							}
												html+='</ul>';
												return html;
					 						}};
					$('a.show-pop-async').webuiPopover('destroy').webuiPopover($.extend({},settings,asyncSettings));
					$('a.show-pop-event').each(function(i,item){
							var ename = $(item).text()+'.webui.popover';
							$(item).webuiPopover('destroy').webuiPopover(settings)
							.on(ename,function(e){
								var log =  ename+' is trigged!';
								if (console){
									console.log(log);
								}
								$('#eventLogs').text($('#eventLogs').text()+'\n'+log);
							});
					});
				}
				$('#resetLogs').on('click',function(e){
					e.preventDefault();
					$('#eventLogs').text('');
				});
				initPopover();
			})();
		</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 浮動提示框 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖片廣告 文字提示框 提示文字 提示框/彈出層 文本框 text文本框
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表