Built on jQuery core for familiar and consistent jQuery syntax and minimal learning curve and leverages jQuery UI code and patterns.
Compatible with all major mobile, tablet, e-reader & desktop platforms - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, and all modern browsers with graded levels of support.
Lightweight size and minimal image dependencies for speed.
-
Modular architecture for creating custom builds that are optimized to only the features needed for a particular application
+
Modular architecture for creating custom builds that are optimized to only include the features needed for a particular application
HTML5 Markup-driven configuration of pages and behavior for fast development and minimal required scripting.
Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.
Responsive design techniques and tools allow the same underlying codebase to automatically scale from smartphone to desktop-sized screens
@@ -36,7 +36,7 @@
Accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.
Touch and mouse event support streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API.
Unified UI widgets for common controls enhance native controls with touch-optimized, themable controls that are platform-agnostic and easy to use.
-
Powerful theming framework and ThemeRoller application make highly-branded experiences easy to build.
+
Powerful theming framework and the ThemeRoller application make highly-branded experiences easy to build.
The select menu is based on a native select element, which is hidden from view and replaced with a custom-styled select button that matches the look and feel of the jQuery Mobile framework. The select menu is ARIA-enabled and keyboard accessible on the desktop as well. View the data- attribute reference to see all the possible attributes you can add to selects.
-
By default, the framework leverages the native OS options menu to use with the custom button. When the button is clicked, the native OS menu will open. When a value is selected and the menu closes, the custom button's text is updated to match the selected value.
+
By default, the framework leverages the native OS options menu to use with the custom button. When the button is clicked, the native OS menu will open. When a value is selected and the menu closes, the custom button's text is updated to match the selected value. Please note that the framework also offers the possibility of having custom (non-native) select menus, see details at the bottom of this page and on the custom select menu page.
To add a select menu to your page, start with a standard select element populated with a set of option elements. Set the for attribute of the label to match the ID of the select so they are semantically associated. It's possible to accessibly hide the label if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.
@@ -405,7 +405,8 @@ $('select').selectmenu();
Custom select menus
For the sake of advanced styling, the framework also offers a method of generating custom menus from existing select menu markup instead of the native OS menu. The custom menu supports disabled options and multiple selection (whereas native mobile OS support for both is inconsistent), adds an elegant way to handle placeholder values, and restores missing functionality on certain platforms such as optgroup support on Android.
- Custom select menu docs
+
diff --git a/js/jquery.mobile.forms.slider.js b/js/jquery.mobile.forms.slider.js
index cec2a363..975ea6ef 100644
--- a/js/jquery.mobile.forms.slider.js
+++ b/js/jquery.mobile.forms.slider.js
@@ -269,7 +269,7 @@ $.widget( "mobile.slider", $.mobile.widget, {
percent = Math.round( ( ( data.pageX - this.slider.offset().left ) / this.slider.width() ) * 100 );
} else {
if ( val == null ) {
- val = cType === "input" ? parseFloat( control.val() ) : control[0].selectedIndex;
+ val = cType === "input" ? parseFloat( control.val() || 0 ) : control[0].selectedIndex;
}
percent = ( parseFloat( val ) - min ) / ( max - min ) * 100;
}
@@ -307,15 +307,11 @@ $.widget( "mobile.slider", $.mobile.widget, {
newval = max;
}
- // Flip the stack of the bg colors
- if ( percent > 60 && cType === "select" ) {
- // TODO: Dead path?
- }
this.handle.css( "left", percent + "%" );
this.handle.attr( {
"aria-valuenow": cType === "input" ? newval : control.find( "option" ).eq( newval ).attr( "value" ),
"aria-valuetext": cType === "input" ? newval : control.find( "option" ).eq( newval ).getEncodedText(),
- title: newval
+ title: cType === "input" ? newval : control.find( "option" ).eq( newval ).getEncodedText()
});
// add/remove classes for flip toggle switch
diff --git a/js/jquery.mobile.listview.filter.js b/js/jquery.mobile.listview.filter.js
index 7bd72cbe..634556ee 100755
--- a/js/jquery.mobile.listview.filter.js
+++ b/js/jquery.mobile.listview.filter.js
@@ -37,13 +37,11 @@ $( document ).delegate( ":jqmData(role='listview')", "listviewcreate", function(
lastval = $this.jqmData( "lastval" ) + "",
childItems = false,
itemtext = "",
- item, change;
+ item;
// Change val as lastval for next execution
$this.jqmData( "lastval" , val );
- change = val.substr( 0 , lastval.length - 1 ).replace( lastval , "" );
-
- if ( val.length < lastval.length || change.length != ( val.length - lastval.length ) ) {
+ if ( val.length < lastval.length || val.indexOf(lastval) !== 0 ) {
// Removed chars or pasted something totally different, check all items
listItems = list.children();
diff --git a/js/jquery.mobile.support.js b/js/jquery.mobile.support.js
index 4de8203b..4da33084 100644
--- a/js/jquery.mobile.support.js
+++ b/js/jquery.mobile.support.js
@@ -56,7 +56,9 @@ $.mobile.browser.ie = (function() {
div = document.createElement( "div" ),
a = div.all || [];
- while ( div.innerHTML = "", a[ 0 ] );
+ // added {} to silence closure compiler warnings. registering my dislike of all things
+ // overly clever here for future reference
+ while ( div.innerHTML = "", a[ 0 ] ){};
return v > 4 ? v : !v;
})();
diff --git a/tests/unit/slider/index.html b/tests/unit/slider/index.html
index 832a10cd..d504f5a2 100644
--- a/tests/unit/slider/index.html
+++ b/tests/unit/slider/index.html
@@ -70,6 +70,11 @@
+
+
+
+
+
diff --git a/tests/unit/slider/slider_core.js b/tests/unit/slider/slider_core.js
index 263652b7..7ccf1c15 100644
--- a/tests/unit/slider/slider_core.js
+++ b/tests/unit/slider/slider_core.js
@@ -21,4 +21,18 @@
ok( slider.val() > 0, "the value has been altered" );
same( slider.val() % step, 0, "value has 'snapped' to a step" );
});
+
+ test( "empty string value results defaults to slider min value", function() {
+ var slider = $( "#empty-string-val-slider" );
+ same( slider.attr('min'), "10", "slider min is greater than 0" );
+ same( slider.val( '' ).slider( 'refresh' ).val(), slider.attr('min'), "val is equal to min attr");
+ });
+
+ test( "flip toggle switch title should be current selected value attr", function() {
+ var slider = $( "#slider-switch" );
+
+ same(slider.siblings(".ui-slider").find("a").attr('title'),
+ $(slider.find("option")[slider[0].selectedIndex]).text(),
+ "verify that the link title is set to the selected option text");
+ });
})( jQuery );
\ No newline at end of file