unknown: jQuery

ラベル jQuery の投稿を表示しています。すべての投稿を表示

2014年2月5日水曜日

[cakephp] jQueryのスクロールアップを使っているとdebug_kitがうまく動かない時の対策

以下のように、Configure::read('debug') == 0 の時以外は禁止にしておく

2012年5月28日月曜日

[cakephp][jQuery] radioボタンを選択する時は"["と"]"をエスケープする。

<input class="category" type="radio" name="category" value="1" />携帯
<input class="category" type="radio" name="category" value="2" />スマートフォン
<div id="category_select">
</div>

こういうラジオボタンで下の id="category_select" のdivブロックを下記のjavascriptで
表示したり非表示にしたりしているのは良くある話ですが。

<script>
$(document).ready(function(){

    function displayVals() {
        var singleValues = $('input[name="category"]:checked').val()
        if(singleValues == 2){
            $("#category_select").css("display","block");
        }else{
            $("#category_select").css("display","none");
        }
    }

    $('input[name="category"]:radio').change(displayVals);
    displayVals();
});
</script>

cakephpでデータをやり取りすると少し困ってしまう。

普通のヘルパーを使って

<?php
echo $form->input('category', array(
  'type'=>'radio',
  'legend' => false,
  'label'=> true,
  'class'=>'category',
  'options'=>array('1'=>'携帯', '2'=>'スマートフォン'),
));
?>

このようにViewを書くとname部分が"data[Mobile][category]"になってしまい

<div class="input radio">
<input type="hidden" name="data[Mobile][category]" id="MobileCategory_" value="" />
<input type="radio" name="data[Mobile][category]" id="MobileCategory1" class="category" value="1"  />
<label for="MobileCategory1">携帯</label>
<input type="radio" name="data[Mobile][category]" id="MobileCategory2" class="category" value="2"  />
<label for="MobileCategory2">スマートフォン</label>
</div>

こんなコードが出力される。

javascriptのSelectors部分がダブルクォーテーションで囲まれているから
input[name="category"] を input[name="data[Mobile][category]"] こう書き換えると

良いように思うが、これでは上手く行かない。理由は上手く説明できないので割愛するが
下記のように"["と"]"をエスケープしてやらなくてはいけない。

input[name="data\[Mobile\]\[category\]"]

だから正しいjavascript文は

<script>
$(document).ready(function(){

    function displayVals() {
        var singleValues = $('input[name="data\[Mobile\]\[category\]"]:checked').val()
        var defined = 0;
        if(singleValues == 2){
            $("#category_select").css("display","block");
        }else{
            $("#category_select").css("display","none");
        }
    }

    $('input[name="data\[Mobile\]\[category\]"]:radio').change(displayVals);
    $(window).load(function () { displayVals();});
});
</script>

こうなる。

2012年5月8日火曜日

サーバサイドでタグを動的に複数出力し、

レイアウト1段目に

<li>をfloatで3つ配置、

2段目にも</li>

<li>を3つ配置・・・といった構成の場合、

テキスト量によっては要素の高さが異なってしまい、

レイアウトが崩れる原因ともなるがそんな時。

jqueryAutoHeight.jsが横一列の高さを揃えてくれる。

http://code.google.com/p/opensocial-jquery/wiki/PluginAutoHeight</li>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryAutoHeight.js"></script>
<script type="text/javascript">
jQuery(function($){
    $(揃えたいセレクタ).autoHeight();
});
</script>

2012年1月25日水曜日

jquery 印刷ボタン

http://snippet-editor.com/2010/08/2way-print-css.html

$(document).ready(function(){
 $(".printer").click(function(){             // 印刷ボタンが押されたら
  $("body").addClass("print");            // body classに"print"を追加
  window.print();                         // 印刷を実行
  var timeout = setTimeout(function(){
   $("body").removeClass("print");     // body classから"print"を削除
  }, 1000);
  return false;                           // 終了
 });
});

印刷しないパートをdisplay: none;で消す
印刷するパートから不要なfloatなどを解除
白い紙に印刷されることを踏まえて文字や背景などを調整

しておきます。ここまでは普通のprint.cssのやり方です。ここからさらに、

print.cssの内容全体を@media print { }でくくる
print.cssの各行の先頭にbody.printを追加する

この2点を加えることで、ここで記述した内容は画面表示には一切影響を与えなくなり、且つ、body classに"print"が付いていない場合はスタイルが適応されることもなくなります。

<a href="#null" class="printer scroll-off">印刷ボタンのテスト</a>

unknown