| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | /* |
| A | 2 | * jQuery UI Accordion 1.7.1 |
| 3 | * | |
| 4 | * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) | |
| 5 | * Dual licensed under the MIT (MIT-LICENSE.txt) | |
| 6 | * and GPL (GPL-LICENSE.txt) licenses. | |
| 7 | * | |
| 8 | * http://docs.jquery.com/UI/Accordion | |
| 9 | * | |
| 10 | * Depends: | |
| 11 | * ui.core.js | |
| 12 | */ | |
| 13 | (function($) { | |
| 14 | ||
| 15 | $.widget("ui.accordion", { | |
| 16 | ||
| 17 | _init: function() { | |
| 18 | ||
| 19 | var o = this.options, self = this; | |
| 20 | this.running = 0; | |
| 21 | ||
| 22 | // if the user set the alwaysOpen option on init | |
| 23 | // then we need to set the collapsible option | |
| 24 | // if they set both on init, collapsible will take priority | |
| 25 | if (o.collapsible == $.ui.accordion.defaults.collapsible && | |
| 26 | o.alwaysOpen != $.ui.accordion.defaults.alwaysOpen) { | |
| 27 | o.collapsible = !o.alwaysOpen; | |
| 28 | } | |
| 29 | ||
| 30 | if ( o.navigation ) { | |
| 31 | var current = this.element.find("a").filter(o.navigationFilter); | |
| 32 | if ( current.length ) { | |
| 33 | if ( current.filter(o.header).length ) { | |
| 34 | this.active = current; | |
| 35 | } else { | |
| 36 | this.active = current.parent().parent().prev(); | |
| 37 | current.addClass("ui-accordion-content-active"); | |
| 38 | } | |
| 39 | } | |
| 40 | } | |
| 41 | ||
| 42 | this.element.addClass("ui-accordion ui-widget ui-helper-reset"); | |
| 43 | ||
| 44 | // in lack of child-selectors in CSS we need to mark top-LIs in a UL-accordion for some IE-fix | |
| 45 | if (this.element[0].nodeName == "UL") { | |
| 46 | this.element.children("li").addClass("ui-accordion-li-fix"); | |
| 47 | } | |
| 48 | ||
| 49 | this.headers = this.element.find(o.header).addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all") | |
| 50 | .bind("mouseenter.accordion", function(){ $(this).addClass('ui-state-hover'); }) | |
| 51 | .bind("mouseleave.accordion", function(){ $(this).removeClass('ui-state-hover'); }) | |
| 52 | .bind("focus.accordion", function(){ $(this).addClass('ui-state-focus'); }) | |
| 53 | .bind("blur.accordion", function(){ $(this).removeClass('ui-state-focus'); }); | |
| 54 | ||
| 55 | this.headers | |
| 56 | .next() | |
| 57 | .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"); | |
| 58 | ||
| 59 | this.active = this._findActive(this.active || o.active).toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top"); | |
| 60 | this.active.next().addClass('ui-accordion-content-active'); | |
| 61 | ||
| 62 | //Append icon elements | |
| 63 | $("<span/>").addClass("ui-icon " + o.icons.header).prependTo(this.headers); | |
| 64 | this.active.find(".ui-icon").toggleClass(o.icons.header).toggleClass(o.icons.headerSelected); | |
| 65 | ||
| 66 | // IE7-/Win - Extra vertical space in lists fixed | |
| 67 | if ($.browser.msie) { | |
| 68 | this.element.find('a').css('zoom', '1'); | |
| 69 | } | |
| 70 | ||
| 71 | this.resize(); | |
| 72 | ||
| 73 | //ARIA | |
| 74 | this.element.attr('role','tablist'); | |
| 75 | ||
| 76 | this.headers | |
| 77 | .attr('role','tab') | |
| 78 | .bind('keydown', function(event) { return self._keydown(event); }) | |
| 79 | .next() | |
| 80 | .attr('role','tabpanel'); | |
| 81 | ||
| 82 | this.headers | |
| 83 | .not(this.active || "") | |
| 84 | .attr('aria-expanded','false') | |
| 85 | .attr("tabIndex", "-1") | |
| 86 | .next() | |
| 87 | .hide(); | |
| 88 | ||
| 89 | // make sure at least one header is in the tab order | |
| 90 | if (!this.active.length) { | |
| 91 | this.headers.eq(0).attr('tabIndex','0'); | |
| 92 | } else { | |
| 93 | this.active | |
| 94 | .attr('aria-expanded','true') | |
| 95 | .attr('tabIndex', '0'); | |
| 96 | } | |
| 97 | ||
| 98 | // only need links in taborder for Safari | |
| 99 | if (!$.browser.safari) | |
| 100 | this.headers.find('a').attr('tabIndex','-1'); | |
| 101 | ||
| 102 | if (o.event) { | |
| 103 | this.headers.bind((o.event) + ".accordion", function(event) { return self._clickHandler.call(self, event, this); }); | |
| 104 | } | |
| 105 | ||
| 106 | }, | |
| 107 | ||
| 108 | destroy: function() { | |
| 109 | var o = this.options; | |
| 110 | ||
| 111 | this.element | |
| 112 | .removeClass("ui-accordion ui-widget ui-helper-reset") | |
| 113 | .removeAttr("role") | |
| 114 | .unbind('.accordion') | |
| 115 | .removeData('accordion'); | |
| 116 | ||
| 117 | this.headers | |
| 118 | .unbind(".accordion") | |
| 119 | .removeClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-corner-top") | |
| 120 | .removeAttr("role").removeAttr("aria-expanded").removeAttr("tabindex"); | |
| 121 | ||
| 122 | this.headers.find("a").removeAttr("tabindex"); | |
| 123 | this.headers.children(".ui-icon").remove(); | |
| 124 | var contents = this.headers.next().css("display", "").removeAttr("role").removeClass("ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active"); | |
| 125 | if (o.autoHeight || o.fillHeight) { | |
| 126 | contents.css("height", ""); | |
| 127 | } | |
| 128 | }, | |
| 129 | ||
| 130 | _setData: function(key, value) { | |
| 131 | if(key == 'alwaysOpen') { key = 'collapsible'; value = !value; } | |
| 132 | $.widget.prototype._setData.apply(this, arguments); | |
| 133 | }, | |
| 134 | ||
| 135 | _keydown: function(event) { | |
| 136 | ||
| 137 | var o = this.options, keyCode = $.ui.keyCode; | |
| 138 | ||
| 139 | if (o.disabled || event.altKey || event.ctrlKey) | |
| 140 | return; | |
| 141 | ||
| 142 | var length = this.headers.length; | |
| 143 | var currentIndex = this.headers.index(event.target); | |
| 144 | var toFocus = false; | |
| 145 | ||
| 146 | switch(event.keyCode) { | |
| 147 | case keyCode.RIGHT: | |
| 148 | case keyCode.DOWN: | |
| 149 | toFocus = this.headers[(currentIndex + 1) % length]; | |
| 150 | break; | |
| 151 | case keyCode.LEFT: | |
| 152 | case keyCode.UP: | |
| 153 | toFocus = this.headers[(currentIndex - 1 + length) % length]; | |
| 154 | break; | |
| 155 | case keyCode.SPACE: | |
| 156 | case keyCode.ENTER: | |
| 157 | return this._clickHandler({ target: event.target }, event.target); | |
| 158 | } | |
| 159 | ||
| 160 | if (toFocus) { | |
| 161 | $(event.target).attr('tabIndex','-1'); | |
| 162 | $(toFocus).attr('tabIndex','0'); | |
| 163 | toFocus.focus(); | |
| 164 | return false; | |
| 165 | } | |
| 166 | ||
| 167 | return true; | |
| 168 | ||
| 169 | }, | |
| 170 | ||
| 171 | resize: function() { | |
| 172 | ||
| 173 | var o = this.options, maxHeight; | |
| 174 | ||
| 175 | if (o.fillSpace) { | |
| 176 | ||
| 177 | if($.browser.msie) { var defOverflow = this.element.parent().css('overflow'); this.element.parent().css('overflow', 'hidden'); } | |
| 178 | maxHeight = this.element.parent().height(); | |
| 179 | if($.browser.msie) { this.element.parent().css('overflow', defOverflow); } | |
| 180 | ||
| 181 | this.headers.each(function() { | |
| 182 | maxHeight -= $(this).outerHeight(); | |
| 183 | }); | |
| 184 | ||
| 185 | var maxPadding = 0; | |
| 186 | this.headers.next().each(function() { | |
| 187 | maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height()); | |
| 188 | }).height(Math.max(0, maxHeight - maxPadding)) | |
| 189 | .css('overflow', 'auto'); | |
| 190 | ||
| 191 | } else if ( o.autoHeight ) { | |
| 192 | maxHeight = 0; | |
| 193 | this.headers.next().each(function() { | |
| 194 | maxHeight = Math.max(maxHeight, $(this).outerHeight()); | |
| 195 | }).height(maxHeight); | |
| 196 | } | |
| 197 | ||
| 198 | }, | |
| 199 | ||
| 200 | activate: function(index) { | |
| 201 | // call clickHandler with custom event | |
| 202 | var active = this._findActive(index)[0]; | |
| 203 | this._clickHandler({ target: active }, active); | |
| 204 | }, | |
| 205 | ||
| 206 | _findActive: function(selector) { | |
| 207 | return selector | |
| 208 | ? typeof selector == "number" | |
| 209 | ? this.headers.filter(":eq(" + selector + ")") | |
| 210 | : this.headers.not(this.headers.not(selector)) | |
| 211 | : selector === false | |
| 212 | ? $([]) | |
| 213 | : this.headers.filter(":eq(0)"); | |
| 214 | }, | |
| 215 | ||
| 216 | _clickHandler: function(event, target) { | |
| 217 | ||
| 218 | var o = this.options; | |
| 219 | if (o.disabled) return false; | |
| 220 | ||
| 221 | // called only when using activate(false) to close all parts programmatically | |
| 222 | if (!event.target && o.collapsible) { | |
| 223 | this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all") | |
| 224 | .find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header); | |
| 225 | this.active.next().addClass('ui-accordion-content-active'); | |
| 226 | var toHide = this.active.next(), | |
| 227 | data = { | |
| 228 | options: o, | |
| 229 | newHeader: $([]), | |
| 230 | oldHeader: o.active, | |
| 231 | newContent: $([]), | |
| 232 | oldContent: toHide | |
| 233 | }, | |
| 234 | toShow = (this.active = $([])); | |
| 235 | this._toggle(toShow, toHide, data); | |
| 236 | return false; | |
| 237 | } | |
| 238 | ||
| 239 | // get the click target | |
| 240 | var clicked = $(event.currentTarget || target); | |
| 241 | var clickedIsActive = clicked[0] == this.active[0]; | |
| 242 | ||
| 243 | // if animations are still active, or the active header is the target, ignore click | |
| 244 | if (this.running || (!o.collapsible && clickedIsActive)) { | |
| 245 | return false; | |
| 246 | } | |
| 247 | ||
| 248 | // switch classes | |
| 249 | this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all") | |
| 250 | .find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header); | |
| 251 | this.active.next().addClass('ui-accordion-content-active'); | |
| 252 | if (!clickedIsActive) { | |
| 253 | clicked.removeClass("ui-state-default ui-corner-all").addClass("ui-state-active ui-corner-top") | |
| 254 | .find(".ui-icon").removeClass(o.icons.header).addClass(o.icons.headerSelected); | |
| 255 | clicked.next().addClass('ui-accordion-content-active'); | |
| 256 | } | |
| 257 | ||
| 258 | // find elements to show and hide | |
| 259 | var toShow = clicked.next(), | |
| 260 | toHide = this.active.next(), | |
| 261 | data = { | |
| 262 | options: o, | |
| 263 | newHeader: clickedIsActive && o.collapsible ? $([]) : clicked, | |
| 264 | oldHeader: this.active, | |
| 265 | newContent: clickedIsActive && o.collapsible ? $([]) : toShow.find('> *'), | |
| 266 | oldContent: toHide.find('> *') | |
| 267 | }, | |
| 268 | down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] ); | |
| 269 | ||
| 270 | this.active = clickedIsActive ? $([]) : clicked; | |
| 271 | this._toggle(toShow, toHide, data, clickedIsActive, down); | |
| 272 | ||
| 273 | return false; | |
| 274 | ||
| 275 | }, | |
| 276 | ||
| 277 | _toggle: function(toShow, toHide, data, clickedIsActive, down) { | |
| 278 | ||
| 279 | var o = this.options, self = this; | |
| 280 | ||
| 281 | this.toShow = toShow; | |
| 282 | this.toHide = toHide; | |
| 283 | this.data = data; | |
| 284 | ||
| 285 | var complete = function() { if(!self) return; return self._completed.apply(self, arguments); }; | |
| 286 | ||
| 287 | // trigger changestart event | |
| 288 | this._trigger("changestart", null, this.data); | |
| 289 | ||
| 290 | // count elements to animate | |
| 291 | this.running = toHide.size() === 0 ? toShow.size() : toHide.size(); | |
| 292 | ||
| 293 | if (o.animated) { | |
| 294 | ||
| 295 | var animOptions = {}; | |
| 296 | ||
| 297 | if ( o.collapsible && clickedIsActive ) { | |
| 298 | animOptions = { | |
| 299 | toShow: $([]), | |
| 300 | toHide: toHide, | |
| 301 | complete: complete, | |
| 302 | down: down, | |
| 303 | autoHeight: o.autoHeight || o.fillSpace | |
| 304 | }; | |
| 305 | } else { | |
| 306 | animOptions = { | |
| 307 | toShow: toShow, | |
| 308 | toHide: toHide, | |
| 309 | complete: complete, | |
| 310 | down: down, | |
| 311 | autoHeight: o.autoHeight || o.fillSpace | |
| 312 | }; | |
| 313 | } | |
| 314 | ||
| 315 | if (!o.proxied) { | |
| 316 | o.proxied = o.animated; | |
| 317 | } | |
| 318 | ||
| 319 | if (!o.proxiedDuration) { | |
| 320 | o.proxiedDuration = o.duration; | |
| 321 | } | |
| 322 | ||
| 323 | o.animated = $.isFunction(o.proxied) ? | |
| 324 | o.proxied(animOptions) : o.proxied; | |
| 325 | ||
| 326 | o.duration = $.isFunction(o.proxiedDuration) ? | |
| 327 | o.proxiedDuration(animOptions) : o.proxiedDuration; | |
| 328 | ||
| 329 | var animations = $.ui.accordion.animations, | |
| 330 | duration = o.duration, | |
| 331 | easing = o.animated; | |
| 332 | ||
| 333 | if (!animations[easing]) { | |
| 334 | animations[easing] = function(options) { | |
| 335 | this.slide(options, { | |
| 336 | easing: easing, | |
| 337 | duration: duration || 700 | |
| 338 | }); | |
| 339 | }; | |
| 340 | } | |
| 341 | ||
| 342 | animations[easing](animOptions); | |
| 343 | ||
| 344 | } else { | |
| 345 | ||
| 346 | if (o.collapsible && clickedIsActive) { | |
| 347 | toShow.toggle(); | |
| 348 | } else { | |
| 349 | toHide.hide(); | |
| 350 | toShow.show(); | |
| 351 | } | |
| 352 | ||
| 353 | complete(true); | |
| 354 | ||
| 355 | } | |
| 356 | ||
| 357 | toHide.prev().attr('aria-expanded','false').attr("tabIndex", "-1").blur(); | |
| 358 | toShow.prev().attr('aria-expanded','true').attr("tabIndex", "0").focus(); | |
| 359 | ||
| 360 | }, | |
| 361 | ||
| 362 | _completed: function(cancel) { | |
| 363 | ||
| 364 | var o = this.options; | |
| 365 | ||
| 366 | this.running = cancel ? 0 : --this.running; | |
| 367 | if (this.running) return; | |
| 368 | ||
| 369 | if (o.clearStyle) { | |
| 370 | this.toShow.add(this.toHide).css({ | |
| 371 | height: "", | |
| 372 | overflow: "" | |
| 373 | }); | |
| 374 | } | |
| 375 | ||
| 376 | this._trigger('change', null, this.data); | |
| 377 | } | |
| 378 | ||
| 379 | }); | |
| 380 | ||
| 381 | ||
| 382 | $.extend($.ui.accordion, { | |
| 383 | version: "1.7.1", | |
| 384 | defaults: { | |
| 385 | active: null, | |
| 386 | alwaysOpen: true, //deprecated, use collapsible | |
| 387 | animated: 'slide', | |
| 388 | autoHeight: true, | |
| 389 | clearStyle: false, | |
| 390 | collapsible: false, | |
| 391 | event: "click", | |
| 392 | fillSpace: false, | |
| 393 | header: "> li > :first-child,> :not(li):even", | |
| 394 | icons: { | |
| 395 | header: "ui-icon-triangle-1-e", | |
| 396 | headerSelected: "ui-icon-triangle-1-s" | |
| 397 | }, | |
| 398 | navigation: false, | |
| 399 | navigationFilter: function() { | |
| 400 | return this.href.toLowerCase() == location.href.toLowerCase(); | |
| 401 | } | |
| 402 | }, | |
| 403 | animations: { | |
| 404 | slide: function(options, additions) { | |
| 405 | options = $.extend({ | |
| 406 | easing: "swing", | |
| 407 | duration: 300 | |
| 408 | }, options, additions); | |
| 409 | if ( !options.toHide.size() ) { | |
| 410 | options.toShow.animate({height: "show"}, options); | |
| 411 | return; | |
| 412 | } | |
| 413 | if ( !options.toShow.size() ) { | |
| 414 | options.toHide.animate({height: "hide"}, options); | |
| 415 | return; | |
| 416 | } | |
| 417 | var overflow = options.toShow.css('overflow'), | |
| 418 | percentDone, | |
| 419 | showProps = {}, | |
| 420 | hideProps = {}, | |
| 421 | fxAttrs = [ "height", "paddingTop", "paddingBottom" ], | |
| 422 | originalWidth; | |
| 423 | // fix width before calculating height of hidden element | |
| 424 | var s = options.toShow; | |
| 425 | originalWidth = s[0].style.width; | |
| 426 | s.width( parseInt(s.parent().width(),10) - parseInt(s.css("paddingLeft"),10) - parseInt(s.css("paddingRight"),10) - (parseInt(s.css("borderLeftWidth"),10) || 0) - (parseInt(s.css("borderRightWidth"),10) || 0) ); | |
| 427 | ||
| 428 | $.each(fxAttrs, function(i, prop) { | |
| 429 | hideProps[prop] = 'hide'; | |
| 430 | ||
| 431 | var parts = ('' + $.css(options.toShow[0], prop)).match(/^([\d+-.]+)(.*)$/); | |
| 432 | showProps[prop] = { | |
| 433 | value: parts[1], | |
| 434 | unit: parts[2] || 'px' | |
| 435 | }; | |
| 436 | }); | |
| 437 | options.toShow.css({ height: 0, overflow: 'hidden' }).show(); | |
| 438 | options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate(hideProps,{ | |
| 439 | step: function(now, settings) { | |
| 440 | // only calculate the percent when animating height | |
| 441 | // IE gets very inconsistent results when animating elements | |
| 442 | // with small values, which is common for padding | |
| 443 | if (settings.prop == 'height') { | |
| 444 | percentDone = (settings.now - settings.start) / (settings.end - settings.start); | |
| 445 | } | |
| 446 | ||
| 447 | options.toShow[0].style[settings.prop] = | |
| 448 | (percentDone * showProps[settings.prop].value) + showProps[settings.prop].unit; | |
| 449 | }, | |
| 450 | duration: options.duration, | |
| 451 | easing: options.easing, | |
| 452 | complete: function() { | |
| 453 | if ( !options.autoHeight ) { | |
| 454 | options.toShow.css("height", ""); | |
| 455 | } | |
| 456 | options.toShow.css("width", originalWidth); | |
| 457 | options.toShow.css({overflow: overflow}); | |
| 458 | options.complete(); | |
| 459 | } | |
| 460 | }); | |
| 461 | }, | |
| 462 | bounceslide: function(options) { | |
| 463 | this.slide(options, { | |
| 464 | easing: options.down ? "easeOutBounce" : "swing", | |
| 465 | duration: options.down ? 1000 : 200 | |
| 466 | }); | |
| 467 | }, | |
| 468 | easeslide: function(options) { | |
| 469 | this.slide(options, { | |
| 470 | easing: "easeinout", | |
| 471 | duration: 700 | |
| 472 | }); | |
| 473 | } | |
| 474 | } | |
| 475 | }); | |
| 476 | ||
| 477 | })(jQuery); | |
