月: 2018年10月

• px(ピクセル)
  ピクセル単位の指定
  環境によって変化しない絶対単位
• em（エム）
  文字の高さを基準にした単位で1emは1文字分
  MacintoshやWindowsなど使用している環境により大きさが変化する相対単位

font-size:16px;
font-size:16em;
font-size:16pt;
font-size: 120%;
pxは画面表示の1点分
emは1文字
ptは1/72インチ
exは小文字xが基準

pxでfont-sizeを指定するとIEの場合は文字の大きさを変えられなくなる問題がある。
font-sizeをemで指定する場合でもwidthの設定はpxで指定することが多い。

・JavaのString型やchar型の文字コードは16ビットUnicode
・EUC-JPやUTF-8はbyte配列として扱う必要がある!!

つまりEUC-JPからUTF-8に直接変換はできないので
一旦String(Unicode)を経由する
EUC-JPのbyte配列 → String(Unicode) → UTF-8のbyte配列

例)
byte[] eucCode; // EUC-JP
String strChar; // UNICODE
byte[] utf8Code; // UTF8
// EUC→Unicodeデータ
strChar = new String(eucCode, “EUC-JP”);
// Unicode→UTF-8データ
utf8Code = strChar.getBytes(“UTF-8”);

jQueryMobileとは
モバイルWEBアプリやスマートフォンサイト用のフレームワーク

ヘッダー部、コンテンツ部、フッター部で構成される
<div data-role=”page”>
<div data-role=”header” data-theme=”a”></div>
<div data-role=”content”></div>
<div data-role=”footer”></div>
</div>

複数ページも可能
<div data-role=”page1″>
<div data-role=”header” data-theme=”a”></div>
<div data-role=”content”></div>
<div data-role=”footer”></div>
</div>
<div data-role=”page2″>
<div data-role=”header” data-theme=”a”></div>
<div data-role=”content”></div>
<div data-role=”footer”></div>
</div>

ポップアップもある
<a href=”a.html” data-rel=”dialog”></a>

<ここで注意点>
基本的にAjaxでのページ遷移でCSS、jsファイルの読込みを行うHEAD部分は読込まれず、
BODY部分のみ置き換わりエフェクトがかかる
画面のid項目の重複が発生したりして挙動がおかしくなる

下記のような指定をするとAjaxを使用せず通常の遷移となり回避できるがエフェクトはかからなくなる
<a href=”a.html” rel=”external”>
<a href=”a.html” data-ajax=”false”>
<form data-ajax=”false”>

代わりにリンククリック時に自前でAjaxローダーのような表示する
<div id=”shadow”></div>
// リンククリックで背景グレーアウト(css作成)
$(“a”).click(function() {
$(‘#shadow’).show();
});
// ページの読込み後に元に戻す
$(window).load(function(){
$(‘#shadow’).show();
});

// ページローディング
$(document).on(‘mobileinit’, function() {
$.mobile.loader.prototype.options.text = ‘loading’;
$.mobile.loader.prototype.options.textonly = false;
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = ‘a’;
});

6種類のテーマ(data-theme)がある
<div data-role=”header” data-theme=”a”>
デフォルト
a:黒
b:青
c:グレイ
d:ライトクレイ
e:黄色

その他にも
レイアウト用のグリッドや
data-role=”none”でテーマを外すなども可能
<input data-role=”none” type=”text” name=”name” id=”name” value=”” size=12>

フォームのactionはフルパス指定が必要
<form action=”/current-directory/abc” method=”get”>

エフェクトを指定
data-transition=”slide”
他に
slideup
slidedown
pop
fade
fillip
turn
flow
slidefade
none
など

他にもいろいろと用意されているみたい

タブウィジェットはjQuery Mobile 1.4から追加されている

テキストエリアの自動拡張機能(テキスト入力欄が不足すると動的に縦幅を広げる機能)は
jQuery Mobile 1.4からdata-autogrow=”false”で抑制できる。
それ以前の場合は下記のようにmax-heightで可。
<textarea style=”height:500px;max-height:500px;box-shadow:none;” readonly></textarea>

jQuery Mobileのスペースや背景色などデフォルトに戻したい場合
jquery.mobile-xxx.cssを変更する。
スペース部分の除去
/*content area*/
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
背景色を変更
.ui-body-c {
border: 1px solid #B3B3B3;
color:#000;
text-shadow: 0 1px 0 #fff;
background: #FFF;
}

ボタンの角丸を解除するには「data-corners=”false”」
影を解除するには「data-shadow=”false”」