jQueryMobileのdata-themeを変えるやり方をみてみました。
http://stackoverflow.com/questions/7667603/change-data-theme-in-jquery-mobile
が参考になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="noticeArea" data-role="collapsible-set" data-content-theme="b"> <?php foreach ($notices as $notice): ?> <div data-role="collapsible" data-theme="e"> <h3 data-noticeId="<?php echo $notice['Notice']['id'] ?>"> <?php echo h($notice['Notice']['subject']) ?><br> <span class="noticeDate"><?php echo h(substr($notice['Notice']['created'],0, 16)) ?></span> </h3> <p> <h4><?php echo h($notice['Notice']['subject']) ?></h4> <?php echo nl2br($notice['Notice']['detail']) ?> </p> </div> <?php endforeach; ?> </div> |
|
1 2 3 |
$('.noticeArea h3').click(function(){ $(this).find('a').buttonMarkup({theme: 'c'}); }); |
展開用のボタンをクリックすると色が変わるようにする例です。buttonMarkupはbutton(‘refresh’)をしなくても画面上に反映してくれます。
なおbuttonMarkupはdata-role属性にbuttonを持ったaタグなどをボタンに変えるメソッドで、button要素にたいしては効きません。
buttonに対して書くとしたら
|
1 |
$(this).parent().data('theme','a').removeClass('ui-btn-active').addClass('ui-btn-active').trigger('create'); |
のようになりますが、hoverの対応とかもあるし、ちょっと大変ですね。