according.html
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>簡單摺疊面板的製作</title> <link href="pages/accord/css/accord.css" type="text/css" rel="stylesheet"> <script src="pages/accord/js/according.js" type="text/javascript"></script> </head> <body> <div id="CollapsiblePanel1" class="CollapsiblePanel"> <div class="CollapsiblePanelTab STYLE1" tabindex="0">Learning CSS is Funny</div> <div class="CollapsiblePanelContent"><img src="cup.gif"> An anchor tag can be used inside of a Collapsible Panel Tab so that the key board focus ring appears *inside* the tab instead of around the tab. This is an example of how to make the text within the anchor tag look like non-anchor (normal) text.This is an example of how to change the appearance of the panel tab that is currently open. The class "CollapsiblePanelOpen" is programatically added and removed from panels as the user clicks on the tabs within the CollapsiblePanel. </div> </div> <div id="CollapsiblePanel2" class="CollapsiblePanel"> <div class="CollapsiblePanelTab" tabindex="0">Collapsible Panel is Funny</div> <div class="CollapsiblePanelContent"> The name of the class (" Collapsible Panel Content") used in this selector is not necessary to make the widget function. You can use any class name you want to style a CollapsiblePanel content container. </div> </div> <div id="CollapsiblePanel3" class="CollapsiblePanel"> <div class="CollapsiblePanelTab" tabindex="0">CSS is Great</div> <div class="CollapsiblePanelContent"> The name of the class (" Collapsible Panel Content") used in this selector is not necessary to make the widget function. You can use any class name you want to style a CollapsiblePanel content container. </div> </div> <script type="text/javascript"> var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1",{contentIsOpen:false}); var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2",{contentIsOpen:false}); var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3",{contentIsOpen:false}); </script> </body></html>
according.js
var Spry;if (!Spry) Spry = {};if (!Spry.Widget) Spry.Widget = {};Spry.Widget.CollapsiblePanel = function(element, opts){ this.init(element); Spry.Widget.CollapsiblePanel.setOptions(this, opts); this.attachBehaviors();};Spry.Widget.CollapsiblePanel.prototype.init = function(element){ this.element = this.getElement(element); this.focusElement = null; this.hoverClass = "CollapsiblePanelTabHover"; this.openClass = "CollapsiblePanelOpen"; this.closedClass = "CollapsiblePanelClosed"; this.focusedClass = "CollapsiblePanelFocused"; this.enableAnimation = true; this.enableKeyboardNavigation = true; this.animator = null; this.hasFocus = false; this.contentIsOpen = true;};Spry.Widget.CollapsiblePanel.prototype.getElement = function(ele){ if (ele && typeof ele == "string") return document.getElementById(ele); return ele;};Spry.Widget.CollapsiblePanel.prototype.addClassName = function(ele, className){ if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1)) return; ele.className += (ele.className ? " " : "") + className;};Spry.Widget.CollapsiblePanel.prototype.removeClassName = function(ele, className){ if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)) return; ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");};Spry.Widget.CollapsiblePanel.prototype.hasClassName = function(ele, className){ if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1) return false; return true;};Spry.Widget.CollapsiblePanel.prototype.setDisplay = function(ele, display){ if( ele ) ele.style.display = display;};Spry.Widget.CollapsiblePanel.setOptions = function(obj, optionsObj, ignoreUndefinedProps){ if (!optionsObj) return; for (var optionName in optionsObj) { if (ignoreUndefinedProps && optionsObj[optionName] == undefined) continue; obj[optionName] = optionsObj[optionName]; }};Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver = function(){ this.addClassName(this.getTab(), this.hoverClass);};Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(){ this.removeClassName(this.getTab(), this.hoverClass);};Spry.Widget.CollapsiblePanel.prototype.open = function(){ this.contentIsOpen = true; if (this.enableAnimation) { if (this.animator) this.animator.stop(); this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, true); this.animator.start(); } else this.setDisplay(this.getContent(), "block"); this.removeClassName(this.element, this.closedClass); this.addClassName(this.element, this.openClass);};Spry.Widget.CollapsiblePanel.prototype.close = function(){ this.contentIsOpen = false; if (this.enableAnimation) { if (this.animator) this.animator.stop(); this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, false); this.animator.start(); } else this.setDisplay(this.getContent(), "none"); this.removeClassName(this.element, this.openClass); this.addClassName(this.element, this.closedClass);};Spry.Widget.CollapsiblePanel.prototype.onTabClick = function(){ if (this.isOpen()) this.close(); else this.open(); this.focus();};Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e){ this.hasFocus = true; this.addClassName(this.element, this.focusedClass);};Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e){ this.hasFocus = false; this.removeClassName(this.element, this.focusedClass);};Spry.Widget.CollapsiblePanel.ENTER_KEY = 13;Spry.Widget.CollapsiblePanel.SPACE_KEY = 32;Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e){ var key = e.keyCode; if (!this.hasFocus || (key != Spry.Widget.CollapsiblePanel.ENTER_KEY && key != Spry.Widget.CollapsiblePanel.SPACE_KEY)) return true; if (this.isOpen()) this.close(); else this.open(); if (e.stopPropagation) e.stopPropagation(); if (e.preventDefault) e.preventDefault(); return false;};Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers = function(){ var tab = this.getTab(); if (!tab) return; var self = this; Spry.Widget.CollapsiblePanel.addEventListener(tab, "click", function(e) { return self.onTabClick(); }, false); Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(); }, false); Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(); }, false); if (this.enableKeyboardNavigation) { // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't // rely on adding the tabindex attribute if it is missing to enable keyboard navigation // by default. // Find the first element within the tab container that has a tabindex or the first // anchor tag. var tabIndexEle = null; var tabAnchorEle = null; this.preorderTraversal(tab, function(node) { if (node.nodeType == 1 /* NODE.ELEMENT_NODE */) { var tabIndexAttr = tab.attributes.getNamedItem("tabindex"); if (tabIndexAttr) { tabIndexEle = node; return true; } if (!tabAnchorEle && node.nodeName.toLowerCase() == "a") tabAnchorEle = node; } return false; }); if (tabIndexEle) this.focusElement = tabIndexEle; else if (tabAnchorEle) this.focusElement = tabAnchorEle; if (this.focusElement) { Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "focus", function(e) { return self.onFocus(e); }, false); Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "blur", function(e) { return self.onBlur(e); }, false); Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "keydown", function(e) { return self.onKeyDown(e); }, false); } }};Spry.Widget.CollapsiblePanel.addEventListener = function(element, eventType, handler, capture){ try { if (element.addEventListener) element.addEventListener(eventType, handler, capture); else if (element.attachEvent) element.attachEvent("on" + eventType, handler); } catch (e) {}};Spry.Widget.CollapsiblePanel.prototype.preorderTraversal = function(root, func){ var stopTraversal = false; if (root) { stopTraversal = func(root); if (root.hasChildNodes()) { var child = root.firstChild; while (!stopTraversal && child) { stopTraversal = this.preorderTraversal(child, func); try { child = child.nextSibling; } catch (e) { child = null; } } } } return stopTraversal;};Spry.Widget.CollapsiblePanel.prototype.attachBehaviors = function(){ var panel = this.element; var tab = this.getTab(); var content = this.getContent(); if (this.contentIsOpen || this.hasClassName(panel, this.openClass)) { this.removeClassName(panel, this.closedClass); this.setDisplay(content, "block"); this.contentIsOpen = true; } else { this.removeClassName(panel, this.openClass); this.addClassName(panel, this.closedClass); this.setDisplay(content, "none"); this.contentIsOpen = false; } this.attachPanelHandlers();};Spry.Widget.CollapsiblePanel.prototype.getTab = function(){ return this.getElementChildren(this.element)[0];};Spry.Widget.CollapsiblePanel.prototype.getContent = function(){ return this.getElementChildren(this.element)[1];};Spry.Widget.CollapsiblePanel.prototype.isOpen = function(){ return this.contentIsOpen;};Spry.Widget.CollapsiblePanel.prototype.getElementChildren = function(element){ var children = []; var child = element.firstChild; while (child) { if (child.nodeType == 1 /* Node.ELEMENT_NODE */) children.push(child); child = child.nextSibling; } return children;};Spry.Widget.CollapsiblePanel.prototype.focus = function(){ if (this.focusElement && this.focusElement.focus) this.focusElement.focus();};/////////////////////////////////////////////////////Spry.Widget.CollapsiblePanel.PanelAnimator = function(panel, doOpen, opts){ this.timer = null; this.interval = 0; this.stepCount = 0; this.fps = 0; this.steps = 10; this.duration = 500; this.onComplete = null; this.panel = panel; this.content = panel.getContent(); this.panelData = []; this.doOpen = doOpen; Spry.Widget.CollapsiblePanel.setOptions(this, opts); // If caller specified speed in terms of frames per second, // convert them into steps. if (this.fps > 0) { this.interval = Math.floor(1000 / this.fps); this.steps = parseInt((this.duration + (this.interval - 1)) / this.interval); } else if (this.steps > 0) this.interval = this.duration / this.steps; var c = this.content; var curHeight = c.offsetHeight ? c.offsetHeight : 0; if (doOpen && c.style.display == "none") this.fromHeight = 0; else this.fromHeight = curHeight; if (!doOpen) this.toHeight = 0; else { if (c.style.display == "none") { // The content area is not displayed so in order to calculate the extent // of the content inside it, we have to set its display to block. c.style.visibility = "hidden"; c.style.display = "block"; } // Unfortunately in Mozilla/Firefox, fetching the offsetHeight seems to cause // the browser to synchronously re-layout and re-display content on the page, // so we see a brief flash of content that is *after* the panel being positioned // where it should when the panel is fully expanded. To get around this, we // temporarily position the content area of the panel absolutely off-screen. // This has the effect of taking the content out-of-flow, so nothing shifts around. // var oldPos = c.style.position; // var oldLeft = c.style.left; // c.style.position = "absolute"; // c.style.left = "-2000em"; // Clear the height property so we can calculate // the full height of the content we are going to show. c.style.height = ""; this.toHeight = c.offsetHeight; // Now restore the position and offset to what it was! // c.style.position = oldPos; // c.style.left = oldLeft; } this.increment = (this.toHeight - this.fromHeight) / this.steps; this.overflow = c.style.overflow; c.style.height = this.fromHeight + "px"; c.style.visibility = "visible"; c.style.overflow = "hidden"; c.style.display = "block";};Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start = function(){ var self = this; this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);};Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop = function(){ if (this.timer) { clearTimeout(this.timer); // If we're killing the timer, restore the overflow // properties on the panels we were animating! if (this.stepCount < this.steps) this.content.style.overflow = this.overflow; } this.timer = null;};Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation = function(){ ++this.stepCount; this.animate(); if (this.stepCount < this.steps) this.start(); else if (this.onComplete) this.onComplete();};Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.animate = function(){ if (this.stepCount >= this.steps) { if (!this.doOpen) this.content.style.display = "none"; this.content.style.overflow = this.overflow; this.content.style.height = this.toHeight + "px"; } else { this.fromHeight += this.increment; this.content.style.height = this.fromHeight + "px"; }};
according.css
.CollapsiblePanel{ margin: 0px; padding: 0px; width: 300px;}.CollapsiblePanelTab{ font: bold 1em arial; color: #630; background: url(../images/col-close-back.gif) no-repeat; height: 30px; line-height: 30px; margin: 0px; padding: 2px 30px; cursor: pointer; -moz-user-select:none; -khtml-user-select:none;}/*展開時候變換的映像*/.CollapsiblePanelOpen .CollapsiblePanelTab{ background: url(../images/col-open-back.gif) no-repeat;}.CollapsiblePanelTabHover{ color: #fff; background: url(../images/col-close-hover.gif) no-repeat;}.CollapsiblePanelOpen .CollapsiblePanelTabHover{ color: #fff; background: url(../images/col-open-hover.gif) no-repeat;}
圖片資源
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
