以下是 jquery侧边面板插件js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery��������</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="960gs.css" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="style.css" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="jquery-sticklr-1.0.css" />
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery-sticklr-1.0.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#example-1').sticklr({
showOn : 'hover',
stickTo : 'right'
});
$('#example-2').sticklr({
showOn : 'click',
stickTo : 'left'
});
});
</script>
<style type="text/css">
/* body {
background: red;
}
*/ .sticklr .notification-count {
display: block;
width: 12px;
height: 12px;
background: #555;
box-shadow: 0 0 3px #999;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
color: #f0f0f0;
cursor: default;
font-size: 10px;
line-height: 12px;
text-indent: 3px;
position: absolute;
top: 2px;
left: 20px;
z-index: 96;
}
.sticklr .calendar td {
width: 15px;
padding: 5px;
}
.sticklr .calendar td:hover {
background: #eaeaea;
font-weight: bold;
}
</style>
</head>
<body>
<div id="content">
<!--DEMO start-->
<div id="page" class="container_12">
<div class="grid_12">
<div id="header">
<h1>Sticklr</h1>
<h3>Sticky Side Panel CSS & jQuery Plugin</h3>
</div>
<div class="clear"></div>
<div id="slider">
<h3>Features</h3>
<p>Inspired by Envato site-switcher, here is what I came up with, a sticky side panel made with CSS and enhanced greatly with jQuery.</p>
</div>
<div class="clear"></div>
<div id="features">
<div class="grid_4 alpha">
<h4>Show on Hover/Click/Dblclick</h4>
<p>Set menu to be shown when mouse hover, click, or double-click. In this page, you can see the left one is click and the right one is hover.</p>
</div>
<div class="grid_4">
<h4>Works without JS (CSS Fallback)</h4>
<p>Built from ground up, Sticklr is friendly for user having their JavaScript disabled. Although this is an extreme rare case.</p>
</div>
<div class="grid_3 omega">
<h4>Left/Right Side</h4>
<p>There is no right placement whether it's right or left. Sometimes it could be both.</p>
</div>
<div class="clear"></div>
<div class="grid_4 alpha">
<h4>Fixed position</h4>
<p>Even if you scroll the page, Sticklr will remain in it's place. Sticklr will always follow you in the middle on the side of the page.</p>
</div>
<div class="grid_4">
<h4>Multiple column</h4>
<p>Menu can be separated in multiple columns with different title, you only need to make a separate list for each column.</p>
</div>
<div class="grid_3 omega">
<h4>Flexible Styling</h4>
<p>Easy to customize the styling right from CSS, that's why it's CSS file is separated from the jQuery script.</p>
</div>
<div class="clear"></div>
<div class="grid_4 alpha">
<h4>Centered Automatically</h4>
<p>Sticklr is smartly positioned. Resizing your browser would automatically correct the position itself to center of the browser.</p>
</div>
<div class="grid_4">
<h4>Cross-browser compatible</h4>
<p>Sticklr has been tested to work on IE7+, Firefox 3+, Chrome 11+. If you still found a bug, please shoot me an email so I can fix it.</p>
</div>
<div class="grid_3 omega">
<h4>Simple & lightweight</h4>
<p>Come with <10KB minified JS+CSS, a fair size for a nice enhancement.</p>
</div>
</div>
<div class="clear"></div>
<div id="footer">
<p>So then, what are you waiting for? go grab this script quickly</p>
</div>
</div>
<div class="clear"></div>
</div>
<div id="sticky">
<ul id="example-1" class="sticklr">
<li>
<a href="#" class="icon-login" title="Site switcher"></a>
<ul>
<li class="sticklr-title">
<a href="#">Show on hover</a>
</li>
<li>
<a href="#" class="icon-amazon">ActiveDen</a>
</li>
<li>
<a href="#" class="icon-flickr">AudioJungle</a>
</li>
<li>
<a href="#" class="icon-facebook">ThemeForest</a>
</li>
<li>
<a href="#" class="icon-google">VideoHive</a>
</li>
</ul>
</li>
<li>
<a href="#" class="icon-calendar" title="Site switcher"></a>
<ul>
<li class="sticklr-title">
<a href="#">Right-side panel</a>
</li>
<li>
<a href="#" class="icon-reddit">GraphicRiver</a>
</li>
<li>
<a href="#" class="icon-lastfm">3DOcean</a>
</li>
<li>
<a href="#" class="icon-technorati">CodeCanyon</a>
</li>
<li>
<a href="#" class="icon-yahoo">Tuts+</a>
</li>
<li>
<a href="#" class="icon-dribbble">PhotoDune</a>
</li>
</ul>
</li>
<li>
<a href="#" class="icon-zoom" title="Search"></a>
<ul>
<li class="sticklr-title">
<a href="#">Search</a>
</li>
<li>
<form action="#" method="POST">
<input type="text" name="search" value="" placeholder="Type then press Enter.." />
</form>
</li>
</ul>
</li>
<li>
<a href="#" class="icon-twitter" title="Search"></a>
<ul>
<li>
<a href="#" class="icon-tag" >There's nothing here</a>
</li>
</ul>
</li>
</ul>
<ul id="example-2" class="sticklr">
<li>
<a href="#" class="icon-tag" title="Site switcher"></a>
<ul>
<li class="sticklr-title">
<a href="#">Site Switcher</a>
</li>
<li>
<a href="#" class="icon-amazon">ActiveDen</a>
</li>
<li>
<a href="#" class="icon-flickr">AudioJungle</a>
</li>
<li>
<a href="#" class="icon-facebook">ThemeForest</a>
</li>
<li>
<a href="#" class="icon-google">VideoHive</a>
</li>
</ul>
<ul>
<li>
<a href="#" class="icon-reddit">GraphicRiver</a>
</li>
<li>
<a href="#" class="icon-lastfm">3DOcean</a>
</li>
<li>
<a href="#" class="icon-technorati">CodeCanyon</a>
</li>
<li>
<a href="#" class="icon-yahoo">Tuts+</a>
</li>
<li>
<a href="#" class="icon-dribbble">PhotoDune</a>
</li>
</ul>
</li>
<li>
<a href="#" class="icon-zoom" title="Search"></a>
<ul>
<li>
<form action="#" method="POST">
<input type="text" name="search" value="" placeholder="Type then press Enter.." />
</form>
</li>
</ul>
</li>
<li>
<a href="#" class="icon-sitemap" title="Multiple-column ready"></a>
<ul>
<li class="sticklr-title">
<a href="#">Multiple-column ready</a>
</li>
<li>
<a href="#" class="icon-amazon">ActiveDen</a>
</li>
</ul>
<ul>
<li>
<a href="#" class="icon-flickr">AudioJungle</a>
</li>
<li>
<a href="#" class="icon-facebook">ThemeForest</a>
</li>
</ul>
<ul>
<li>
<a href="#" class="icon-google">VideoHive</a>
</li>
<li>
<a href="#" class="icon-reddit">GraphicRiver</a>
</li>
</ul>
<ul>
<li>
<a href="#" class="icon-lastfm">3DOcean</a>
</li>
<li>
<a href="#" class="icon-technorati">CodeCanyon</a>
</li>
</ul>
<ul>
<li>
<a href="#" class="icon-yahoo">Tuts+</a>
</li>
<li>
<a href="#" class="icon-dribbble">PhotoDune</a>
</li>
</ul>
</li>
<li>
<a href="#" class="icon-login" title="Sign-in"></a>
<ul>
<li class="sticklr-title">
<a href="#">Form example</a>
</li>
<li>
<form action="http://www.google.com/" method="POST">
<input type="text" name="username" value="" placeholder="username" />
<input type="password" name="password" value="" placeholder="password" />
<input type="submit" name="submit" value="Submit" />
</form>
</li>
</ul>
</li>
<li>
<a href="#" class="icon-twitter" title="Sharing"></a>
<ul>
<li class="sticklr-title">
<a href="#">Sharing</a>
</li>
<li>
<a href="#/" class="icon-twitter">Tweet this on Twitter</a>
</li>
<li>
<a href="#/" class="icon-delicious">Share this on Facebook</a>
</li>
</ul>
</li>
<li>
<a href="#" class="icon-calendar" title="Calendar"></a>
<ul>
<li class="sticklr-title">
<a href="#">Example use</a>
</li>
<li>
<table class="calendar">
<tr>
<td></td><td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
</tr>
<tr>
<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td>
</tr>
<tr>
<td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
</tr>
<tr>
<td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td></td><td></td>
</tr>
</table>
</li>
</ul>
</li>
<li>
<a href="#" class="icon-email" title="Notification"><span class="notification-count">3</span></a>
<ul>
<li class="sticklr-title">
<a href="#">Notification (3)</a>
</li>
<li>
<form action="#" method="POST">
<input type="text" name="search" value="" placeholder="Someone is typing.." />
</form>
</li>
<li>
<a href="#" class="icon-user">00:32 Hello!</a>
</li>
<li>
<a href="#" class="icon-user">23:52 Not really works</a>
</li>
<li>
<a href="#" class="icon-user">22:07 Just example use</a>
</li>
</ul>
</li>
</ul>
</div>
<!--DEMO end-->
</div>
</body>
</html>
CSS代码(960gs.css):
/*Variable Grid System.Learn more ~ http://www.spry-soft.com/grids/Based on 960 Grid System - http://960.gs/Licensed under GPL and MIT.*/
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
/* remember to define focus styles! */
:focus{outline:0;}
/* remember to highlight inserts somehow! */
ins{text-decoration:none;}
del{text-decoration:line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse;border-spacing:0;}
/* Containers----------------------------------------------------------------------------------------------------*/
.container_12{margin-left:auto;margin-right:auto;width:960px;}
/* Grid >> Global----------------------------------------------------------------------------------------------------*/
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px;}
/* Grid >> Children (Alpha ~ First,Omega ~ Last)----------------------------------------------------------------------------------------------------*/
.alpha{margin-left:0;}
.omega{margin-right:0;}
/* Grid >> 12 Columns----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1{width:60px;}
.container_12 .grid_2{width:140px;}
.container_12 .grid_3{width:220px;}
.container_12 .grid_4{width:300px;}
.container_12 .grid_5{width:380px;}
.container_12 .grid_6{width:460px;}
.container_12 .grid_7{width:540px;}
.container_12 .grid_8{width:620px;}
.container_12 .grid_9{width:700px;}
.container_12 .grid_10{width:780px;}
.container_12 .grid_11{width:860px;}
.container_12 .grid_12{width:940px;}
/* Prefix Extra Space >> 12 Columns----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1{padding-left:80px;}
.container_12 .prefix_2{padding-left:160px;}
.container_12 .prefix_3{padding-left:240px;}
.container_12 .prefix_4{padding-left:320px;}
.container_12 .prefix_5{padding-left:400px;}
.container_12 .prefix_6{padding-left:480px;}
.container_12 .prefix_7{padding-left:560px;}
.container_12 .prefix_8{padding-left:640px;}
.container_12 .prefix_9{padding-left:720px;}
.container_12 .prefix_10{padding-left:800px;}
.container_12 .prefix_11{padding-left:880px;}
/* Suffix Extra Space >> 12 Columns----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1{padding-right:80px;}
.container_12 .suffix_2{padding-right:160px;}
.container_12 .suffix_3{padding-right:240px;}
.container_12 .suffix_4{padding-right:320px;}
.container_12 .suffix_5{padding-right:400px;}
.container_12 .suffix_6{padding-right:480px;}
.container_12 .suffix_7{padding-right:560px;}
.container_12 .suffix_8{padding-right:640px;}
.container_12 .suffix_9{padding-right:720px;}
.container_12 .suffix_10{padding-right:800px;}
.container_12 .suffix_11{padding-right:880px;}
/* Push Space >> 12 Columns----------------------------------------------------------------------------------------------------*/
.container_12 .push_1{left:80px;}
.container_12 .push_2{left:160px;}
.container_12 .push_3{left:240px;}
.container_12 .push_4{left:320px;}
.container_12 .push_5{left:400px;}
.container_12 .push_6{left:480px;}
.container_12 .push_7{left:560px;}
.container_12 .push_8{left:640px;}
.container_12 .push_9{left:720px;}
.container_12 .push_10{left:800px;}
.container_12 .push_11{left:880px;}
/* Pull Space >> 12 Columns----------------------------------------------------------------------------------------------------*/
.container_12 .pull_1{left:-80px;}
.container_12 .pull_2{left:-160px;}
.container_12 .pull_3{left:-240px;}
.container_12 .pull_4{left:-320px;}
.container_12 .pull_5{left:-400px;}
.container_12 .pull_6{left:-480px;}
.container_12 .pull_7{left:-560px;}
.container_12 .pull_8{left:-640px;}
.container_12 .pull_9{left:-720px;}
.container_12 .pull_10{left:-800px;}
.container_12 .pull_11{left:-880px;}
/* Clear Floated Elements----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
CSS代码(style.css):
@import url('fonts/Bebas-Neue-fontfacekit/stylesheet.css');@import url('fonts/news-cycle-fontfacekit/stylesheet.css');body{background:#f7f7f7;color:#555;cursor:default;font-family:'NewsCycleRegular',Helvetica,'Lucida Grande','Trebuchet MS',Arial,sans-serif;font-size:1em;-webkit-font-smoothing:antialiased;}
a{color:#898989;text-decoration:underline;}
a:hover{color:#a7a7a7;}
abbr,acronym{border-bottom:1px dotted #000;cursor:help;}
blockquote,p,form,fieldset,table,ol,ul,pre{line-height:1.35em;margin:10px 0 25px 0;}
blockquote,q{font-style:italic;}
blockquote:before,q:before{content:url('../images/freshlr-blockquote.html');float:left;margin:0 10px 10px 0;}
blockquote.white:before{content:url('../images/freshlr-blockquote-white.html');}
em{font-style:italic;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-family:'PermanentMarkerRegular','BallparkWeiner','GoudyBookletter1911Regular',BebasNeueRegular,Helvetica,"Lucida Grande",Arial,sans-serif;margin:10px 0 0 0;}
h1{font-size:7em;}
h2{font-size:5em;}
h3{font-size:3em;}
h4{font-size:1.5em;}
h5{font-size:1.2em;}
h6{font-size:1em;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
input,textarea,select,button{background:#fff;border:solid 1px #999;color:#777;font-family:'GoudyBookletter1911Regular','NewsCycleRegular','DroidSansRegular',Helvetica,'Lucida Grande','Trebuchet MS',Arial,sans-serif;margin:5px 10px 5px 0;padding:5px;}
button,input[type="submit"]{box-shadow:#ccc 0px 0px 2px;-moz-box-shadow:#ccc 0px 0px 2px;-webkit-box-shadow:#ccc 0px 0px 2px;color:#555;background:#f0f0f0;font-size:1em;}
button:focus,input[type="submit"]:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus,textarea:focus{box-shadow:inset #555 0px 0px 5px;-moz-box-shadow:inset #555 0px 0px 5px;-webkit-box-shadow:inset #555 0px 0px 5px;}
button,input[type="submit"]{background:#fff;background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgb(255,255,255)),to(rgb(221,221,221)));}
button:hover,input[type="submit"]:hover{background:#eee;}
fieldset{border:1px dashed #ccc;padding:10px 20px;}
input[type="file"]{width:100%;}
input[type="text"],input[type="password"],textarea{box-shadow:inset #bbb 0px 0px 5px;-moz-box-shadow:inset #bbb 0px 0px 5px;-webkit-box-shadow:inset #bbb 0px 0px 5px;}
legend{padding:0 5px;text-align:left;}
ol{list-style-type:decimal;}
ol li,ul li{margin-left:20px;}
small{font-size:0.7em;}
strong{font-weight:bold;}
sub{font-size:0.7em;vertical-align:sub;}
sup{font-size:0.7em;vertical-align:super;}
table{border:1px solid #ddd;border-collapse:collapse;border-spacing:0;width:100%;}
th{background:#555;color:#fff;}
th,td{padding:10px;text-align:left;}
ul{list-style-type:square;}
ul>li>a{position:relative;}
/* column options */
.one-full,.two-third,.one-half,.one-third{float:left;overflow:visible;padding:10px;}
.one-full{width:715px;}
.two-third{width:470px;}
.one-half{width:345px;}
.one-third{width:225px;}
.last{float:right;}
/* specific class for element */
.aligncenter{text-align:center;}
.alignjustify{text-align:justify;}
.alignleft{text-align:left;}
.alignright{text-align:right;}
/* border frame,shadow,& positioning classes for images */
img{margin:5px;border:5px solid #fff;box-shadow:#999 0px 0px 5px;-moz-box-shadow:#999 0px 0px 5px;-webkit-box-shadow:#999 0px 0px 5px;float:left;margin:5px 20px 10px 0;}
img.rightpic{float:right;margin:5px 0 10px 20px;}
img.centerpic{clear:both;float:none;margin:10px;}
#page{background:#fff;box-shadow:0 0 5px #ccc;-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;}
#header{padding:40px;color:#fff;background:#555;}
#slider{padding:40px 40px 10px 40px;}
#features{padding:0 40px 40px 40px;}
#documentation,#footer{padding:10px 40px 40px 40px;}
pre{padding:20px;color:#fff;background:#555;overflow:auto;}
分享到QQ
分享到微博
微信扫一扫
