简单折叠面板的制作(来源于CSS技术彻底研究)
来源:互联网 发布:qq飞车青锋剃刀数据 编辑:程序博客网 时间:2024/05/20 15:58
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;}图片资源
- 简单折叠面板的制作(来源于CSS技术彻底研究)
- 简单伸缩面板制作(来源于CSS彻底设计与研究)
- css实现折叠面板
- jQuery实现的简单折叠菜单(折叠面板)效果代码
- 简单tab面板的制作
- 折叠面板,类似于二级目录的效果,纯css编写
- 面板的折叠(Bootstrap)
- 折叠面板的思想
- 简单的折叠侧边栏的制作
- CSS设计彻底研究
- CSS设计彻底研究
- 面板折叠
- 折叠面板
- DIV+CSS技术的研究
- css+javascript制作下拉面板
- html+css制作任意大小边框一致的面板
- 折叠面板的改进【Amaze UI】
- EasyUI的accordion(手风琴)折叠面板
- poj3450 Corporate Identity
- mysql
- ruby开启
- NetBeans学习笔记2
- c/c++中出现“undefined reference to”的解决
- 简单折叠面板的制作(来源于CSS技术彻底研究)
- jar命令 创建和解压jar文件包
- 如何在Windows下发布QT应用程序?
- 让linux用户隶属于多个组
- Erlang vs Go
- 泰坦尼克号——完美主义的杰作
- 手游项目A之BUG-构造函数
- C语言-数组指针判断回文数
- Android Sqlite数据库执行插入查询更新删除的操作对比