MODUL: product options selection.html mit jQuery

Attribute passend zum Accordion/Tab Style.

von h-h-h (09.2010)
(Forum Ref.: MODUL: product_options_selection.html mit jQuery)

1. Neue product_options_selection.html herunterladen, die alte umbennen. (xtc5\module\product_options)

2. Javascript-Datei jquery-ui.js im javascript Ordner des Templates wie folgt erweitern:

/*
 * jQuery UI Button 1.8.5
 *
 * Copyright 2010, AUTHORS.txt (<a target="_blank" href="http://jqueryui.com/about" rel="nofollow">http://jqueryui.com/about</a>)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * <a target="_blank" href="http://jquery.org/license" rel="nofollow">http://jquery.org/license</a>
 *
 * <a target="_blank" href="http://docs.jquery.com/UI/Button" rel="nofollow">http://docs.jquery.com/UI/Button</a>
 *
 * Depends:
 *  jquery.ui.core.js
 *  jquery.ui.widget.js
 */
(function($,undefined){var lastActive,baseClasses="ui-button ui-widget ui-state-default ui-corner-all",stateClasses="ui-state-hover ui-state-active ",typeClasses="ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only",formResetHandler=function(event){$(":ui-button",event.target.form).each(function(){var inst=$(this).data("button");setTimeout(function(){inst.refresh();},1);});},radioGroup=function(radio){var name=radio.name,form=radio.form,radios=$([]);if(name){if(form){radios=$(form).find("[name='"+name+"']");}else{radios=$("[name='"+name+"']",radio.ownerDocument).filter(function(){return!this.form;});}}return radios;};$.widget("ui.button",{options:{disabled:null,text:true,label:null,icons:{primary:null,secondary:null}},_create:function(){this.element.closest("form").unbind("reset.button").bind("reset.button",formResetHandler);if(typeof this.options.disabled!=="boolean"){this.options.disabled=this.element.attr("disabled");}this._determineButtonType();this.hasTitle=!!this.buttonElement.attr("title");var self=this,options=this.options,toggleButton=this.type==="checkbox"||this.type==="radio",hoverClass="ui-state-hover"+(!toggleButton?" ui-state-active":""),focusClass="ui-state-focus";if(options.label===null){options.label=this.buttonElement.html();}if(this.element.is(":disabled")){options.disabled=true;}this.buttonElement.addClass(baseClasses).attr("role","button").bind("mouseenter.button",function(){if(options.disabled){return;}$(this).addClass("ui-state-hover");if(this===lastActive){$(this).addClass("ui-state-active");}}).bind("mouseleave.button",function(){if(options.disabled){return;}$(this).removeClass(hoverClass);}).bind("focus.button",function(){$(this).addClass(focusClass);}).bind("blur.button",function(){$(this).removeClass(focusClass);});if(toggleButton){this.element.bind("change.button",function(){self.refresh();});}if(this.type==="checkbox"){this.buttonElement.bind("click.button",function(){if(options.disabled){return false;}$(this).toggleClass("ui-state-active");self.buttonElement.attr("aria-pressed",self.element[0].checked);});}else if(this.type==="radio"){this.buttonElement.bind("click.button",function(){if(options.disabled){return false;}$(this).addClass("ui-state-active");self.buttonElement.attr("aria-pressed",true);var radio=self.element[0];radioGroup(radio).not(radio).map(function(){return $(this).button("widget")[0];}).removeClass("ui-state-active").attr("aria-pressed",false);});}else{this.buttonElement.bind("mousedown.button",function(){if(options.disabled){return false;}$(this).addClass("ui-state-active");lastActive=this;$(document).one("mouseup",function(){lastActive=null;});}).bind("mouseup.button",function(){if(options.disabled){return false;}$(this).removeClass("ui-state-active");}).bind("keydown.button",function(event){if(options.disabled){return false;}if(event.keyCode==$.ui.keyCode.SPACE||event.keyCode==$.ui.keyCode.ENTER){$(this).addClass("ui-state-active");}}).bind("keyup.button",function(){$(this).removeClass("ui-state-active");});if(this.buttonElement.is("a")){this.buttonElement.keyup(function(event){if(event.keyCode===$.ui.keyCode.SPACE){$(this).click();}});}}this._setOption("disabled",options.disabled);},_determineButtonType:function(){if(this.element.is(":checkbox")){this.type="checkbox";}else{if(this.element.is(":radio")){this.type="radio";}else{if(this.element.is("input")){this.type="input";}else{this.type="button";}}}if(this.type==="checkbox"||this.type==="radio"){this.buttonElement=this.element.parents().last().find("label[for="+this.element.attr("id")+"]");this.element.addClass("ui-helper-hidden-accessible");var checked=this.element.is(":checked");if(checked){this.buttonElement.addClass("ui-state-active");}this.buttonElement.attr("aria-pressed",checked);}else{this.buttonElement=this.element;}},widget:function(){return this.buttonElement;},destroy:function(){this.element.removeClass("ui-helper-hidden-accessible");this.buttonElement.removeClass(baseClasses+" "+stateClasses+" "+typeClasses).removeAttr("role").removeAttr("aria-pressed").html(this.buttonElement.find(".ui-button-text").html());if(!this.hasTitle){this.buttonElement.removeAttr("title");}$.Widget.prototype.destroy.call(this);},_setOption:function(key,value){$.Widget.prototype._setOption.apply(this,arguments);if(key==="disabled"){if(value){this.element.attr("disabled",true);}else{this.element.removeAttr("disabled");}}this._resetButton();},refresh:function(){var isDisabled=this.element.is(":disabled");if(isDisabled!==this.options.disabled){this._setOption("disabled",isDisabled);}if(this.type==="radio"){radioGroup(this.element[0]).each(function(){if($(this).is(":checked")){$(this).button("widget").addClass("ui-state-active").attr("aria-pressed",true);}else{$(this).button("widget").removeClass("ui-state-active").attr("aria-pressed",false);}});}else if(this.type==="checkbox"){if(this.element.is(":checked")){this.buttonElement.addClass("ui-state-active").attr("aria-pressed",true);}else{this.buttonElement.removeClass("ui-state-active").attr("aria-pressed",false);}}},_resetButton:function(){if(this.type==="input"){if(this.options.label){this.element.val(this.options.label);}return;}var buttonElement=this.buttonElement.removeClass(typeClasses),buttonText=$("<span></span>").addClass("ui-button-text").html(this.options.label).appendTo(buttonElement.empty()).text(),icons=this.options.icons,multipleIcons=icons.primary&&icons.secondary;if(icons.primary||icons.secondary){buttonElement.addClass("ui-button-text-icon"+(multipleIcons?"s":(icons.primary?"-primary":"-secondary")));if(icons.primary){buttonElement.prepend("<span class='ui-button-icon-primary ui-icon "+icons.primary+"'></span>");}if(icons.secondary){buttonElement.append("<span class='ui-button-icon-secondary ui-icon "+icons.secondary+"'></span>");}if(!this.options.text){buttonElement.addClass(multipleIcons?"ui-button-icons-only":"ui-button-icon-only").removeClass("ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary");if(!this.hasTitle){buttonElement.attr("title",buttonText);}}}else{buttonElement.addClass("ui-button-text-only");}}});$.widget("ui.buttonset",{_create:function(){this.element.addClass("ui-buttonset");this._init();},_init:function(){this.refresh();},_setOption:function(key,value){if(key==="disabled"){this.buttons.button("option",key,value);}$.Widget.prototype._setOption.apply(this,arguments);},refresh:function(){this.buttons=this.element.find(":button, :submit, :reset, :checkbox, :radio, a, :data(button)").filter(":ui-button").button("refresh").end().not(":ui-button").button().end().map(function(){return $(this).button("widget")[0];}).removeClass("ui-corner-all ui-corner-left ui-corner-right").filter(":visible").filter(":first").addClass("ui-corner-left").end().filter(":last").addClass("ui-corner-right").end().end().end();},destroy:function(){this.element.removeClass("ui-buttonset");this.buttons.map(function(){return $(this).button("widget")[0];}).removeClass("ui-corner-left ui-corner-right").end().button("destroy");$.Widget.prototype.destroy.call(this);}});}(jQuery));
 
/*    jQuery RadioButton                 */
    $(function() {
        $( ".radio" ).buttonset();
    });

3. CSS-Datei jquery-ui.css im css Ordner des Templates wie folgt erweitern:

/* jQuery UI Button
----------------------------------*/
.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
.ui-button-icons-only { width: 3.4em; }
button.ui-button-icons-only { width: 3.7em; }
/*button text element */
.ui-button .ui-button-text { display: block; line-height: 1.4;  }
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
/* no icon support for input elements, provide padding by default */
input.ui-button { padding: .4em 1em; }
/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
/*button sets*/
.ui-buttonset { margin-right: 7px; }
.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }

Anlage: Download Modul