以下是 jQuery自定义工具提示插件DarkTooltip js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<title>jQuery�Զ��幤����ʾ���DarkTooltip</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/examples.css">
<link rel="stylesheet" href="css/darktooltip.css">
</head>
<body id="home">
<div id="fixed" class="box fixed-box" data-tooltip="I don't like to move" >I'm fixed</div>
<main class = "main">
<h1>DarkTooltip</h1>
<section>
<div class = "example">
<h2>Default</h2>
<div id="def" class="box" data-tooltip="Hello world" >default</div>
</div>
</section>
<section>
<div class="example">
<h2>on Click</h2>
<div id="click-me" class="box" data-tooltip="Thanks for clicking me">
Click me
</div>
</div>
</section>
<section>
<div class="example">
<h2>HTML content</h2>
<div id="def-html" class="box" data-tooltip="#html-content">
html
</div>
<div id = "html-content" style="display:none;">
<h2>wow <strong>such content</strong> very html</h2>
<img src="http://bit.ly/18VOk3C">
</div>
</div>
</section>
<hr>
<section>
<div class="example">
<h2>Confirm</h2>
<div id="confirm" class="box" data-tooltip="Are you sure?">
Click to delete
</div>
</div>
</section>
<br><br><br><br>
<section>
<div class="example">
<h2>Confirm with custom events</h2>
<div id="confirm-light" class="box" data-tooltip="For real?">
Click me too
</div>
</div>
</section>
<hr>
<section>
<div class="example">
<h2>Sizes</h2>
<div id="small-s" class="box" data-tooltip="Hey!">
Small
</div>
<div id="medium-s" class="box" data-tooltip="Listen!">
medium
</div>
<div id="large-s" class="box" data-tooltip="Watch out!">
large
</div>
</div>
</section>
<hr>
<section>
<div class="example">
<h2>Gravity</h2>
<div id="south" class="box" data-tooltip="Hey!">
gravity:south
</div>
<div id="west" class="box" data-tooltip="Listen!">
gravity:west
</div>
<div id="north" class="box" data-tooltip="Watch out!">
gravity:north
</div>
<div id="east" class="box" data-tooltip="Look!">
gravity:east
</div>
</div>
</section>
<hr>
<section>
<div class="example">
<h2>Animations</h2>
<div id = "effect-none" class = "box" data-tooltip="Simple but effective">
none
</div>
<div id = "effect-flipin" class = "box" data-tooltip="Whooo!">
flipIn
</div>
<div id = "effect-fadein" class = "box" data-tooltip="Hello there">
fadeIn
</div>
</div>
</section>
<hr>
<section>
<div class="example">
<h2>Themes</h2>
<div id = "theme-dark" class = "box" data-tooltip="In Western culture, white and black traditionally symbolize the dichotomy of good and evil">
dark
</div>
<div id = "theme-light" class = "box" data-tooltip="Metaphorically related to light and darkness and day and night">
light
</div>
</div>
</section>
<br><br>
</main>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.darktooltip.js"></script>
<script src="js/examples.js"></script>
</body>
</html>JS代码(examples.js):
$(document).ready( function(){
$('#fixed').darkTooltip({
gravity:'north'}
);
$('#def').darkTooltip();
$('#def-html').darkTooltip({
opacity:1,gravity:'west'}
);
$('#click-me').darkTooltip({
trigger:'click',animation:'flipIn',gravity:'west'}
);
$('#confirm').darkTooltip({
trigger:'click',animation:'flipIn',gravity:'west',confirm:true,yes:'Sure',no:'No Way',finalMessage:'It has been deleted'}
);
$('#confirm-light').darkTooltip({
trigger:'click',animation:'flipIn',gravity:'west',confirm:true,theme:'light',onYes:function(){
alert("This is a custom event for 'Yes' option");
}
,onNo:function(){
alert("This is a custom event for 'No' option");
}
}
);
$('#small-s').darkTooltip({
size:'small',gravity:'south'}
);
$('#medium-s').darkTooltip({
gravity:'south'}
);
$('#large-s').darkTooltip({
size:'large',gravity:'south'}
);
$('#south').darkTooltip({
gravity:'south'}
);
$('#west').darkTooltip({
gravity:'west'}
);
$('#north').darkTooltip({
gravity:'north'}
);
$('#east').darkTooltip({
gravity:'east'}
);
$('#effect-none').darkTooltip();
$('#effect-flipin').darkTooltip({
animation:'flipIn'}
);
$('#effect-fadein').darkTooltip({
animation:'fadeIn'}
);
$('#theme-dark').darkTooltip();
$('#theme-light').darkTooltip({
theme:'light'}
);
}
);
CSS代码(examples.css):
body{font-family:"Helvetica Neue",Arial,sans-serif;font-size:14px;}
a,a:hover,a:visited{color:#666;}
.logo{width:150px;height:86px;display:inline-block;background-image:url(../img/logo.png);position:absolute;left:500px;top:20px;}
.logo a{color:#fff;position:relative;top:25px;left:35px;}
h1{font-size:24px;margin-bottom:15px;}
h2{font-weight:bold;margin-bottom:10px;}
.main{margin:40px;}
section{display:inline-block;width:100%;}
.options section{margin:20px 0;}
.example{float:left;margin:0 10px;}
.box{float:left;padding:10px;background-color:#eee;width:100px;margin:0 10px 10px 0px;text-align:center;}
.box.fixed-box{position:fixed;right:50px;top:50px;}
hr{margin:20px 0;color:#ddd;background-color:#ddd;height:2px;border:none;}
.code{width:650px;}
table.options th{font-weight:bold;color:#999;text-align:left;}
table.options thead{border-bottom:1px solid #ccc;}
table.options th,td{padding:5px 10px 5px 5px;}
table.options td:first-child{color:navy;}
分享到QQ
分享到微博
微信扫一扫
