Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Selectmenu: added popup style extension

  • Loading branch information...
commit 9d7890531e6d6c90f0ed7027882fa8c7f4d29f26 1 parent 5c1eb95
Felix Nagel authored
104 selectmenu/default.html
... ... @@ -0,0 +1,104 @@
  1 +<!doctype html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="utf-8">
  5 + <title>jQuery UI Selectmenu - Default functionality</title>
  6 + <link rel="stylesheet" href="../jqueryui/themes/base/jquery.ui.all.css">
  7 + <script src="../jqueryui/jquery-1.8.3.js"></script>
  8 + <script src="../jqueryui/ui/jquery.ui.core.js"></script>
  9 + <script src="../jqueryui/ui/jquery.ui.widget.js"></script>
  10 + <script src="../jqueryui/ui/jquery.ui.position.js"></script>
  11 + <script src="../jqueryui/ui/jquery.ui.menu.js"></script>
  12 + <script src="../jqueryui/ui/jquery.ui.selectmenu.js"></script>
  13 + <script src="jquery.ui.selectmenu.popupStyle.js"></script>
  14 + <link rel="stylesheet" href="../jqueryui/demos/demos.css">
  15 + <script>
  16 + $(function() {
  17 + $('#speed').selectmenu({
  18 + popup: true
  19 + });
  20 +
  21 + $('#files').selectmenu({
  22 + popup: true
  23 + });
  24 +
  25 + var withOverflow = $('#number').selectmenu({
  26 + popup: true
  27 + });
  28 + withOverflow.selectmenu("menuWidget").addClass("overflow");
  29 + });
  30 + </script>
  31 + <style>
  32 + form { margin: 50px 0 0 0 }
  33 + fieldset { border: 0; }
  34 + label { display: block; }
  35 + select { width: 200px; }
  36 + .overflow { height: 200px; }
  37 + </style>
  38 +</head>
  39 +<body>
  40 +
  41 +<div class="demo">
  42 +
  43 +<form action="#">
  44 + <fieldset>
  45 + <label for="speed">Select a speed</label>
  46 + <select name="speed" id="speed">
  47 + <option value="Slower">Slower</option>
  48 + <option value="Slow">Slow</option>
  49 + <option value="Medium" selected="selected">Medium</option>
  50 + <option value="Fast">Fast</option>
  51 + <option value="Faster">Faster</option>
  52 + </select>
  53 + <br />
  54 + <br />
  55 + <br />
  56 + <label for="files">Select a file</label>
  57 + <select name="files" id="files">
  58 + <optgroup label="Scripts">
  59 + <option value="jquery">jQuery.js</option>
  60 + <option value="jqueryui">ui.jQuery.js</option>
  61 + </optgroup>
  62 + <optgroup label="Other files">
  63 + <option value="somefile">Some unknown file</option>
  64 + <option value="someotherfile">Some other file</option>
  65 + </optgroup>
  66 + </select>
  67 + <br />
  68 + <br />
  69 + <br />
  70 + <label for="number">Select a number</label>
  71 + <select name="number" id="number">
  72 + <option value="1">1</option>
  73 + <option value="2" selected="selected">2</option>
  74 + <option value="3">3</option>
  75 + <option value="4">4</option>
  76 + <option value="5">5</option>
  77 + <option value="6">6</option>
  78 + <option value="7">7</option>
  79 + <option value="8">8</option>
  80 + <option value="9">9</option>
  81 + <option value="10">10</option>
  82 + <option value="11">11</option>
  83 + <option value="12">12</option>
  84 + <option value="13">13</option>
  85 + <option value="14">14</option>
  86 + <option value="15">15</option>
  87 + <option value="16">16</option>
  88 + <option value="17">17</option>
  89 + <option value="18">18</option>
  90 + <option value="19">19</option>
  91 + </select>
  92 + </fieldset>
  93 +</form>
  94 +
  95 +</div><!-- End demo -->
  96 +
  97 +
  98 +
  99 +<div class="demo-description">
  100 +<p>This extension enables jQuery UI Selectmenu widget to use popup style.</p>
  101 +</div><!-- End demo-description -->
  102 +
  103 +</body>
  104 +</html>
74 selectmenu/jquery.ui.selectmenu.popupStyle.js
... ... @@ -0,0 +1,74 @@
  1 +/*
  2 + * jQuery UI Selectmenu Popup Style Extension
  3 + *
  4 + * Copyright 2012, Felix Nagel (http://www.felixnagel.com)
  5 + * Dual licensed under the MIT or GPL Version 2 licenses.
  6 + *
  7 + * http://github.com/fnagel/jquery-ui-extensions
  8 + */
  9 +(function( $ ) {
  10 +
  11 +$.widget( "ui.selectmenu", $.ui.selectmenu, {
  12 + // add option
  13 + options: {
  14 + popup: false
  15 + },
  16 +
  17 + _drawButton: function() {
  18 + this._super();
  19 +
  20 + if ( this.options.popup ) {
  21 + this._setOption( "icons", { button: "ui-icon-triangle-2-n-s" } );
  22 + }
  23 + },
  24 +
  25 + _drawMenu: function() {
  26 + this._super();
  27 +
  28 + if ( this.options.popup ) {
  29 + this.menu.addClass( "ui-corner-all" ).removeClass( "ui-corner-bottom" );
  30 + this.menuWrap.css( "width", this.buttonText.width() + parseFloat( this.buttonText.css( "padding-left" ) ) || 0 + parseFloat( this.buttonText.css( "margin-left") ) || 0 );
  31 + }
  32 + },
  33 +
  34 + open: function( event ) {
  35 + if ( this.options.disabled ) {
  36 + return;
  37 + }
  38 +
  39 + if ( this.options.popup && this.items ) {
  40 + var currentItem;
  41 +
  42 + this.isOpen = true;
  43 + this._toggleAttr();
  44 +
  45 + currentItem = this._getSelectedItem();
  46 + // center current item
  47 + if ( this.menu.outerHeight() < this.menu.prop( "scrollHeight" ) ) {
  48 + this.menuWrap.css( "left" , -10000 );
  49 + this.menu.scrollTop( this.menu.scrollTop() + currentItem.position().top - this.menu.outerHeight() / 2 + currentItem.outerHeight() / 2 );
  50 + this.menuWrap.css( "left" , "auto" );
  51 + }
  52 +
  53 + this.menuWrap.position( $.extend( {}, this.options.position, {
  54 + of: this.button,
  55 + my: "left top" + ( this.menu.offset().top - currentItem.offset().top + ( this.button.outerHeight() - currentItem.outerHeight() ) / 2 ),
  56 + at: "left top"
  57 + } ) );
  58 +
  59 + this._trigger( "open", event );
  60 + } else {
  61 + this._super();
  62 + }
  63 + },
  64 +
  65 + _toggleAttr: function(){
  66 + this._super();
  67 +
  68 + if ( this.options.popup && this.isOpen ) {
  69 + this.button.toggleClass( "ui-corner-top", !this.isOpen ).toggleClass( "ui-corner-all", this.isOpen );
  70 + }
  71 + }
  72 +});
  73 +
  74 +}( jQuery ));

0 comments on commit 9d78905

Please sign in to comment.
Something went wrong with that request. Please try again.