基于jQuery實現自定義工具提示插件



34 133 45



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

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/examples.css">
<link rel="stylesheet" href="css/darktooltip.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/examples.css">
<link rel="stylesheet" href="css/darktooltip.css">

2. 引入JS

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.darktooltip.js"></script>
<script src="js/examples.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.darktooltip.js"></script>
<script src="js/examples.js"></script>

3. HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gb2312">
    <title></title>
</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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子