上士
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jquery弹出层留言贴便签 by 25175</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="jStickyNote - jQuery StickyNote Plugin" />
<meta name="keywords" content="jquery, plugin, sticky note" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
<style>
body { background: #fcfef4 url(bg.png) repeat-x top left; font-family: arial; padding:0px; margin:0px; }
a { color:#fcfef4; text-decoration:none; }
a:hover { color:#fff; }
.header { position:absolute; top:0px; left:0px; background:transparent url(header.png) no-repeat top left; width:100%; height:104px; }
a img { border:none; outline:none; }
.content { position:absolute; top:105px; left:0px; right:0px; padding:0px; margin:0px; height:550px; }
.about { position:absolute; top:655px; left:0px; width:100%; height:400px; background:transparent url(about.png) repeat-x top left; border-top:2px solid #ccc; }
.about .text { width:20%; margin:5px 2% 10px 2%; height:380px; float:left; color:#FCFEF3; font-weight:bold; font-size: 11px; text-align:justify; }
.about .text h1 { border-bottom: 1px dashed #ccc; }
ul.demos { list-style-type:none; position:absolute; top:100px; right:2px; padding:0px; margin:0px; z-index:9999; }
ul.demos li { background-color:#3C3C3C; display:inline; color:#FEFEE7; font-weight:bold; float:left; padding:2px 4px 2px 4px; margin:2px; -moz-border-radius:0px 0px 5px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-bottom-left-radius: 5px; -khtml-border-bottom-right-radius: 5px; -moz-box-shadow: 0 1px 3px #777; cursor:pointer; border:1px solid #ECEDD5; border-top:none; }
.descr { position:absolute; font-size:18px; color:#ccc; margin: 0 auto; top:135px; text-align:center; width:100%; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script src="jquery.stickynote.js" type="text/javascript"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript">
$(function() {
$("#content").stickynote({
size : 'large',
text : 'Don\'t forget to buy beans!',
containment : 'content',
event : 'dblclick'
});
$("#testclick").stickynote({
size : 'large',
containment : 'content'
});
$("#testsmall").stickynote();
$("#testcolor").stickynote({
color : '#FF0000',
ontop : true
});
});
</script>
</head>
<body>
<div class="header"></div>
<ul class="demos">
<li id="testclick">Demo 1</li>
<li id="testsmall">Demo 2</li>
<li id="testcolor">Demo 3</li>
<li><a href="#about">How To</a></li>
<li><a href="http://www.25175.com/">25175</a></li>
</ul>
<div id="content" class="content"> </div>
<div style="width:550px;margin:20px auto;">
<p><strong><a href="http://www.25175.com" target="_blank">25175</a></strong> </p>
<p></p>
</div>
<div class="descr">Double-click here or try the demos</div>
<div class="about" id="about">
<div class="text">
<h1>About</h1>
<p>Welcome to the jStickyNote demo page!</p>
<p>Here you can see some examples of how to use the jQuery plugin. By default you can simply double-click on the
above area, and a sticky note with a predefined note will appear. </p>
<p>You can drag and drop this sticky note within the gray content area.</p>
<p>Click on the cross in the left upper corner of the note to remove it.</p>
<p><a href="http://www.tympanus.net/jstickynote/jstickynote.zip">Download it here</a></p>
</div>
<div class="text">
<h1>Demo 1</h1>
<p>Clicking Demo 1 will create a large editable sticky note.</p>
<p>Enter a note and click on the "ok" icon in the right lower corner of the note to create it.</p>
</div>
<div class="text">
<h1>Demo 2</h1>
<p>This demo shows how you can create a small sticky note.</p>
<p>It is created just like in Demo 1.</p>
<p>This sticky note can be dragged and dropped into any part of the page.</p>
</div>
<div class="text">
<h1>Demo 3</h1>
<p>In this example a sticky note can be created with a red text color. This is one of the customizable properties in the plugin.</p>
<p>The sticky note can be dragged and dropped into any part of the page, just like in Demo 2.</p>
</div>
</div>
</body>
</html>
|
|
jquery弹出层留言贴便签特效
分享到：
 购买记录    其他最新源码
       
|
新兵