├── jquery.mobileselect.js
├── min
    └── jquery.mobileselect-min.js
└── readme.md


/jquery.mobileselect.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * jQuery Mobile Select
 3 |  * @Author: Jochen Vandendriessche <jochen@builtbyrobot.com>
 4 |  * @Author URI: http://builtbyrobot.com
 5 |  *
 6 |  * @TODO:
 7 |  *			- create a before / after hook so we can fix some things euhm... before and
 8 |  *				after I suppose
 9 | **/
10 | 
11 | (function($){
12 | 	"use strict";
13 | 
14 | 	var methods = {
15 | 		init : function(config) {
16 | 			var options = $.extend({
17 | 				autoHide: true,
18 | 				defaultOption: "Go to...",
19 | 				deviceWidth: 480,
20 | 				appendTo: '',
21 | 				className: 'mobileselect',
22 | 				useWindowWidth: false
23 | 			}, config);
24 | 			// we'll use the width of the device, because we stopped browsersniffing
25 | 			// a long time ago. Anyway, we want to target _every_ small display
26 | 			var width = (options.useWindowWidth === true) ? $(window).width() : screen.width;
27 | 			if (width < options.deviceWidth){
28 | 				var _o = $(this), // store the jqyuery object once
29 | 						_p = (options.appendTo.length) ? $(options.appendTo) : _o.parent(), // get the parent node
30 | 						_s = $("<select class=\""+ options.className +"\" />"); // create a filthy select
31 | 					_s.appendTo(_p); // append it to the parent
32 | 
33 | 					$("<option />", {
34 | 						 "selected": (!$('.current', _o).length) ? 'selected' : false,
35 | 						 "value": "",
36 | 						 "text": options.defaultOption
37 | 					}).appendTo(_s);
38 | 
39 | 					// Populate the dropdown with menu items. If there is an li.current we'll
40 | 					// make this one selected
41 | 					$('a', _o).each(function() {
42 | 						var el = $(this),
43 | 						sl = ( el.parent('li').hasClass('current') || el.hasClass('current') ) ? 'selected' : false;
44 | 						$("<option />", {
45 | 							"selected": sl,
46 | 							"value": el.attr("href"),
47 | 							"text": el.text()
48 | 						}).appendTo(_s);
49 | 					});
50 | 					// hide the navigation ul
51 | 					if (options.autoHide){
52 | 						$(_o).hide();
53 | 					}
54 | 					// now make it work :-)
55 | 					_s.change(function() {
56 | 						window.location = $(this).find("option:selected").val();
57 | 					});
58 | 			}
59 | 		}
60 | 	};
61 | 
62 | 	$.fn.mobileSelect = function(method){
63 | 		if ( methods[method] ) {
64 | 					return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
65 | 				} else if ( typeof method === 'object' || ! method ) {
66 | 					return methods.init.apply( this, arguments );
67 | 				} else {
68 | 					$.error( 'Method ' + method + ' does not exist on jQuery.mobileselect' );
69 | 		}
70 | 	};
71 | })(this.jQuery);
72 | 


--------------------------------------------------------------------------------
/min/jquery.mobileselect-min.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * jQuery Mobile Select
 3 |  * @Author: Jochen Vandendriessche <jochen@builtbyrobot.com>
 4 |  * @Author URI: http://builtbyrobot.com
 5 |  *
 6 |  * @TODO:
 7 |  *			- create a before / after hook so we can fix some things euhm... before and
 8 |  *				after I suppose
 9 | **/
10 | (function(b){var c={init:function(a){a=b.extend({autoHide:!0,defaultOption:"Go to...",deviceWidth:480,appendTo:"",className:"mobileselect",useWindowWidth:!1},a);if((a.useWindowWidth===!0?b(window).width():screen.width)<a.deviceWidth){var d=b(this),c=a.appendTo.length?b(a.appendTo):d.parent(),e=b('<select class="'+a.className+'" />');e.appendTo(c);b("<option />",{selected:!b(".current",d).length?"selected":!1,value:"",text:a.defaultOption}).appendTo(e);b("a",d).each(function(){var a=b(this),c=a.parent("li").hasClass("current")||a.hasClass("current")?"selected":!1;b("<option />",{selected:c,value:a.attr("href"),text:a.text()}).appendTo(e)});a.autoHide&&b(d).hide();e.change(function(){window.location=b(this).find("option:selected").val()})}}};b.fn.mobileSelect=function(a){if(c[a])return c[a].apply(this,Array.prototype.slice.call(arguments,1));else if(typeof a==="object"||!a)return c.init.apply(this,arguments);else b.error("Method "+a+" does not exist on jQuery.mobileselect")}})(this.jQuery);
11 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | jQuery mobile select
 2 | ====================
 3 | 
 4 | What's it all about?
 5 | --------------------
 6 | 
 7 | It's simple as abc. If you have some kind of navigation that you want to replace with
 8 | a dropdown for mobile devices (read: screenwidth less than 480 pixels) then you've
 9 | found what you're looking for.
10 | 
11 | How to use?
12 | -----------
13 | 
14 | Download the jquery.mobileselect.js. Removing comments and minifying it will get you bonus points!
15 | 
16 | To use it:
17 | 
18 | ``` javascript
19 | $(document).ready(function(){
20 | 
21 |   // your navigation ul selector
22 |   $('#nav-main ul').mobileSelect();
23 | 
24 | })
25 | ```
26 | 
27 | You can optionally change these default parameters:
28 | 
29 | ``` javascript
30 | $(document).ready(function(){
31 | 
32 |   // your navigation ul selector
33 |   $('#nav-main ul').mobileSelect({
34 |     autoHide: true, // Hide the ul automatically
35 |     defaultOption: "Go to...", // The default select option
36 |     deviceWidth: 480, // The select will be added for screensizes smaller than this
37 |     appendTo: '#mycustomloc', // Used to place the drop-down in some location other than where the primary nav exists
38 |     className: 'mobileselect', // The class name applied to the select element
39 |     useWindowWidth: false // Use the width of the window instead of the width of the screen
40 |   });
41 | 
42 | })
43 | ```
44 | 
45 | And that's it that's all.
46 | 
47 | However...
48 | ----------
49 | 
50 | There are still some things that need to be taken care of:
51 | 
52 | *  create a before / after hook so we can fix some things euhm... before and after I suppose


--------------------------------------------------------------------------------