基于jQuery实现Metro提示工具插件



34 132 45



特效描述:基于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/Airdrop@2x.png">
		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/Facebook@2x.png">
			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/Wordpress@2x.png">
			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/Skype@2x.png">
			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/YouTube@2x.png">
			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/Fencing@2x.png" 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

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