обращение к cookie из JavaScript
Вложений: 1
есть меню на JavaScript + CSS
скрипт заносит информацию в куки и при обновлении страницы (F5) меню отображается такое какое было на момент перезагрузки, а нужно что бы при обновлении страницы меню было свернуто. как это сделать подскажите, пожалуйста! sdmenu.js function SDMenu(id) { if (!document.getElementById || !document.getElementsByTagName) return false; this.menu = document.getElementById(id); this.submenus = this.menu.getElementsByTagName("div"); this.remember = true; //ïðè çàãðóçêå âñå çàêðûòî this.speed = 4; //ñêîðîñòü this.markCurrent = false; //õç ÷òî ýòî this.oneSmOnly = false; //ìîæíî îòêðûòü íåñêîëüêî îäíîâðåìåííî } SDMenu.prototype.init = function() { var mainInstance = this; for (var i = 0; i < this.submenus.length; i++) this.submenus[i].getElementsByTagName("span")[0].onclick = function() { mainInstance.toggleMenu(this.parentNode); }; if (this.markCurrent) { var links = this.menu.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) if (links[i].href == document.location.href) { links[i].className = "current"; break; } } if (this.remember) { var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)"); var match = regex.exec(document.cookie); if (match) { var states = match[1].split(""); for (var i = 0; i < states.length; i++) this.submenus[i].className = (states[i] == 0 ? "collapsed" : ""); } } }; SDMenu.prototype.toggleMenu = function(submenu) { if (submenu.className == "collapsed") this.expandMenu(submenu); else this.collapseMenu(submenu); }; SDMenu.prototype.expandMenu = function(submenu) { var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight; var links = submenu.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) fullHeight += links[i].offsetHeight; var moveBy = Math.round(this.speed * links.length); var mainInstance = this; var intId = setInterval(function() { var curHeight = submenu.offsetHeight; var newHeight = curHeight + moveBy; if (newHeight < fullHeight) submenu.style.height = newHeight + "px"; else { clearInterval(intId); submenu.style.height = ""; submenu.className = ""; mainInstance.memorize(); } }, 30); this.collapseOthers(submenu); }; SDMenu.prototype.collapseMenu = function(submenu) { var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight; var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length); var mainInstance = this; var intId = setInterval(function() { var curHeight = submenu.offsetHeight; var newHeight = curHeight - moveBy; if (newHeight > minHeight) submenu.style.height = newHeight + "px"; else { clearInterval(intId); submenu.style.height = ""; submenu.className = "collapsed"; mainInstance.memorize(); } }, 30); }; SDMenu.prototype.collapseOthers = function(submenu) { if (this.oneSmOnly) { for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed") this.collapseMenu(this.submenus[i]); } }; SDMenu.prototype.expandAll = function() { var oldOneSmOnly = this.oneSmOnly; this.oneSmOnly = false; for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i].className == "collapsed") this.expandMenu(this.submenus[i]); this.oneSmOnly = oldOneSmOnly; }; SDMenu.prototype.collapseAll = function() { for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i].className != "collapsed") this.collapseMenu(this.submenus[i]); }; SDMenu.prototype.memorize = function() { if (this.remember) { var states = new Array(); for (var i = 0; i < this.submenus.length; i++) states.push(this.submenus[i].className == "collapsed" ? 0 : 1); var d = new Date(); d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)); document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/"; } }; sdmenu.html <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Slashdot's Menu</title> <link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" /> <script type="text/javascript" src="sdmenu/sdmenu.js"> /*********************************************** * Slashdot Menu script- By DimX * Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ </script> <script type="text/javascript"> // <![CDATA[ var myMenu; window.onload = function() { myMenu = new SDMenu("my_menu"); myMenu.init(); }; // ]]> </script> </head> <body> <form action="#" style="font-family: sans-serif; font-size: .8em" onsubmit="return false"> <fieldset><legend>Menu actions</legend> <label for="speed">Speed (1-5):</label> <input type="text" id="speed" value="3" size="1" onchange="myMenu.speed = parseInt(this.value)" /> <label for="oneSmOnly">One submenu at a time:</label> <select id="oneSmOnly" onchange="myMenu.oneSmOnly = this.selectedIndex"><option>false</option><option>true</option></select> <select name="smNr"><option>1</option><option>2</option><option>3</option><option>4</option></select> <input type="button" value="Expand" onclick="myMenu.expandMenu(myMenu.submenus[smNr.selectedIndex])" /> <input type="button" value="Collapse" onclick="myMenu.collapseMenu(myMenu.submenus[smNr.selectedIndex])" /> <input type="button" value="Toggle" onclick="myMenu.toggleMenu(myMenu.submenus[smNr.selectedIndex])" /> <input type="button" value="Expand all" onclick="myMenu.expandAll()" /> <input type="button" value="Collapse all" onclick="myMenu.collapseAll()" /> </fieldset> </form> <div style="float: left" id="my_menu" class="sdmenu"> <div> <span>Online Tools</span> <a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a> <a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a> <a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a> <a href="http://tools.dynamicdrive.com/password/">htaccess Password</a> <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a> <a href="http://tools.dynamicdrive.com/button/">Button Maker</a> </div> <div> <span>Support Us</span> <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a> <a href="http://www.dynamicdrive.com/link.htm">Link to Us</a> <a href="http://www.dynamicdrive.com/resources/">Web Resources</a> </div> <div class="collapsed"> <span>Partners</span> <a href="http://www.javascriptkit.com">JavaScript Kit</a> <a href="http://www.cssdrive.com">CSS Drive</a> <a href="http://www.codingforums.com">CodingForums</a> <a href="http://www.dynamicdrive.com/style/">CSS Examples</a> </div> <div> <span>Test Current</span> <a href="?foo=bar">Current or not</a> <a href="./">Current or not</a> <a href="index.html">Current or not</a> <a href="index.html?query">Current or not</a> </div> </div> <div style="padding-left: 200px"> <pre> var myMenu = new SDMenu("main_menu"); // ID of the menu element // Default values... myMenu.speed = 3; // Menu sliding speed (1 - 5 recomended) myMenu.remember = true; // Store menu states (expanded or collapsed) in cookie and restore later myMenu.oneSmOnly = false; // One expanded submenu at a time myMenu.markCurrent = true; // Mark current link / page (link.href == location.href) myMenu.init(); // Additional methods... var firstSubmenu = myMenu.submenus[0]; myMenu.expandMenu(firstSubmenu); // Expand a submenu myMenu.collapseMenu(firstSubmenu); // Collapse a menu myMenu.toggleMenu(firstSubmenu); // Expand if collapsed and collapse if expanded myMenu.expandAll(); // Expand all submenus myMenu.collapseAll(); // Collapse all submenus </pre> <p>Download: <a href="sdmenu.zip">sdmenu.zip</a></p> </div> </body> </html> |
(код не читал и с этим скриптом не работал. ниже написано первое что пришло в голову)
проще всего оттолкнуться от этого: <body onload="SDMenu.prototype.collapseAll();"> |
пробовал уже. не то.
|
я тоже хочу первое, что пришло в голову сказать :yes:
Цитата:
|
это есть уже
|
а вы попробуйте сделать там false )))
|
Часовой пояс GMT +3, время: 08:06. |