jquery_chajian资源-CSDN文库

共28个文件

gif：11个

js：8个

css：6个

jquery

需积分: 9 93 浏览量 2008-11-25 22:05:39 上传评论收藏 105KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

_隐藏效果的jquery插件--toggleElements.zip （28个子文件）

toggleElements

bgc.gif 8KB

image.jpg 7KB

bgi.gif 30KB

togglerch.gif 112B

toggleroh.gif 113B

download.gif 3KB

jquery.toggleElements.js 6KB

index.html 14KB

togglerc.gif 114B

jquery.toggleElements.pack.js 2KB

ext.gif 115B

pluginpage.js 1KB

toggleElements2.css 1KB

js.gif 596B

togglero.gif 115B

toggleElements.css 2KB

style.css 4KB

chili

javascript.js 1KB

chili.pack.js 4KB

html.css 735B

css.css 766B

javascript.css 862B

html.js 986B

css.js 4KB

favicon.ico 4KB

bgw.gif 260B

bgf.gif 25KB

jquery-latest.pack.js 27KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>jquery.toggleElements.js - Toggle HTML-Elements with jQuery</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="jquery.toggleElements.js - Toggle HTML-Elements with jQuery" /> <meta name="keywords" content="toggle, jQuery, Plugin, JavaScript Library, snippet, jQuery-Plugin, JavaScript, Ajax, Css" /> <meta http-equiv="keywords" content="toggle, jQuery, Plugin, JavaScript Library, snippet, jQuery-Plugin, JavaScript, Ajax, Css" /> <meta name="verify-v1" content="Eal6+fiCjgKAZb5A6pRvSLmsh9NLF2AsqxqJrLuFoAs=" /> <meta name="robots" content="index,follow" /> <meta name="revisit-after" content="7 days" /> <meta name="siteinfo" content="http://jquery.andreaseberhard.de/robots.txt" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen,projection" /> <link rel="icon" href="favicon.ico" /> <link rel="shortcut icon" href="favicon.ico" /> <script type="text/javascript" src="jquery-latest.pack.js"></script> <script type="text/javascript" src="pluginpage.js"></script> <script type="text/javascript" src="jquery.toggleElements.pack.js"></script> <link rel="stylesheet" type="text/css" href="toggleElements.css" /> <link rel="stylesheet" type="text/css" href="toggleElements2.css" /> <script type="text/javascript"> $(document).ready(function(){ $('div.toggler-1').toggleElements( ); $('ul.toggler-2').toggleElements( ); $('img.toggler-3').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } ); $('ul.toggler-4').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } ); $('div.toggler-5').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } ); $('ul.toggler-6').toggleElements( { fxAnimation:'fade', fxSpeed:1000, className:'toggler' } ); $('div.toggler-7').toggleElements( { fxAnimation:'fade', fxSpeed:1000, className:'toggler' } ); $('ul.toggler-8').toggleElements( { fxAnimation:'show', fxSpeed:'fast', className:'none' } ); $('fieldset.toggler-9').toggleElements( { fxAnimation:'show', fxSpeed:1000, className:'toggler', onClick:doOnClick, onHide:doOnHide, onShow:doOnShow } ); $('div.toggler-10').toggleElements( ); }); function doOnClick() { alert('callback: onClick'); } function doOnHide() { alert('callback: onHide'); } function doOnShow() { alert('callback: onShow'); } </script>  <script type="text/javascript" src="chili/chili.pack.js"></script> <script id="setup" type="text/javascript"> ChiliBook.recipeFolder = "chili/"; ChiliBook.stylesheetFolder = "chili/"; </script> </head> <body> <div id="page"> <div class="intro"> <h1> <a href="./index.html" title="jquery.toggleElements.js - Toggle HTML-Elements with jQuery">jquery.toggleElements.js<br />Toggle HTML-Elements with jQuery</a> </h1> <div class="introtext"> <p> <strong>toggleElements</strong> is designed to hide informations on your site and show it only when the user requests more information. </p> <h2>Features</h2> <ul> <li>unobtrusive script, simple to setup</li> <li>full customizeable via CSS</li> <li>only a class and a title-attribute must be added to your original HTML</li> <li>nesting <em>toggleElements</em> is possible</li> </ul> <p class="light">This page uses jQuery Version <script type="text/javascript">document.write(jQuery(document).jquery);</script></p> </div> <div class="sidebar"> <p> Version 1.3, 2007-09-11 </p> <p> Tested on Windows XP SP2 with<br /> - IE 5.5 + 6 + 7<br /> - Firefox 1.5.0.7 + 2.0.0.3<br /> - Opera 8.0 + 8.5 + 9.00 </p> <div class="download"><a href="http://jquery.andreaseberhard.de/download/toggleElements.zip" title="Download this site">Download</a></div> </div> </div> <div class="examples"> <h2>E x a m p l e s:</h2> <div class="toggler-1" title="Example 1: div with text and image"> <p> <img src="image.jpg" style="float:left;margin-right:30px;margin-bottom:10px;" alt="" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat. Sed rutrum. Nam aliquam, neque id molestie malesuada, tellus odio facilisis augue, in vulputate massa neque elementum risus. Aenean pretium, diam quis condimentum imperdiet, est augue pretium quam, id varius ligula justo ultricies ante. In feugiat. Nulla magna. Nullam non metus at dui aliquet blandit. Nunc mi. Aenean mauris tellus, faucibus non, semper ac, facilisis non, orci. Proin cursus nibh in tellus. Fusce posuere nisi eu ligula. Morbi volutpat est a diam lobortis consectetuer. Donec placerat, eros vel cursus ornare, leo mi aliquet velit, quis aliquet ipsum augue eget augue. Donec ligula sem, eleifend at, mattis et, facilisis at, augue. </p> </div> <ul class="toggler-2" title="Example 2: unordered list"> <li>Google</li> <li>AltaVista</li> <li>Fireball</li> </ul> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat. Sed rutrum. Nam aliquam, neque id molestie malesuada, tellus odio facilisis augue, in vulputate massa neque elementum risus. Aenean pretium, diam quis condimentum imperdiet, est augue pretium quam, id varius ligula justo ultricies ante. In feugiat. Nulla magna. Nullam non metus at dui aliquet blandit. Nunc mi. Aenean mauris tellus, faucibus non, semper ac, facilisis non, orci. Proin cursus nibh in tellus. Fusce posuere nisi eu ligula. Morbi volutpat est a diam lobortis consectetuer. Donec placerat, eros vel cursus ornare, leo mi aliquet velit, quis aliquet ipsum augue eget augue. Donec ligula sem, eleifend at, mattis et, facilisis at, augue. </p> <img src="image.jpg" alt="" class="toggler-3" title="Example 3: a single image with different class" /> <ul class="toggler-4" title="Example 4: unordered list with different class"> <li>Google</li> <li>AltaVista</li> <li>Fireball</li> <li>Google</li> <li>AltaVista</li> <li>Fireball</li> </ul> <div class="toggler-5" title="Example 5: div with different class and subs ;-)"> <p> <img src="image.jpg" style="float:left;margin-right:30px;margin-bottom:10px;" alt="" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat. Sed rutrum. Nam aliquam, neque id molestie malesuada, tellus odio facilisis augue, in vulputate massa neque elementum risus. Aenean pretium, diam quis condimentum imperdiet, est augue pretium quam, id varius ligula justo ultricies ante. In feugiat. Nulla magna. Nullam non metus at dui aliquet blandit. Nunc mi. Aenean mauris tellus, faucibus non, semper ac, facilisis non, orci. Proin cursus nibh in tellus. Fusce posuere nisi eu ligula. Morbi volutpat est a diam lobortis consectetuer. Donec placerat, eros vel cursus ornare, leo mi aliquet velit, quis aliquet ipsum augue eget augue. Donec ligula sem, eleifend at, mattis et, facilisis at, augue. </p> <ul class="toggler-6" title="Example 6: unordered list"> <li>Google</li> <li>AltaVista</li> <li>Fireball</li> </ul> <div class="toggler-7" title="Example 7: unordered list with sub"> <ul> <li>Google</li> <li>AltaVista</li> <li> <ul class="toggler-8" title="Example 8: unordered list"> <li>Google</li> <li>AltaVista</li> <li>Fireball</li> </ul> </li> </ul> </div> </div> <fieldset class="toggler-9" title="Example 9: fieldset, with callbacks"> <legend>Lorem Ipsum</legend> <label for="foo"><input id="foo" name="foo" /></label> <input type="su

评论收藏

内容反馈