スマフォアプリ作成４１：動的にstyleを変更

すいません、しばらく病気で入院していた為にブログの更新はできませんでした。

少し期間が開いてしまいましたが、またスマフォアプリ開発を再開します。

今回は画面に表示する日付をリアルタイムに１列から複数列に変更できるように

したいと思います。

まずは修正したソースになります。

[common.js]

model.app = { saveName : "scheduler", arg : "arg", column : "column" };

//カラム数をWebストレージへセット

model.app.setColumn = function(val){

　localStorage.setItem(this.column, val);

};

//カラム数をWebストレージから取得

model.app.getColumn = function(){

　return localStorage.getItem(this.column);

};

[解説]
Webストレージに現在のカラム数（日付が何列か）を設定、取得する関数を追加しました。
また、Webストレージにアクセスする為のキーを定義しています。

[scheduler.html]

　～
<br/>

<br/>

　　　　　　　　　　　　カラム数　

</select>　

</div>

[解説]
フィルター画面に設定したいカラム(列)数を表すリストボックスとボタンを追加しています。
カラム数は1～7までとしました。

[]

//各クラスにイベントリスナを追加　･･･①

view.addEvents = function(){

　～
　ById('column_btn').addEventListener('click', ctr.onClickColumnButton, false);

　～
};

//現在日付を色を変更　･･･②

view.setTodayColor = function(){

　～
　if (model.day.getHolidayName(today) != "") {

　　todayElement.setAttribute("class", "holiday blk today");

　} else {

　　todayElement.setAttribute("class", "day blk today");

　}

};

//カラム更新ボタンのクリック処理　･･･③

ctr.onClickColumnButton = function(event){

　var val = ById('column').options.item(ById('column').selectedIndex).value;

　model.app.setColumn(val);

　view.changeColumnCount();

}

//カラム数変更　･･･④

view.changeColumnCount = function(){

　var val = model.app.getColumn();

　var width, font_size;

　switch (val){

　　case "1": width = "100%"; font_size = "100%"; break;

　　case "2": width = "48%"; font_size = "85%"; break;

　　case "3": width = "32%"; font_size = "75%"; break;

　　case "4": width = "24%"; font_size = "70%"; break;

　　case "5": width = "19%"; font_size = "70%"; break;

　　case "6": width = "16%"; font_size = "60%"; break;

　　case "7": width = "14%"; font_size = "50%"; break;

　};

　//CSSノード追加

　var element = document.createElement('style');

　element.type = "text/css";

　element.innerHTML = ".blk { width:" + width + "; font-size:" + font_size + "; }";

　document.getElementsByTagName('head').item(0).appendChild(element);

};

//ロード処理　･･･⑤

ctr.onLoad = function(){

　model.app.load();

　year = (new Date()).getFullYear();

　model.holiday.create(year - 1, year + 1);

　view.changeColumnCount();

　～
};

[解説]
①変更ボタンに対して呼び出される関数をセット。
②日付につけるスタイルのクラスを変更しました。
　各クラスは以下の役割です。
　・day or holidayにより文字の色を変更
　・blkが幅や文字の大きさ
　・todayは枠内の色を変更
③更新ボタンが押されたときの処理を新規に作成しました。
　現在選択されているカラム数をWebストレージに保存し
　１行のカラム数をリアルタイムに変更します。
④Webストレージから設定するカラム数を取得し、カラム数から１つの枠の
　幅、フォントサイズを決定してセットしています。
　styleタグをheadタグ内にinnerHTMLで追加することで幅、フォントサイズを
　設定しています。
　他のstyle属性も同様のやり方で行えます。覚えておくとともに共通化して
　おくと良さそうです。
⑤詳細画面に遷移した場合、④の変更内容はリセットされてしまうので
　戻ってきたタイミングで再びカラム数を変更するようにしています。

上記の変更により、下記のようにカラム数を変更する事でリアルタイムに
表示カラム数が変わります。

見ての通り、デザインはかなり崩れてしまうので、今後修正するつもりです。

サンプル
http://trapz.web.fc2.com/blog/20130610/scheduler.html

Hello, Stupid World!

いろいろとメモ代わりに書いていきます。

スマフォアプリ作成４１：動的にstyleを変更