基于jQuery實現Metro提示工具插件



38 149 50



特效描述:基于jQuery實現 Metro 提示工具插件,基于jQuery實現Metro提示工具插件

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>

3. HTML代碼

<div align="center">
	<div class="content">
		<h2>Metro Tooltip</h2>
		Metro tooltip is a powerful
		<span class="mtTool purp" mttitle="Tooltip" mtcontent="Can be strong and pretty" mtcolor="#7514b5">
		Tool</span>, to show information that you need for your
		<span class="mtTool purp" mttitle="It's easy to set up" mtcontent="A good way to show help &lt;br/&gt;So your website or application can be simpler" mtimg="img/1.png">
		users.</span><br>
		<br>
		Tooltips can be awesome with cool animations like
		<span class="mtTool pink" mttitle="boinceIn" mtcolor="#ec008c" mtanimation="bounceIn" mtposition="top">
		bounceIn</span>,
		<span class="mtTool pink" mttitle="wobble" mtanimation="wobble" mtcolor="#ec008c" mtposition="top">
		wobble</span>,
		<span class="mtTool pink" mttitle="shake" mtanimation="shake" mtcolor="#ec008c" mtposition="top">
		shake</span>,
		<span class="mtTool pink" mttitle="tada" mtanimation="tada" mtcolor="#ec008c" mtposition="top">
		tada</span>,
		<span class="mtTool pink" mttitle="fadeInDown" mtanimation="fadeInDown fast" mtcolor="#ec008c" mtposition="top">
		fadeInDown</span> and much
		<span class="mtTool pink" mttitle="Many animations" mtanimation="bounceInDown" mtcolor="#ec008c" mtposition="top">
		more!</span> (Animations are not available on
		<span class="mtTool pink" mtcontent="&lt;img src='img/IE-64.png' style='width:32px;float:left;'&gt;">
		IE.</span> It will display a soft fade in instead). <br>
		<br>
		Also has positioning
		<span class="mtTool teal" mttitle="Top Position" mtcolor="#0072bc" mtposition="top">
		top</span>,
		<span class="mtTool teal" mttitle="Bottom Position" mtcolor="#0072bc" mtposition="bottom">
		bottom</span>,
		<span class="mtTool teal" mttitle="Right Position" mtcolor="#0072bc" mtposition="right">
		right</span>,
		<span class="mtTool teal" mttitle="Left Position" mtcolor="#0072bc" mtposition="left">
		left</span>. Don&#39;t worry to customize all the tooltips, you can set a <spna class="mtTool teal" mttitle="Metro Tooltip" mtcolor="#0072bc" mtposition="bottom" mtcontent="mtcolor: &nbsp&nbsp&nbsp&nbsp'#0072bc',<br/>mtposition: 'bottom',<br/>mttitle: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'Metro Tooltip',<br/> and much more...">
		default values </spna> for all of them or to specific ones. <br>
		<br>
		What? do you want more? Ok, what if you can show a big map of
		<span class="mtTool green" mtcolor="#39b54a" mtpersist="1" mttitle="This is my business" mtcontent="&lt;iframe width='100%' height='300px' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=san+jose+costa+rica&amp;aq=&amp;sll=43.281204,-7.921143&amp;sspn=2.847262,5.811768&amp;ie=UTF8&amp;hq=&amp;hnear=San+Jos%C3%A9,+Costa+Rica&amp;ll=9.927128,-84.082012&amp;spn=0.060197,0.090809&amp;t=m&amp;z=14&amp;output=embed'&gt;&lt;/iframe&gt;">
		your location</span> and hold the tooltip until you close it? <br>
		<br>
		Not enough?, Humm, looks like you know what you want. Let&#39;s show a
		<span class="mtTool red" mttitle="Ironman Trailer" mtpersist="1" mtcolor="#f30009" mtposition="bottom" mtcontent="&lt;iframe width='100%' height='315px' src='http://51qianduan.com' frameborder='0' allowfullscreen&gt;&lt;/iframe&gt;">
		youtube</span> video. <br>
		<br>
		Metro Tooltip is powerful, but also looks great on Macs with
		<span class="mtTool purp" mttitle="Retina Display" mtposition="bottom" mtcontent="Have a high enough pixel density that the human eye &lt;br/&gt;is unable to notice pixelation at a typical viewing distance." mtimg="img/[email protected]">
		retina.</span> And with an amazing icon set thanks to
		<span class="mtTool purp" mtposition="top" mtpersist="1" mtcontent="&lt;iframe width='100%' height='300px' frameborder='0' src='http://51qianduan.com'&gt;&lt;/iframe&gt;">
		www.pixellove.com </span>(free icon set), this works even better!, but you 
		can use any kind of image. <br>
		<br>
		Let&#39;s check some examples
		<ul>
			<li>A social network...
			<span class="mtTool facebook" mttitle="facebook" mtcolor="#3e5c9a" mtcontent="&lt;div style='width:300px;'&gt;Facebook is an online social networking service. Its name stems from the colloquial name for the book given to students at the start of the academic year by some American university administrations to help students get to know one another.&lt;/div&gt;" mtimg="img/[email protected]">
			facebook</span></li>
			<li>A blogging tool...
			<span class="mtTool wordpress" mttitle="Wordpress" mtposition="left" mtcolor="#21759b" mtcontent="&lt;div style='width:400px;'&gt;WordPress is a free and open source blogging tool and a content-management system (CMS) based on PHP and MySQL, which runs on a web hosting service.[3] Features include a plug-in architecture and a template system.&lt;/div&gt;" mtimg="img/[email protected]">
			Wordpress</span></li>
			<li>A voiceIP service...
			<span class="mtTool skype" mttitle="Wordpress" mtposition="top" mtcolor="#29abe2" mtcontent="Skype (skaip) is a freemium voice-over-IP service and instant &lt;br/&gt;messaging client that is currently developed by the Microsoft Skype Division.&lt;br/&gt; The name originally derived from 'sky' and 'peer'." mtimg="img/[email protected]">
			Skype</span></li>
			<li>A video-sharing website...
			<span class="mtTool youtube" mttitle="Youtube" mtposition="bottom" mtcolor="#ec2727" mtcontent="YouTube is a video-sharing website, &lt;br/&gt;created by three former PayPal employees in February 2005 and owned by Google since late 2006,&lt;br/&gt; on which users can upload, view and share videos." mtimg="img/[email protected]">
			Youtube</span></li>
		</ul>
		<br>
		<br>
		Now... this is a
		<span class="mtTool pink" mtcolor="#ec008c" mtcontent="&lt;img src='img/jquery.png' style='width:100px;'&gt;">
		jQuery </span>plugin with css styles. So, in the bottom of your page or 
		on form load, you need to
		<span class="mtTool pink" mtcolor="#ec008c" mttitle="Initialize with some default parameters" mtcontent="$.MetroTooltipInit({&lt;br/&gt;&nbsp;&nbsp;&amp;nbspanimation: 'fadeInLeft fast',&lt;br/&gt;&nbsp;&nbsp;&amp;nbsppersist: 0,&lt;br/&gt;});">
		initialize it.</span><br>
		<br>
		The problem that you may think, is &quot;What happen if I dynamically add elements 
		with tooltip?&quot; <br>
		<br>
		<span class="mtTool teal" mtcolor="#0072bc" mttitle="It wont work :(" mtcontent="BUT! There's a way to make it! :D">
		Answer!</span><br>
		<br>
		<br>
		I created a super light function that will initialize the new tooltips.
		<br />
		<br />
		<button id="AddTool" class="mtTool botTeal" mtposition="top" mtcontent="Nice and easy, no aditional configuration... works with any HTML element and the help icon can be disabled." mtanimation="fadeInDown fast" mthelpicon="0" mtimg="img/[email protected]" mtcolor="#0072bc" mttitle="Yes, Also works on buttons">
		Add New Element</button><br>
		<br>
		<div id="NewTools">
		</div>
		<br>
		<br>
		And remember, this product is avalaible only on
		<span class="mtTool red" mttitle="&lt;span style='color:black;'&gt;Codecanyon&lt;/span&gt;" mtcolor="#ffffff" mtcontent="&lt;img src='img/codecanyon.png' style='width:150px'&gt;">
		Codecanyon</span></div>
</div>
<script type="text/javascript">$(document).ready(function(){$.MetroTooltipInit({animation:"fadeInLeft fast",persist:0,})});var ColorCount=1;$("#AddTool").on("click",function(){switch(ColorCount){case 1:var a='Hi, I\'m a new element with <span class="mtTool purp" mttitle="Hello :)" mtcolor="#7514b5">Metro Tooltip</span><br/>';ColorCount=2;break;case 2:var a='Hi, I\'m a new element with <span class="mtTool pink" mttitle="Hello :)" mtcolor="#ec008c">Metro Tooltip</span><br/>';ColorCount=3;break;case 3:var a='Hi, I\'m a new element with <span class="mtTool teal" mttitle="Hello :)" mtcolor="#0072bc">Metro Tooltip</span><br/>';ColorCount=4;break;case 4:var a='Hi, I\'m a new element with <span class="mtTool green" mttitle="Hello :)" mtcolor="#39b54a">Metro Tooltip</span><br/>';ColorCount=1;break}$("#NewTools").append(a);$.mtReInit()});</script>
<div style="text-align:center;clear:both">
</div>



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


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 其他 文字提示框 提示文字 Tooltip工具提示框 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子