Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-01 21:40:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'master' of github.com:jquery/jquery-mobile

Browse source
This commit is contained in:
Todd Parker 2010-10-11 17:35:57 -04:00
commit 8cc279fc46
10 changed files with 99 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
_form-controls.html
View file

@ -46,7 +46,7 @@
</div>
<div data-role="fieldcontain">
<label for="password">Password Input:</label>
<input type="password" name="password" id="password" value="" />
<input type="password" name="password" id="password" value="" data-theme="b" />
</div>
<div data-role="fieldcontain">
@ -59,6 +59,11 @@
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<label for="slider1">Input slider:</label>
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="b" />
</div>
<div data-role="fieldcontain">
<label for="slider2">Select slider:</label>
<select name="slider2" id="slider2" data-role="slider">
@ -68,8 +73,8 @@
</div>
<div data-role="fieldcontain">
<label for="slider3">Another select slider:</label>
<select name="slider3" id="slider3" data-role="slider">
<label for="slider3">Themed select slider:</label>
<select name="slider3" id="slider3" data-role="slider" data-theme="a">
<option value="off">Off</option>
<option value="on" selected="selected">On</option>
</select>
@ -105,6 +110,16 @@
<input type="radio" name="radio-choice-a" id="radio-choice-b" value="off" />
<label for="radio-choice-b">Off</label>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Same with theme change:</legend>
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" data-theme="a" />
<label for="radio-choice-c">On</label>
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" data-theme="a" />
<label for="radio-choice-d">Off</label>
<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" data-theme="a" />
<label for="radio-choice-e">Other</label>
</fieldset>
</div>
@ -159,7 +174,7 @@
<div data-role="fieldcontain">
<label for="select-choice-3" class="select">Choose one:</label>
<select name="select-choice-3" id="select-choice-3">
<select name="select-choice-3" id="select-choice-3" data-theme="b">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>

1
css/jquery.mobile.button.css
View file

@ -4,6 +4,7 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 5px; padding: 0; }
.ui-btn:focus, .ui-btn a:focus { outline: none; }
.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13px; margin: 0; }
.ui-btn-inline { display: inline-block; }
.ui-btn-inner { padding: .6em 25px; display: block; height: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

2
css/jquery.mobile.forms.textinput.css
View file

@ -4,7 +4,7 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; }
input.ui-input-text, textarea.ui-input-text { padding: .4em; line-height: 1.4; font-size: 16px; display: block; width: 95%; }
input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; line-height: 1.4; font-size: 16px; display: block; width: 95%; }
textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; }
.ui-input-search { margin: 5px; padding: 0 30px; background-position: 8px 50%; background-repeat: no-repeat; position: relative; }
.ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }

6
css/jquery.mobile.theme.css
View file

@ -103,8 +103,6 @@ a.ui-link-inherit { text-decoration: none !important; }
.ui-btn-active { border: 1px solid #145072; background: #387bbe; font-weight: bold; color: #fff; cursor: pointer; text-shadow: 0 -1px 1px #145072; text-decoration: none; background-image: -moz-linear-gradient(top, #4e89c5, #2567ab); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4e89c5),color-stop(1, #2567ab)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4e89c5', EndColorStr='#2567ab')"; /*-webkit-tap-highlight-color: #387bbe;*/ }
.ui-btn-active a.ui-link-inherit { color: #fff; }
.ui-focus { outline: none; -moz-box-shadow: 0px 0px 12px #387bbe; -webkit-box-shadow: 0px 0px 12px #387bbe; box-shadow: 0px 0px 12px #387bbe; }
.ui-btn-inner { border-top: 1px solid #fff; border-color: rgba(255,255,255,.3); }
@ -188,4 +186,8 @@ a.ui-link-inherit { text-decoration: none !important; }
.ui-shadow { -moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3); box-shadow: 0px 1px 4px rgba(0,0,0,.3); }
.ui-bar-a .ui-shadow, .ui-bar-b .ui-shadow , .ui-bar-c .ui-shadow { -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.3); -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.3); box-shadow: 0px 1px 0 rgba(255,255,255,.3); }
.ui-shadow-inset { -moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); }
.ui-icon-shadow { -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.4); -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.4); box-shadow: 0px 1px 0 rgba(255,255,255,.4); }
/* set focus state last */
.ui-focus { outline: none; -moz-box-shadow: 0px 0px 12px #387bbe; -webkit-box-shadow: 0px 0px 12px #387bbe; box-shadow: 0px 0px 12px #387bbe; }

10
js/jquery.mobile.clickable.js
View file

@ -15,17 +15,11 @@ $.fn.clickable = function(){
.mouseup(function(){
$(this).removeClass('ui-btn-down-'+theme).addClass('ui-btn-up-'+theme);
})
.bind('mouseover',function(){
.bind('mouseover focus',function(){
$(this).removeClass('ui-btn-up-'+theme).addClass('ui-btn-hover-'+theme);
})
.bind('mouseout',function(){
.bind('mouseout blur',function(){
$(this).removeClass('ui-btn-hover-'+theme).addClass('ui-btn-up-'+theme);
})
.bind('focus',function(){
$(this).addClass('ui-focus');
})
.bind('blur',function(){
$(this).removeClass('ui-focus');
});
});
};

6
js/jquery.mobile.forms.checkboxradio.js
View file

@ -11,14 +11,14 @@ $.fn.customCheckboxRadio = function(options){
var input = $(this);
var o = $.extend({
theme: 'b',
icon: !input.parents('[data-type="horizontal"]').length,
theme: $(this).data('theme'),
icon: $(this).data('icon') || !input.parents('[data-type="horizontal"]').length,
checkedicon: 'ui-icon-'+input.attr('type')+'-on',
uncheckedicon: 'ui-icon-'+input.attr('type')+'-off'
},options);
// get the associated label using the input's id
var label = $('label[for='+input.attr('id')+']').buttonMarkup({iconpos: o.icon ? 'left' : '', icon: o.icon ? o.uncheckedicon : null, shadow: false});
var label = $('label[for='+input.attr('id')+']').buttonMarkup({iconpos: o.icon ? 'left' : '', theme: o.theme, icon: o.icon ? o.uncheckedicon : null, shadow: false});
var icon = label.find('.ui-icon');

6
js/jquery.mobile.forms.select.js
View file

@ -17,7 +17,8 @@ $.fn.customSelect = function(options){
//extendable options
o = $.extend({
closeText: "close",
chooseText: label.text()
chooseText: label.text(),
theme: select.data("theme")
}, options),
buttonId = selectID + "-button",
@ -37,7 +38,8 @@ $.fn.customSelect = function(options){
.insertBefore( select )
.buttonMarkup({
iconpos: 'right',
icon: 'arrow-d'
icon: 'arrow-d',
theme: o.theme
}),
menuPage = $( "<div data-role='dialog' data-theme='a'>" +
"<div data-role='header' data-theme='b'>" +

9
js/jquery.mobile.forms.slider.js
View file

@ -8,6 +8,9 @@
$.fn.slider = function(options){
return this.each(function(){
var control = $(this),
o = $.extend({
theme: control.data("theme") || 'c'
},options),
cType = control[0].nodeName.toLowerCase(),
selectClass = (cType == 'select') ? 'ui-slider-switch' : '',
controlID = control.attr('id'),
@ -18,10 +21,10 @@ $.fn.slider = function(options){
max = (cType == 'input') ? parseFloat(control.attr('max')) : control.find('option').length-1,
percent = val / (max - min) * 100,
snappedPercent = percent,
slider = $('<div class="ui-slider '+ selectClass +' ui-bar-c ui-btn-corner-all" role="application"></div>'),
slider = $('<div class="ui-slider '+ selectClass +' ui-bar-'+o.theme+' ui-btn-corner-all" role="application"></div>'),
handle = $('<a href="#" class="ui-slider-handle"></a>')
.appendTo(slider)
.buttonMarkup({corners: true, theme: 'c', shadow: true})
.buttonMarkup({corners: true, theme: o.theme, shadow: true})
.attr({
'role': 'slider',
'aria-valuemin': min,
@ -40,7 +43,7 @@ $.fn.slider = function(options){
control.find('option').each(function(i){
var side = (i==0) ?'b':'a',
corners = (i==0) ? 'right' :'left',
theme = (i==0) ?'c':'b';
theme = (i==0) ? o.theme :'b';
$('<div class="ui-slider-labelbg ui-slider-labelbg-'+ side +' ui-btn-down-'+ theme +' ui-btn-corner-'+ corners+'"></div>').prependTo(slider);
$('<span class="ui-slider-label ui-slider-label-'+ side +' ui-btn-down-'+ theme +' ui-btn-corner-'+ corners+'" role="img">'+$(this).text()+'</span>').prependTo(handle);
});

8
js/jquery.mobile.forms.textinput.js
View file

@ -10,13 +10,13 @@ jQuery.fn.customTextInput = function(options){
var input = $(this);
var o = $.extend({
search: input.is('[type="search"],[data-type="search"]')
//defaultTheme: "a"
search: input.is('[type="search"],[data-type="search"]'),
theme: input.data("theme") || "c"
}, options);
$('label[for='+input.attr('id')+']').addClass('ui-input-text');
input.addClass('ui-input-text');
input.addClass('ui-input-text ui-shadow-inset ui-body-'+ o.theme);
var focusedEl = input;
@ -46,7 +46,7 @@ jQuery.fn.customTextInput = function(options){
input.keyup(toggleClear);
}
else{
input.addClass('ui-corner-all ui-body-c');
input.addClass('ui-corner-all');
}
input

57
js/jquery.mobile.listview.js
View file

@ -25,7 +25,13 @@ $.widget( "mobile.listview", $.mobile.widget, {
//create listview markup
this.element
.addClass( "ui-listview" )
.attr( "role", "listbox" )
.find( "li" )
.attr("role","option")
.attr("tabindex","-1")
.focus(function(){
$(this).attr("tabindex","0");
})
.each(function() {
var $li = $( this ),
role = $li.data( "role" ),
@ -58,8 +64,55 @@ $.widget( "mobile.listview", $.mobile.widget, {
else {
$li.addClass( "ui-li-static ui-btn-up-" + o.theme );
}
});
})
.eq(0)
.attr("tabindex","0");
//keyboard events for menu items
this.element.keydown(function(event){
//switch logic based on which key was pressed
switch(event.keyCode){
//up or left arrow keys
case 38:
//if there's a previous option, focus it
if( $(event.target).closest('li').prev().length ){
$(event.target).blur().attr("tabindex","-1").closest('li').prev().find('a').eq(0).focus();
}
//prevent native scroll
return false;
break;
//down or right arrow keys
case 40:
//if there's a next option, focus it
if( $(event.target).closest('li').next().length ){
$(event.target).blur().attr("tabindex","-1").closest('li').next().find('a').eq(0).focus();
}
//prevent native scroll
return false;
break;
case 39:
if( $(event.target).closest('li').find('a.ui-li-link-alt').length ){
$(event.target).blur().closest('li').find('a.ui-li-link-alt').eq(0).focus();
}
return false;
break;
case 37:
if( $(event.target).closest('li').find('a.ui-link-inherit').length ){
$(event.target).blur().closest('li').find('a.ui-link-inherit').eq(0).focus();
}
return false;
break;
//if enter or space is pressed, trigger click
case 13:
case 32:
$(event.target).trigger('click'); //should trigger select
return false;
break;
}
});
if ( o.inset ) {
this.element
.addClass( "ui-listview-inset" )