Browse files

Selectmenu: added popup style extension

  • Loading branch information...
1 parent 5c1eb95 commit 9d7890531e6d6c90f0ed7027882fa8c7f4d29f26 @fnagel committed Dec 20, 2012
Showing with 178 additions and 0 deletions.
  1. +104 −0 selectmenu/default.html
  2. +74 −0 selectmenu/jquery.ui.selectmenu.popupStyle.js
View
104 selectmenu/default.html
@@ -0,0 +1,104 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu - Default functionality</title>
+ <link rel="stylesheet" href="../jqueryui/themes/base/jquery.ui.all.css">
+ <script src="../jqueryui/jquery-1.8.3.js"></script>
+ <script src="../jqueryui/ui/jquery.ui.core.js"></script>
+ <script src="../jqueryui/ui/jquery.ui.widget.js"></script>
+ <script src="../jqueryui/ui/jquery.ui.position.js"></script>
+ <script src="../jqueryui/ui/jquery.ui.menu.js"></script>
+ <script src="../jqueryui/ui/jquery.ui.selectmenu.js"></script>
+ <script src="jquery.ui.selectmenu.popupStyle.js"></script>
+ <link rel="stylesheet" href="../jqueryui/demos/demos.css">
+ <script>
+ $(function() {
+ $('#speed').selectmenu({
+ popup: true
+ });
+
+ $('#files').selectmenu({
+ popup: true
+ });
+
+ var withOverflow = $('#number').selectmenu({
+ popup: true
+ });
+ withOverflow.selectmenu("menuWidget").addClass("overflow");
+ });
+ </script>
+ <style>
+ form { margin: 50px 0 0 0 }
+ fieldset { border: 0; }
+ label { display: block; }
+ select { width: 200px; }
+ .overflow { height: 200px; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+<form action="#">
+ <fieldset>
+ <label for="speed">Select a speed</label>
+ <select name="speed" id="speed">
+ <option value="Slower">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium" selected="selected">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
+ </select>
+ <br />
+ <br />
+ <br />
+ <label for="files">Select a file</label>
+ <select name="files" id="files">
+ <optgroup label="Scripts">
+ <option value="jquery">jQuery.js</option>
+ <option value="jqueryui">ui.jQuery.js</option>
+ </optgroup>
+ <optgroup label="Other files">
+ <option value="somefile">Some unknown file</option>
+ <option value="someotherfile">Some other file</option>
+ </optgroup>
+ </select>
+ <br />
+ <br />
+ <br />
+ <label for="number">Select a number</label>
+ <select name="number" id="number">
+ <option value="1">1</option>
+ <option value="2" selected="selected">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value="5">5</option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ <option value="8">8</option>
+ <option value="9">9</option>
+ <option value="10">10</option>
+ <option value="11">11</option>
+ <option value="12">12</option>
+ <option value="13">13</option>
+ <option value="14">14</option>
+ <option value="15">15</option>
+ <option value="16">16</option>
+ <option value="17">17</option>
+ <option value="18">18</option>
+ <option value="19">19</option>
+ </select>
+ </fieldset>
+</form>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+<p>This extension enables jQuery UI Selectmenu widget to use popup style.</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
View
74 selectmenu/jquery.ui.selectmenu.popupStyle.js
@@ -0,0 +1,74 @@
+/*
+ * jQuery UI Selectmenu Popup Style Extension
+ *
+ * Copyright 2012, Felix Nagel (http://www.felixnagel.com)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * http://github.com/fnagel/jquery-ui-extensions
+ */
+(function( $ ) {
+
+$.widget( "ui.selectmenu", $.ui.selectmenu, {
+ // add option
+ options: {
+ popup: false
+ },
+
+ _drawButton: function() {
+ this._super();
+
+ if ( this.options.popup ) {
+ this._setOption( "icons", { button: "ui-icon-triangle-2-n-s" } );
+ }
+ },
+
+ _drawMenu: function() {
+ this._super();
+
+ if ( this.options.popup ) {
+ this.menu.addClass( "ui-corner-all" ).removeClass( "ui-corner-bottom" );
+ this.menuWrap.css( "width", this.buttonText.width() + parseFloat( this.buttonText.css( "padding-left" ) ) || 0 + parseFloat( this.buttonText.css( "margin-left") ) || 0 );
+ }
+ },
+
+ open: function( event ) {
+ if ( this.options.disabled ) {
+ return;
+ }
+
+ if ( this.options.popup && this.items ) {
+ var currentItem;
+
+ this.isOpen = true;
+ this._toggleAttr();
+
+ currentItem = this._getSelectedItem();
+ // center current item
+ if ( this.menu.outerHeight() < this.menu.prop( "scrollHeight" ) ) {
+ this.menuWrap.css( "left" , -10000 );
+ this.menu.scrollTop( this.menu.scrollTop() + currentItem.position().top - this.menu.outerHeight() / 2 + currentItem.outerHeight() / 2 );
+ this.menuWrap.css( "left" , "auto" );
+ }
+
+ this.menuWrap.position( $.extend( {}, this.options.position, {
+ of: this.button,
+ my: "left top" + ( this.menu.offset().top - currentItem.offset().top + ( this.button.outerHeight() - currentItem.outerHeight() ) / 2 ),
+ at: "left top"
+ } ) );
+
+ this._trigger( "open", event );
+ } else {
+ this._super();
+ }
+ },
+
+ _toggleAttr: function(){
+ this._super();
+
+ if ( this.options.popup && this.isOpen ) {
+ this.button.toggleClass( "ui-corner-top", !this.isOpen ).toggleClass( "ui-corner-all", this.isOpen );
+ }
+ }
+});
+
+}( jQuery ));

0 comments on commit 9d78905

Please sign in to comment.