diff options
| author | Felix Nagel <info@felixnagel.com> | 2010-12-01 23:42:28 +0100 |
|---|---|---|
| committer | Felix Nagel <info@felixnagel.com> | 2010-12-01 23:42:28 +0100 |
| commit | df0a874bf0ac6bf6ff5ff365e4b4ef95c6ec39a0 (patch) | |
| tree | cd6d129062f42f531b6e73491e6fe166adc18290 | |
| parent | 50d8199eeefd3645d5332314e7c95620122ad79e (diff) | |
| download | jquery-ui-df0a874bf0ac6bf6ff5ff365e4b4ef95c6ec39a0.tar.gz jquery-ui-df0a874bf0ac6bf6ff5ff365e4b4ef95c6ec39a0.zip | |
added: option to wrap all added elements which allows us to use different jQuery UI themes, see https://github.com/fnagel/jquery-ui/issues/closed#issue/31
added: nicer themeswitcher test implementation
| -rw-r--r-- | demos/selectmenu/default.html | 26 | ||||
| -rw-r--r-- | ui/jquery.ui.selectmenu.js | 20 |
2 files changed, 32 insertions, 14 deletions
diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index 28ec1c3bd..44ec33445 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -19,6 +19,9 @@ fieldset { border:0; } label,select,.ui-select-menu { float: left; margin-right: 10px; } select { width: 200px; } + .wrap span.ui-selectmenu-item-header, + .wrap ul.ui-selectmenu-menu li a + { color: black !important; } </style> <script type="text/javascript"> $(function(){ @@ -26,7 +29,8 @@ $('select#speedAa').selectmenu({ style:'popup', - maxHeight: 150 + maxHeight: 150, + wrapperElement: "<div class='wrap' />" }); $('select#speedB').selectmenu({ @@ -69,11 +73,19 @@ } return newText; } - </script> - <!-- - <script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script> - <script type="text/javascript"> $(function(){ $('<div style="position: absolute; top: 20px; right: 10px;" />').appendTo('body').themeswitcher(); }); </script> - --> + + // add themeswitcher + $(function(){ + var ts = $('<div class="ui-button ui-widget ui-state-default ui-corner-all" style="padding: 5px; position: absolute; top: 20px; right: 10px;">Click here to add Themeswitcher!</div>') + .appendTo('body') + .bind("click", function() { + ts.text("Loading Themeswitcher..."); + $.getScript('http://ui.jquery.com/applications/themeroller/themeswitchertool/', function() { + ts.removeClass("ui-button ui-widget ui-state-default ui-corner-all").text("").unbind("click").themeswitcher(); + }); + }); + }); + </script> </head> <body> <br /> @@ -90,7 +102,7 @@ <option value="Faster">Faster</option> </select> </fieldset> - <h2>"default popup" Style with maxHeight set </h2> + <h2>"default popup" Style with maxHeight set and custom wrapper</h2> <fieldset> <label for="speedAa">Select a Speed:</label> <select name="speedAa" id="speedAa"> diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index d984e1865..d3633cd90 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -24,11 +24,12 @@ $.widget("ui.selectmenu", { }, width: null, menuWidth: null, - handleWidth: 26, + handleWidth: 26, maxHeight: null, icons: null, format: null, - bgImage: function() {} + bgImage: function() {}, + wrapperElement: "" }, _create: function() { @@ -46,7 +47,8 @@ $.widget("ui.selectmenu", { //create menu button wrapper this.newelement = $('<a class="'+ this.widgetBaseClass +' ui-widget ui-state-default ui-corner-all" id="'+this.ids[0]+'" role="button" href="#" tabindex="0" aria-haspopup="true" aria-owns="'+this.ids[1]+'"></a>') .insertAfter(this.element); - + // + this.newelement.wrap(o.wrapperElement); //transfer tabindex var tabindex = this.element.attr('tabindex'); if(tabindex){ this.newelement.attr('tabindex', tabindex); } @@ -133,6 +135,7 @@ $.widget("ui.selectmenu", { //create menu portion, append to body var cornerClass = (o.style == "dropdown")? " ui-corner-bottom" : " ui-corner-all"; this.list = $('<ul class="' + self.widgetBaseClass + '-menu ui-widget ui-widget-content'+cornerClass+'" aria-hidden="true" role="listbox" aria-labelledby="'+this.ids[0]+'" id="'+this.ids[1]+'"></ul>').appendTo('body'); + this.list.wrap(o.wrapperElement); //serialize selectmenu element options var selectOptionData = []; @@ -350,6 +353,7 @@ $.widget("ui.selectmenu", { .attr('for',this.element.attr('id')) .unbind('click'); this.newelement.remove(); + // FIXME option.wrapper needs this.list.remove(); this.element.show(); @@ -397,10 +401,12 @@ $.widget("ui.selectmenu", { this._closeOthers(event); this.newelement .addClass('ui-state-active'); - - this.list - .appendTo('body') - .addClass(self.widgetBaseClass + '-open') + if (self.options.wrapperElement) { + this.list.parent().appendTo('body'); + } else { + this.list.appendTo('body'); + } + this.list.addClass(self.widgetBaseClass + '-open') .attr('aria-hidden', false) .find('li:not(.'+ self.widgetBaseClass +'-group):eq('+ this._selectedIndex() +') a')[0].focus(); if(this.options.style == "dropdown"){ this.newelement.removeClass('ui-corner-all').addClass('ui-corner-top'); } |