Input types can now degrade to alternate types, instead of text. First such example is type=range degrades to type=number. Fixes issue #415, Fixes #404

This commit is contained in:
scottjehl 2010-11-11 21:43:01 -05:00
parent 4db0734008
commit e89ebc126e
2 changed files with 6 additions and 4 deletions

View file

@ -18,7 +18,7 @@ $.widget( "mobile.page", $.mobile.widget, {
email: false,
month: false,
number: false,
range: true,
range: "number",
search: true,
tel: false,
time: false,
@ -141,11 +141,13 @@ $.widget( "mobile.page", $.mobile.widget, {
var o = this.options;
// degrade inputs to avoid poorly implemented native functionality
this.element.find( "input" ).each(function() {
var type = this.getAttribute( "type" );
var type = this.getAttribute( "type" ),
optType = o.degradeInputs[ type ] || "text";
if ( o.degradeInputs[ type ] ) {
$( this ).replaceWith(
$( "<div>" ).html( $(this).clone() ).html()
.replace( /type="([a-zA-Z]+)"/, "data-type='$1'" ) );
.replace( /type="([a-zA-Z]+)"/, "type="+ optType +" data-type='$1'" ) );
}
});

View file

@ -4,7 +4,7 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
label.ui-slider { display: block; }
input.ui-slider-input, .min-width-480px input.ui-slider-input { display: inline-block; width: 40px; }
input.ui-slider-input, .min-width-480px input.ui-slider-input { display: inline-block; width: 50px; }
select.ui-slider-switch { display: none; }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 66%; }
a.ui-slider-handle { position: absolute; z-index: 10; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; }