jqueryMobile | ぼくの答えはいつもNo…そしてYes！

jQueryMobileのdata-themeを変えるやり方をみてみました。

http://stackoverflow.com/questions/7667603/change-data-theme-in-jquery-mobile

が参考になります。

&lt;div class=&quot;noticeArea&quot; data-role=&quot;collapsible-set&quot; data-content-theme=&quot;b&quot;&gt;
	&lt;?php foreach ($notices as $notice): ?&gt;
	&lt;div data-role=&quot;collapsible&quot; data-theme=&quot;e&quot;&gt;
		&lt;h3 data-noticeId=&quot;&lt;?php echo $notice[&#039;Notice&#039;][&#039;id&#039;] ?&gt;&quot;&gt;
			&lt;?php echo h($notice[&#039;Notice&#039;][&#039;subject&#039;]) ?&gt;&lt;br&gt;
			&lt;span class=&quot;noticeDate&quot;&gt;&lt;?php echo h(substr($notice[&#039;Notice&#039;][&#039;created&#039;],0, 16)) ?&gt;&lt;/span&gt;
		&lt;/h3&gt;
		&lt;p&gt;
		&lt;h4&gt;&lt;?php echo h($notice[&#039;Notice&#039;][&#039;subject&#039;]) ?&gt;&lt;/h4&gt;
		&lt;?php echo nl2br($notice[&#039;Notice&#039;][&#039;detail&#039;]) ?&gt;
		&lt;/p&gt;
	&lt;/div&gt;
	&lt;?php endforeach; ?&gt;
&lt;/div&gt;

<?php foreach ($notices as $notice): ?>

<?php echo h($notice['Notice']['subject']) ?><br>

</h3>

<p>

<?php echo nl2br($notice['Notice']['detail']) ?>

</p>

</div>

<?php endforeach; ?>

</div>

$(&#039;.noticeArea h3&#039;).click(function(){
	$(this).find(&#039;a&#039;).buttonMarkup({theme: &#039;c&#039;});
});

$('.noticeArea h3').click(function(){

$(this).find('a').buttonMarkup({theme: 'c'});

});

展開用のボタンをクリックすると色が変わるようにする例です。buttonMarkupはbutton(‘refresh’)をしなくても画面上に反映してくれます。

なおbuttonMarkupはdata-role属性にbuttonを持ったaタグなどをボタンに変えるメソッドで、button要素にたいしては効きません。

buttonに対して書くとしたら

$(this).parent().data(&#039;theme&#039;,&#039;a&#039;).removeClass(&#039;ui-btn-active&#039;).addClass(&#039;ui-btn-active&#039;).trigger(&#039;create&#039;);

1	$(this).parent().data('theme','a').removeClass('ui-btn-active').addClass('ui-btn-active').trigger('create');

のようになりますが、hoverの対応とかもあるし、ちょっと大変ですね。

さして目新しいことでもないですが簡単な小ネタでも。

トグルスイッチを切り替えるたびにDBを書き換えることは簡単にできます。
cakePHP2.0+jQueyMobile1.2でのトグルスイッチのDBへの反映のやり方です。いいやり方か分からないですが何かの助けになればと。

cakePHPのアクションは

public function toggleValid($id){
	if (!is_numeric($id)) return false;
	$this-&gt;{モデル名}-&gt;query(&quot;UPDATE {$this-&gt;table} SET valid = (CASE valid WHEN 1 THEN 0 ELSE 1 END) WHERE id = ?&quot;, array($id));
}

public function toggleValid($id){

if (!is_numeric($id)) return false;

$this->{モデル名}->query("UPDATE {$this->table} SET valid = (CASE valid WHEN 1 THEN 0 ELSE 1 END) WHERE id = ?", array($id));

}

こんな感じです。これをコントローラに記述して /{コントローラ名}/toggleValid/{ID} にアクセスするたびにvalidカラムが0と1に交互に変わります。CASE文で判定すればいろいろできて便利なのでcakePHPでSQL組み立てるやり方が分からないときはとりあえずqueryファンクション使っちゃいます。

そしてこの関数はコントローラーでなくモデルに書くべきものなので実際にはモデルに書いてます。またjQueryMobileと組み合わせているので下のようになります。

[共通読み込みJavaScriptファイル]

$(&#039;#_favorite_people&#039;).live(&#039;pageinit&#039;, function(){
    $(&#039;#_favorite_people .ui-slider-switch&#039;).live(&#039;change&#039;, function(){
        $.post(&#039;/favorite_people/update_valid/&#039;+$(this).data(&#039;id&#039;));
    });
});

$('#_favorite_people').live('pageinit', function(){

$('#_favorite_people .ui-slider-switch').live('change', function(){

$.post('/favorite_people/update_valid/'+$(this).data('id'));

});

このファイルはjQueryMobile特有の処理をしています。最初のイベントバインドはDOMキャッシュを有効にしたままJavascriptを実行させるため、data-role=”page”の属性を持つコンテナにidを割り振り、そのページコンテナの初期イベントを監視しています。

[ビューファイル(index.ctp)]

	&lt;?php
	echo $this-&gt;Form-&gt;input(&#039;FavoritePerson.valid&#039;, array(
		&#039;type&#039;=&gt;&#039;select&#039;
		,&#039;data-role&#039;=&gt;&#039;slider&#039;
		,&#039;label&#039;=&gt;false
		,&#039;options&#039;=&gt;array(&#039;0&#039;=&gt;&#039;OFF&#039;, &#039;1&#039;=&gt;&#039;ON&#039;)
		,&#039;value&#039;=&gt;$valid
		,&#039;data-id&#039;=&gt;$id
	));

<?php

echo $this->Form->input('FavoritePerson.valid', array(

'type'=>'select'

,'data-role'=>'slider'

,'label'=>false

,'options'=>array('0'=>'OFF', '1'=>'ON')

,'value'=>$valid

,'data-id'=>$id

));

$validと$idはコントローラからセットしておいてください。data-idはjQueryMobileではおなじみのHTML5の独自データ属性です。これでデータIDをjQueryへ渡すのが簡単です。

[AJAX呼び出し先コントローラー]

	public function update_valid($id){
		$this-&gt;autoRender = false;
		if ($this-&gt;request-&gt;is(&#039;post&#039;)){
			$this-&gt;FavoritePerson-&gt;toggleValid($id);
		}
	}

public function update_valid($id){

$this->autoRender = false;

if ($this->request->is('post')){

$this->FavoritePerson->toggleValid($id);

}

[モデル]

	public function toggleValid($id){
		if (!is_numeric($id)) return false;
		$this-&gt;query(&quot;UPDATE {$this-&gt;table} SET valid = (CASE valid WHEN 1 THEN 0 ELSE 1 END) WHERE id = ?&quot;, array($id));
	}

public function toggleValid($id){

if (!is_numeric($id)) return false;

$this->query("UPDATE {$this->table} SET valid = (CASE valid WHEN 1 THEN 0 ELSE 1 END) WHERE id = ?", array($id));

}

ぼくの答えはいつもNo…そしてYes！

愛媛県南予在住現在フリーのウェブプログラマです。お仕事募集中です。

「jqueryMobile」タグアーカイブ

【jQueryMobile】data-themeをJavaScriptで変えたい

【cakePHP】トグルスイッチをAJAXで反映させる