]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 50d8199)
added: option to wrap all added elements which allows us to use different jQuery...
authorFelix Nagel <info@felixnagel.com>
Wed, 1 Dec 2010 22:42:28 +0000 (23:42 +0100)
committerFelix Nagel <info@felixnagel.com>
Wed, 1 Dec 2010 22:42:28 +0000 (23:42 +0100)
added: nicer themeswitcher test implementation

demos/selectmenu/default.html patch | blob | history
ui/jquery.ui.selectmenu.js patch | blob | history

diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html
index 28ec1c3bdddeab041924be348520e9fcb4946bb4..44ec33445c95e63ef53ed0c508f274f9f126b2a8 100644 (file)
--- 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 d984e18655a17be9f0b76dc6e289adbe29a4e7ab..d3633cd904262e4e5f08343c60905e21da5c4b5d 100644 (file)
--- 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'); } 
The official jQuery user interface library: https://github.com/jquery/jquery-ui