ヘッダーフッターも一捻り
jQuery Mobileさん、iosやandroid上だとinputにフォーカスが行く度にヘッダーとフッターが隠れます
表示面積を大きく取るためなのでしょうが、うっとおしいです
よくある動作ですが、うっとおしいです
CSSを上書きして捻り潰してくれます
/Src/cm.css
/* Mobile Header/Footer Auto Slideup/Down Cancel */ .ui-header-fixed.ui-fixed-hidden { top: -1px; padding-top: 1px; position: fixed; } .ui-footer-fixed.ui-fixed-hidden { bottom: -1px; padding-bottom: 1px; position: fixed; } .ui-header-fixed.slidedown.in, .ui-header-fixed.slidedown.out, .ui-header-fixed.slidedown.reverse, .ui-footer-fixed.slideup.in, .ui-footer-fixed.slideup.out, .ui-footer-fixed.slideup.reverse { -o-animation-name: none; -moz-animation-name: none; -webkit-animation-name: none; animation-name: none; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; transform: none; }
ついでにヘッダにロゴ画像を出して其れっぽい感じにします
/Src/cm.css
/* Header Image */ .ui-header > .ui-title.ui-img-app { background-repeat: no-repeat; background-position-y: center; background-position-x: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/Src/app.css
/* For Mobile */ body:not(.ui-desktop) ul.ui-listview > li.ui-li-divider, body:not(.ui-desktop) div.ui-header > .ui-title { border-color: #d00; background-color: #d00; color: white; } body:not(.ui-desktop) .ui-checkbox-on:after, body:not(.ui-desktop) .ui-flipswitch-active.ui-flipswitch, body:not(.ui-desktop) .ui-btn-active { border-color: #d00!important; background-color: #d00 !important; color: white; } /* For Desktop */ body.ui-desktop ul.ui-listview > li.ui-li-divider, body.ui-desktop div.ui-header > .ui-title { border-color: #0bb; background-color: #0bb; color: white; } body.ui-desktop .ui-checkbox-on:after, body.ui-desktop .ui-flipswitch-active.ui-flipswitch, body.ui-desktop .ui-btn-active { border-color: #0bb!important; background-color: #0bb!important; color: white; } /* Header Title Logo */ .ui-header > .ui-title.ui-img-app { background-image: url('../imgs/logo.png'); background-size: auto 5em; /* image height*/ height: 5em; /* image height*/ padding-left: 18em; /* image width*/ border-color: white !important; background-color:white !important; color: black !important; }
タイトルになるタグにui-img-appを付加し、app.cssで表示ロゴとサイズを指定します
bodyに付加してui-desktopでデスクトップとモバイルの色を管理します
<div data-role="header" data-position="fixed" data-fullscreen="false" data-tap-toggle="false"> <h1 class="ui-img-app ui-title-left">メニュー</h1> .... </div>