以下是 jQuery通知栏jBar插件js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<title>jQuery通知栏jBar插件</title>
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- CSS -->
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/bar.css">
<!-- Load jQuery + jQuery UI from Google CDN -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<!--[if lt IE 10]><script src="js/html5.js"></script><![endif]-->
<script>
$(document).ready(function() {
// jBar Script by Todd Motto
$('.jRibbon').delay(1000).fadeIn(400).addClass('up', 600);
$('.jBar').hide().delay(2500).slideDown(300);
$('.jTrigger').click(function(){
$('.jRibbon').toggleClass('up', 300);
$('.jBar').slideToggle();
});
});
</script>
</head>
<body>
<!-- jBar -->
<div class="jBar">
<span class="helloinner">
<p class="text">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
</p> <p class="jTrigger downarrow"><img src="img/arrow-up.png" class="arrow" alt="Arrow Up"></p>
</span>
</div>
<span class="jRibbon jTrigger"><img src="img/arrow-down.png" class="arrow" alt="Arrow Down"></span>
<!-- /jBar -->
<header>
<div>
<h1 id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</h1>
</div>
</header>
<nav>
<ul>
<li id="current">Visit the Tutorial</a></li>
</ul>
</nav>
<section id="wrapper">
<article id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
vehicula, velit et pretium bibendum, arcu eros tempor risus, a
dignissim sapien nulla eget nisl. Vivamus tellus libero,
bibendum eu tempus et, egestas ut neque. Sed vel diam nec magna
tincidunt ullamcorper. Fusce iaculis lectus consectetur ante
pulvinar at vulputate massa congue. Sed at arcu tortor. Praesent
orci nisi, imperdiet sit amet fermentum quis, fermentum vitae
nisl. Mauris non nulla lacus. Nulla elementum quam nec augue
tincidunt sit amet commodo nisi interdum. Duis in tellus et orci
interdum rutrum quis id massa. Maecenas blandit, urna sed rutrum
sagittis, nisl ante rhoncus velit, a ultrices odio felis vel
velit. Phasellus vel enim purus.
</p>
<p>
Nullam ullamcorper venenatis leo, vitae porttitor enim rhoncus
eget. Proin arcu lectus, commodo vel varius in, sodales ut
libero. Mauris placerat ante vitae metus porttitor sit amet
mollis est porta. Vestibulum facilisis mi nec ipsum fermentum
sit amet condimentum sem tincidunt. Donec at porttitor leo. Cras
venenatis, ante vitae posuere dapibus, nisl quam feugiat nulla,
non aliquam sapien nisl sit amet quam. Integer ipsum felis,
pretium eu scelerisque et, commodo venenatis nunc. Ut ultricies,
neque non dignissim convallis, lorem arcu dignissim magna, id
pharetra nunc lectus sit amet tellus. Proin euismod posuere
bibendum. Fusce luctus, justo ut facilisis ullamcorper, mi eros
mollis sapien, vitae hendrerit turpis magna ac ipsum. Etiam sed
justo eget sem egestas elementum.
</p>
<p>
Mauris at urna metus, at posuere lacus. Fusce vitae purus sed
magna lacinia ullamcorper. Etiam vestibulum, est sed bibendum
commodo, sem ipsum tincidunt dui, sit amet commodo libero lacus
convallis enim. Quisque facilisis ipsum nisi. Phasellus ac
lectus lobortis urna porttitor sodales. Ut vehicula ante
suscipit nulla malesuada dignissim. Fusce vitae lobortis ligula.
Donec aliquam mi nec tortor lobortis tempus. Curabitur luctus
accumsan ipsum sit amet sagittis. Donec eget urna ligula.
Suspendisse tristique, ante vitae ultricies adipiscing, velit
eros sodales purus, non convallis nulla sapien sit amet quam.
Etiam venenatis diam non nibh condimentum a vehicula nibh
porttitor. Aliquam eu nulla non mi scelerisque luctus id quis
justo. Etiam aliquam tincidunt condimentum. Quisque ac mi nec
eros faucibus luctus eget eu dolor. Cras tellus sapien, aliquet
aliquet molestie in, mattis sit amet risus.
</p>
<p>
In tincidunt, augue vitae varius adipiscing, diam purus dapibus
velit, non sollicitudin quam elit eget orci. Suspendisse
potenti. Vivamus egestas cursus quam, sit amet posuere sapien
ullamcorper at. Aenean pretium dolor eget lorem fermentum ut
mattis purus commodo. Donec congue ultricies nisi in mollis. In
id purus risus. Fusce iaculis urna ut dolor convallis vitae
porta nisi fermentum. Proin fringilla varius vulputate. Mauris
tempor, sem id consectetur euismod, tellus sapien imperdiet
mauris, eu scelerisque magna ipsum molestie massa. Sed mattis
egestas euismod.
</p>
<p>
Proin non pretium lacus. Vestibulum pretium mi non magna
faucibus nec pharetra elit egestas. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis
egestas. Fusce interdum lectus a leo congue porta. Sed interdum,
ligula bibendum feugiat molestie, diam nunc facilisis quam, a
faucibus turpis libero molestie orci. Nulla ut diam eros, et
varius risus. Mauris accumsan luctus lorem vel sollicitudin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</article>
</section>
<footer>
<section>
© 2013 Todd Motto
</section>
</footer>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<title>jQuery通知栏jBar插件</title>
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- CSS -->
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/bar.css">
<!-- Load jQuery + jQuery UI from Google CDN -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<!--[if lt IE 10]><script src="js/html5.js"></script><![endif]-->
<script>
$(document).ready(function() {
// jBar Script by Todd Motto
$('.jBar').delay(2000).slideUp(function() { // Hides the Hellobar after 2 seconds
$('.jRibbon').show().removeClass('up', 300); // Get the dropdown effect
});
$('.jTrigger').click(function(){ // Click it
$('.jRibbon').toggleClass('up', 300); // Toggle the ribbon
$('.jBar').slideToggle(); // Toggle the bar
});
});
</script>
</head>
<body>
<!-- jBar -->
<div class="jBar">
<span class="helloinner">
<p class="text">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
</p> <p class="jTrigger downarrow"><img src="img/arrow-up.png" class="arrow" alt="Arrow Up"></p>
</span>
</div>
<span class="jRibbon jTrigger up"><img src="img/arrow-down.png" class="arrow" alt="Arrow Down"></span>
<!-- /jBar -->
<header>
<div>
<h1 id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</h1>
</div>
</header>
<nav>
<ul>
<li id="current">Visit the Tutorial</a></li>
</ul>
</nav>
<section id="wrapper">
<article id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
vehicula, velit et pretium bibendum, arcu eros tempor risus, a
dignissim sapien nulla eget nisl. Vivamus tellus libero,
bibendum eu tempus et, egestas ut neque. Sed vel diam nec magna
tincidunt ullamcorper. Fusce iaculis lectus consectetur ante
pulvinar at vulputate massa congue. Sed at arcu tortor. Praesent
orci nisi, imperdiet sit amet fermentum quis, fermentum vitae
nisl. Mauris non nulla lacus. Nulla elementum quam nec augue
tincidunt sit amet commodo nisi interdum. Duis in tellus et orci
interdum rutrum quis id massa. Maecenas blandit, urna sed rutrum
sagittis, nisl ante rhoncus velit, a ultrices odio felis vel
velit. Phasellus vel enim purus.
</p>
<p>
Nullam ullamcorper venenatis leo, vitae porttitor enim rhoncus
eget. Proin arcu lectus, commodo vel varius in, sodales ut
libero. Mauris placerat ante vitae metus porttitor sit amet
mollis est porta. Vestibulum facilisis mi nec ipsum fermentum
sit amet condimentum sem tincidunt. Donec at porttitor leo. Cras
venenatis, ante vitae posuere dapibus, nisl quam feugiat nulla,
non aliquam sapien nisl sit amet quam. Integer ipsum felis,
pretium eu scelerisque et, commodo venenatis nunc. Ut ultricies,
neque non dignissim convallis, lorem arcu dignissim magna, id
pharetra nunc lectus sit amet tellus. Proin euismod posuere
bibendum. Fusce luctus, justo ut facilisis ullamcorper, mi eros
mollis sapien, vitae hendrerit turpis magna ac ipsum. Etiam sed
justo eget sem egestas elementum.
</p>
<p>
Mauris at urna metus, at posuere lacus. Fusce vitae purus sed
magna lacinia ullamcorper. Etiam vestibulum, est sed bibendum
commodo, sem ipsum tincidunt dui, sit amet commodo libero lacus
convallis enim. Quisque facilisis ipsum nisi. Phasellus ac
lectus lobortis urna porttitor sodales. Ut vehicula ante
suscipit nulla malesuada dignissim. Fusce vitae lobortis ligula.
Donec aliquam mi nec tortor lobortis tempus. Curabitur luctus
accumsan ipsum sit amet sagittis. Donec eget urna ligula.
Suspendisse tristique, ante vitae ultricies adipiscing, velit
eros sodales purus, non convallis nulla sapien sit amet quam.
Etiam venenatis diam non nibh condimentum a vehicula nibh
porttitor. Aliquam eu nulla non mi scelerisque luctus id quis
justo. Etiam aliquam tincidunt condimentum. Quisque ac mi nec
eros faucibus luctus eget eu dolor. Cras tellus sapien, aliquet
aliquet molestie in, mattis sit amet risus.
</p>
<p>
In tincidunt, augue vitae varius adipiscing, diam purus dapibus
velit, non sollicitudin quam elit eget orci. Suspendisse
potenti. Vivamus egestas cursus quam, sit amet posuere sapien
ullamcorper at. Aenean pretium dolor eget lorem fermentum ut
mattis purus commodo. Donec congue ultricies nisi in mollis. In
id purus risus. Fusce iaculis urna ut dolor convallis vitae
porta nisi fermentum. Proin fringilla varius vulputate. Mauris
tempor, sem id consectetur euismod, tellus sapien imperdiet
mauris, eu scelerisque magna ipsum molestie massa. Sed mattis
egestas euismod.
</p>
<p>
Proin non pretium lacus. Vestibulum pretium mi non magna
faucibus nec pharetra elit egestas. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis
egestas. Fusce interdum lectus a leo congue porta. Sed interdum,
ligula bibendum feugiat molestie, diam nunc facilisis quam, a
faucibus turpis libero molestie orci. Nulla ut diam eros, et
varius risus. Mauris accumsan luctus lorem vel sollicitudin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</article>
</section>
<footer>
<section>
© 2013 Todd Motto
</section>
</footer>
</body>
</html>
JS代码(html5.js):
/*! HTML5 Shiv v3.6.1 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */
;
(function(window,document){
/*jshint evil:true */
/** Preset options */
var options = window.html5 ||{
}
;
/** Used to skip problem elements */
var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
/** Not all elements can be cloned in IE **/
var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
/** Detect whether the browser supports default html5 styles */
var supportsHtml5Styles;
/** Name of the expando,to work with multiple documents or to re-shiv one document */
var expando = '_html5shiv';
/** The id for the the documents expando */
var expanID = 0;
/** Cached data for each document */
var expandoData ={
}
;
/** Detect whether the browser supports unknown elements */
var supportsUnknownElements;
(function(){
try{
var a = document.createElement('a');
a.innerHTML = '<xyz></xyz>';
//if the hidden property is implemented we can assume,that the browser supports basic HTML5 Styles supportsHtml5Styles = ('hidden' in a);
supportsUnknownElements = a.childNodes.length == 1 || (function(){
// assign a false positive if unable to shiv (document.createElement)('a');
var frag = document.createDocumentFragment();
return ( typeof frag.cloneNode == 'undefined' || typeof frag.createDocumentFragment == 'undefined' || typeof frag.createElement == 'undefined' );
}
());
}
catch(e){
supportsHtml5Styles = true;
supportsUnknownElements = true;
}
}
());
/*--------------------------------------------------------------------------*/
/** * Creates a style sheet with the given CSS text and adds it to the document. * @private * @param{
Document}
ownerDocument The document. * @param{
String}
cssText The CSS text. * @returns{
StyleSheet}
The style element. */
function addStyleSheet(ownerDocument,cssText){
var p = ownerDocument.createElement('p'),parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
p.innerHTML = 'x<style>' + cssText + '</style>';
return parent.insertBefore(p.lastChild,parent.firstChild);
}
/** * Returns the value of `html5.elements` as an array. * @private * @returns{
Array}
An array of shived element node names. */
function getElements(){
var elements = html5.elements;
return typeof elements == 'string' ? elements.split(' '):elements;
}
/** * Returns the data associated to the given document * @private * @param{
Document}
ownerDocument The document. * @returns{
Object}
An object of data. */
function getExpandoData(ownerDocument){
var data = expandoData[ownerDocument[expando]];
if (!data){
data ={
}
;
expanID++;
ownerDocument[expando] = expanID;
expandoData[expanID] = data;
}
return data;
}
/** * returns a shived element for the given nodeName and document * @memberOf html5 * @param{
String}
nodeName name of the element * @param{
Document}
ownerDocument The context document. * @returns{
Object}
The shived element. */
function createElement(nodeName,ownerDocument,data){
if (!ownerDocument){
ownerDocument = document;
}
if(supportsUnknownElements){
return ownerDocument.createElement(nodeName);
}
if (!data){
data = getExpandoData(ownerDocument);
}
var node;
if (data.cache[nodeName]){
node = data.cache[nodeName].cloneNode();
}
else if (saveClones.test(nodeName)){
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
}
else{
node = data.createElem(nodeName);
}
// Avoid adding some elements to fragments in IE < 9 because // * Attributes like `name` or `type` cannot be set/changed once an element // is inserted into a document/fragment // * Link elements with `src` attributes that are inaccessible,as with // a 403 response,will cause the tab/window to crash // * Script elements appended to fragments will execute when their `src` // or `text` property is set return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node):node;
}
/** * returns a shived DocumentFragment for the given document * @memberOf html5 * @param{
Document}
ownerDocument The context document. * @returns{
Object}
The shived DocumentFragment. */
function createDocumentFragment(ownerDocument,data){
if (!ownerDocument){
ownerDocument = document;
}
if(supportsUnknownElements){
return ownerDocument.createDocumentFragment();
}
data = data || getExpandoData(ownerDocument);
var clone = data.frag.cloneNode(),i = 0,elems = getElements(),l = elems.length;
for(;
i<l;
i++){
clone.createElement(elems[i]);
}
return clone;
}
/** * Shivs the `createElement` and `createDocumentFragment` methods of the document. * @private * @param{
Document|DocumentFragment}
ownerDocument The document. * @param{
Object}
data of the document. */
function shivMethods(ownerDocument,data){
if (!data.cache){
data.cache ={
}
;
data.createElem = ownerDocument.createElement;
data.createFrag = ownerDocument.createDocumentFragment;
data.frag = data.createFrag();
}
ownerDocument.createElement = function(nodeName){
//abort shiv if (!html5.shivMethods){
return data.createElem(nodeName);
}
return createElement(nodeName,ownerDocument,data);
}
;
ownerDocument.createDocumentFragment = Function('h,f','return function(){
' + 'var n=f.cloneNode(),c=n.createElement;
' + 'h.shivMethods&&(' + // unroll the `createElement` calls getElements().join().replace(/\w+/g,function(nodeName){
data.createElem(nodeName);
data.frag.createElement(nodeName);
return 'c("' + nodeName + '")';
}
) + ');
return n}
' )(html5,data.frag);
}
/*--------------------------------------------------------------------------*/
/** * Shivs the given document. * @memberOf html5 * @param{
Document}
ownerDocument The document to shiv. * @returns{
Document}
The shived document. */
function shivDocument(ownerDocument){
if (!ownerDocument){
ownerDocument = document;
}
var data = getExpandoData(ownerDocument);
if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS){
data.hasCSS = !!addStyleSheet(ownerDocument,// corrects block display not defined in IE6/7/8/9 'article,aside,figcaption,figure,footer,header,hgroup,nav,section{
display:block}
' + // adds styling not present in IE6/7/8/9 'mark{
background:#FF0;
color:#000}
' );
}
if (!supportsUnknownElements){
shivMethods(ownerDocument,data);
}
return ownerDocument;
}
/*--------------------------------------------------------------------------*/
/** * The `html5` object is exposed so that more elements can be shived and * existing shiving can be detected on iframes. * @type Object * @example * * // options can be changed before the script is included * html5 ={
'elements':'mark section','shivCSS':false,'shivMethods':false}
;
*/
var html5 ={
/** * An array or space separated string of node names of the elements to shiv. * @memberOf html5 * @type Array|String */
'elements':options.elements || 'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video',/** * A flag to indicate that the HTML5 style sheet should be inserted. * @memberOf html5 * @type Boolean */
'shivCSS':(options.shivCSS !== false),/** * Is equal to true if a browser supports creating unknown/HTML5 elements * @memberOf html5 * @type boolean */
'supportsUnknownElements':supportsUnknownElements,/** * A flag to indicate that the document's `createElement` and `createDocumentFragment` * methods should be overwritten. * @memberOf html5 * @type Boolean */
'shivMethods':(options.shivMethods !== false),/** * A string to describe the type of `html5` object ("default" or "default print"). * @memberOf html5 * @type String */
'type':'default',// shivs the document according to the specified `html5` object options 'shivDocument':shivDocument,//creates a shived element createElement:createElement,//creates a shived documentFragment createDocumentFragment:createDocumentFragment}
;
/*--------------------------------------------------------------------------*/
// expose html5 window.html5 = html5;
// shiv the document shivDocument(document);
}
(this,document));
CSS代码(global.css):
/* This is just the code for the layout,not the Download itself. */
/* HTML5 Reset / Display Role */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}
[hidden]{display:none;}
html{margin:0;padding:0;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;}
/* General Styles */
body,h1,h2,h3,h4,h5,h6,blockquote,p{margin:0;padding:0;}
body{font:500 12px/1.625 "Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-o-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility;background:url(images/bg.png);color:#444;margin:0;}
h1,h1 a:link,h1 a:visited,h1 a:hover{font-family:Georgia,Times,Serif;font-weight:700;font-size:20px;color:#444;text-decoration:none;padding:0;}
h2,h2 a:link,h2 a:visited,h2 a:hover{font-family:Georgia,Times,Serif;font-weight:700;font-size:20px;font-style:italic;color:#444;text-decoration:none;padding:0;}
h3,h3 a:link,h3 a:visited,h3 a:hover{font-family:Georgia,Times,Serif;font-style:italic;color:#444;text-decoration:none;font-weight:600;font-size:16px;padding:0;}
h4,h4 a:link,h4 a:visited,h4 a:hover{font-family:Georgia,Times,Serif;color:#444;text-decoration:none;font-weight:600;font-size:15px;padding:0;}
a img{border:none;}
a:link,a:hover,a:visited{text-decoration:none;color:#d63c00;}
p{padding:7px 0;}
#wrapper{width:1000px;margin:0 auto;clear:both;overflow:auto;}
#main{min-height:440px;margin:20px 0;padding:5px;}
#main p{border-bottom:1px solid #E5E5E5;padding:0 0 10px 0;margin:0 0 25px 0;}
/* Header */
header{width:100%;border-top:15px solid #E5E5E5;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:135px;float:left;background:#FFF;padding:10px;}
header div{margin:0 auto;width:1000px;overflow:auto;}
header div section{float:right;margin:30px 0 0 0;}
header div section ul li{list-style:none;display:inline;float:left;margin:0 5px 0 0;}
#logo{float:left;margin:8px 0 0 0;}
#logo a{height:100px;width:140px;}
nav{position:relative;z-index:100;list-style:none;font:bold 12px Helvetica,Arial,sans-serif;margin:0px;border-top:1px solid #FFF;padding:0px;background:#F0610E;float:left;width:100%;}
nav ul{margin:0 auto;width:1000px;float:none;overflow:auto;padding:0;}
nav li a{color:#FFF !important;text-decoration:none;display:block;margin:0;padding:10px 15px;}
nav li span{font-weight:lighter;}
nav li a:hover{background:#F9F9F9;text-decoration:none;color:#2A2A2A !important;text-shadow:1px 1px 1px #FFF;}
nav #current a{background:#F9F9F9;text-decoration:none;color:#2A2A2A !important;text-shadow:1px 1px 1px #FFF;}
nav li a:hover span{text-decoration:none;color:#444;text-shadow:1px 1px 1px #FFF;}
nav li.noline,.botnav li.noline{border:0;}
nav li,.botnav li{float:left;display:block;margin:0;padding:0;}
nav li a span,.botnav li a span{color:#888;text-transform:lowercase;display:block;font-size:90%;}
nav li.rhs,.botnav li.rhs{border-left:1px solid #fff;border-right:none;float:right;display:block;}
footer{clear:both;color:#FFF;border-top:15px solid #E5E5E5;padding:0px;background:#F0610E;float:left;width:100%;}
footer section{width:1000px;margin:0 auto;padding:10px 0;}
分享到QQ
分享到微博
微信扫一扫
