diff --git a/demos/_assets/css/jqm-demos.css b/demos/_assets/css/jqm-demos.css index ed2235f1c2d..7070cbc086f 100644 --- a/demos/_assets/css/jqm-demos.css +++ b/demos/_assets/css/jqm-demos.css @@ -727,7 +727,7 @@ html body .ui-group-theme-a a:hover { .jqm-navmenu-panel > .ui-panel-inner > .ui-listview li > .ui-accordion-header:active, .jqm-navmenu-panel > .ui-panel-inner > .ui-listview li .ui-accordion-content .ui-accordion-header:hover { color: #333; - text-shadow: 0 1px 0 #f3f3f3; + text-shadow: 0 1px 0 #f3f3f3; background: #cccccc; } .jqm-navmenu-panel > .ui-panel-inner > .ui-listview li .ui-accordion-content li > .ui-listview-item-button:hover { @@ -977,6 +977,15 @@ li.jqm-3rd-party .ui-listview-item-button::before { color: #000000; } +.jqm-search-list.ui-listview > .ui-listview-item-active > .ui-listview-item-button { + background-color: #eee; + color: #000000; + border-top: 0; + border-bottom: 1px solid #eee; + font-weight: 400; + text-shadow: 0 1px 0 #f5f5f5; +} + .jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:focus { -webkit-box-shadow: inset 0 0 1px #0e82a5; -moz-box-shadow: inset 0 0 1px #0e82a5; diff --git a/demos/_assets/js/jqm-demos.js b/demos/_assets/js/jqm-demos.js index b2cb800c162..fe4ee1d948b 100644 --- a/demos/_assets/js/jqm-demos.js +++ b/demos/_assets/js/jqm-demos.js @@ -312,27 +312,37 @@ $( document ).on( "mobileinit", function() { }, handleKeyUp: function( e ) { var search, - input = this.element.prev("form").find( "input" ); - - if ( e.which === $.ui.keyCode.DOWN ) { - if ( this.element.find( "li.ui-button-active" ).length === 0 ) { - this.element.find( "li:first" ).toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" ); + toBeHighlightled, + input = this.element.prev("form").find( "input" ), + isDownKeyUp = e.which === $.ui.keyCode.DOWN, + isUpKeyUp = e.which === $.ui.keyCode.UP; + + if ( isDownKeyUp || isUpKeyUp ) { + if ( this.element.find( "li.ui-listview-item-active" ).length === 0 ) { + toBeHighlightled = this.element.find( "li" ) + .not( ".ui-screen-hidden" ) + [ isDownKeyUp ? "first" : "last" ](); } else { - this.element.find( "li.ui-button-active a" ).toggleClass( "ui-button-active"); - this.element.find( "li.ui-button-active" ).toggleClass( "ui-button-active" ).next().toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" ); + this.element.find( "li.ui-listview-item-active a" ) + .toggleClass( "ui-button-active"); + + toBeHighlightled = this.element.find( "li.ui-listview-item-active" ) + .toggleClass( "ui-listview-item-active" ) + [ isDownKeyUp ? "nextAll" : "prevAll" ]( "li" ) + .not( ".ui-screen-hidden" ) + .first(); } - this.highlightDown(); - } else if ( e.which === $.ui.keyCode.UP ) { - if ( this.element.find( "li.ui-button-active" ).length !== 0 ) { - this.element.find( "li.ui-button-active a" ).toggleClass( "ui-button-active"); - this.element.find( "li.ui-button-active" ).toggleClass( "ui-button-active" ).prev().toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" ); - } else { - this.element.find( "li:last" ).toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" ); - } - this.highlightUp(); + // Highlight the selected list item + toBeHighlightled + .toggleClass( "ui-listview-item-active" ) + .find( "a" ) + .toggleClass( "ui-button-active" ); + } else if ( e.which === $.ui.keyCode.ENTER ) { + this.submitHandler(); } else if ( typeof e.which !== "undefined" ) { - this.element.find( "li.ui-button-active" ).removeClass( "ui-button-active" ); + this.element.find( "li.ui-listview-item-active" ) + .removeClass( "ui-listview-item-active" ); if ( this.options.highlight ) { search = input.val(); @@ -345,8 +355,8 @@ $( document ).on( "mobileinit", function() { } }, submitHandler: function() { - if ( this.element.find( "li.ui-button-active" ).length !== 0 ) { - var href = this.element.find( "li.ui-button-active a" ).attr( "href" ); + if ( this.element.find( "li.ui-listview-item-active" ).length !== 0 ) { + var href = this.element.find( "li.ui-listview-item-active a" ).attr( "href" ); $( ":mobile-pagecontainer" ).pagecontainer( "change", href ); return false; @@ -355,22 +365,6 @@ $( document ).on( "mobileinit", function() { if ( this.options.submitTo ) { this.submitTo(); } - }, - highlightDown: function() { - if ( this.element.find( "li.ui-button-active" ).hasClass( "ui-screen-hidden" ) ) { - this.element.find( "li.ui-button-active" ).find("a").toggleClass( "ui-button-active" ); - this.element.find( "li.ui-button-active" ).toggleClass( "ui-button-active" ).next().toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" ); - this.highlightDown(); - } - return; - }, - highlightUp: function() { - if ( this.element.find( "li.ui-button-active" ).hasClass( "ui-screen-hidden" ) ) { - this.element.find( "li.ui-button-active" ).find("a").toggleClass( "ui-button-active" ); - this.element.find( "li.ui-button-active" ).toggleClass( "ui-button-active" ).prev().toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" ); - this.highlightUp(); - } - return; } }); })( jQuery );