jquerysidebarlayout_easyuisidebar资源-CSDN文库

共15个文件

js：5个

css：5个

html：4个

sidebar

jquery

3星 · 超过75%的资源需积分: 9 50 浏览量 2011-11-12 00:51:43 上传评论收藏 86KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jquery-collapsible-sidebar-layout.zip （15个子文件）

jquery-collapsible-sidebar-layout

devheart-examples.css 3KB

4-adding-style-and-usability

img

vertical-separator.gif 51B

index.html 4KB

jquery-1.4.2.min.js 70KB

style.css 2KB

jquery.cookie.js 4KB

3-remember-preference-using-cookies

index.html 4KB

jquery-1.4.2.min.js 70KB

style.css 1KB

jquery.cookie.js 4KB

2-show-hide-and-toggle-sidebar

index.html 3KB

jquery-1.4.2.min.js 70KB

style.css 1KB

1-markup-and-style-setup

index.html 3KB

style.css 1KB

<!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> <title>jQuery: Collapsible sidebar layout (examples) - 3. Remember preference using cookies</title> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="../devheart-examples.css" media="screen" /> </head> <body class="dhe-body"> <div id="center-wrapper"> <div id="dhe-article-info"> <h1 class="dhe-h1">jQuery: Collapsible sidebar layout (examples)</h1> <p class="dhe-p dhe-large">Examples for the article <a href="http://devheart.org/articles/jquery-collapsible-sidebar-layout/" class="dhe-link">jQuery: Collapsible sidebar layout</a> by <a href="http://devheart.org/" class="dhe-link">DevHeart</a>.</p> <div id="dhe-step-navigation"> <div class="dhe-left" id="dhe-step-dropdown-wrapper"> <select onchange="window.location=this.options[selectedIndex].value" class="dhe-select" id="dhe-step-dropdown"> <option value="../1-markup-and-style-setup/index.html">1. Markup and style setup</option> <option value="../2-show-hide-and-toggle-sidebar/index.html">2. Show, hide and toggle sidebar</option> <option value="../3-remember-preference-using-cookies/index.html" selected="selected">3. Remember preference using cookies</option> <option value="../4-adding-style-and-usability/index.html">4. Adding style and usability</option> </select> </div> <div class="dhe-right"> <a href="../2-show-hide-and-toggle-sidebar/index.html" class="dhe-link">« Previous</a> <span class="dhe-text-separator">|</span> <a href="../4-adding-style-and-usability/index.html" class="dhe-link">Next »</a> </div> <div class="dhe-clearer"> </div> </div> </div> <div class="dhe-example-section" id="ex-3"> <div class="dhe-example-section-header"> <h3 class="dhe-h3 dhe-example-title">Example 3: Remember preference using cookies</h3> <div class="dhe-example-description">Show, hide or toggle sidebar - your preference is remembered using a cookie (refresh page to see that it's working).</div> </div> <div class="dhe-example-section-content">  <p> <input type="button" class="dhe-input-button" value="Show sidebar" id="button-show" /> <input type="button" class="dhe-input-button" value="Hide sidebar" id="button-hide" /> <input type="button" class="dhe-input-button" value="Toggle sidebar" id="button-toggle" /> <input type="button" class="dhe-input-button" value="Reset preference" id="button-reset" /> </p> <div class="sidebar-at-right" id="main"> <div id="content">Content</div> <div id="sidebar">Sidebar</div> <div class="clearer"> </div> </div>  </div> </div> </div>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script>  <script type="text/javascript"> $(document).ready(function(){ // Show sidebar function showSidebar(){ $('#main').addClass('use-sidebar'); $.cookie('sidebar-pref', 'use-sidebar', { expires: 30 }); } $('#button-show').click(function(){ showSidebar(); }); // Hide sidebar function hideSidebar(){ $('#main').removeClass('use-sidebar'); $.cookie('sidebar-pref', null, { expires: 30 }); } $('#button-hide').click(function(){ hideSidebar(); }); // Toggle sidebar $('#button-toggle').click(function(){ if ( $('#main').hasClass('use-sidebar') ){ hideSidebar(); } else { showSidebar(); } }); // Reset preference $('#button-reset').click(function(){ $.cookie('sidebar-pref', null); }); // Auto-load preference $('#main').addClass($.cookie('sidebar-pref')); }); </script> </body> </html>

评论收藏

内容反馈