じぶんメモ

プログラミングのメモ、日常のメモとか。

jQuery

モーダルのサンプル

なにかとモーダルが使われているサービスが多く、気になったので調べた。 z-indexを使ってモーダルと、モーダルの後ろの画面を隠すためのオーバーレイを前面にするのがポイント。 あとはボタン押下でdisplay: noneを解除してあげればOK。 <html lang="ja"> <head> <title>test</title> <link href="test.css" rel="stylesheet" type="text/css" /> </link></head></html>

jQueryを使用したAjax通信

Ajax通信でハマったのでメモ。 ちなみにrailsなら :remote => true にしておけばjsにajax処理書かなくても問題ない。 (その代わり.js.erbが必要か。) 他の言語でもやることを想定してメモしておく。 通信方法 ボタン押した時にAjaxでデータ取ってくるみたい…

javascriptでの文字列エスケープ

XSS対策としてjavascriptでの文字列エスケープについて調べた。 PHPや他の言語のようにサニタイズメソッドが用意されていないようなので 独自に実装するのが良さそう。 考慮する必要があるのは、 < → &lt; > → &gt; " → &quot; ' → &#39; & → &amp; リプレー…

jQueryにおけるpropとattireの違い

propとattrは、jQueryでフォームのチェックボックスやラジオボタン、 セレクトリストの選択しているの値を取得する時に使用する。 $(":checkbox").click(function() { alert($(this).prop('checked')); alert($(this).attr('checked')); }); propはtrueまた…

jQueryフォーム部品の値の取得・設定のまとめ

テキスト・テキストエリア val()を使用して取得・設定をする。 <input type="text" id="area" value="テキスト"> // 値の取得 $('#area').val(); // 値の設定 $('#area').val('テスト'); ラジオボタン <label><input type="radio" name="sex" value="0" checked>男</label> <label><input type="radio" name="sex" value="1">女</label> 選択したラジオボタンの値取得 var val = $('[name=se…

bxSliderを使用したレスポンシブカルーセル

レスポンシブなカルーセルを実装する時に、bxsliderを使用すると楽に実装できる。 jQuery Content Slider | Responsive jQuery Slider | bxSlider 使用するには上記リンクより必要なjs、cssをダウンロードし、 ソース内で読み込む。 以下にサンプルコードと…

jQueryを使用したセレクターのソート

jQueryを使用してセレクターのソートを行う際は、arrayクラスのsort()関数を使用する。 sort関数は、引数なしも実行可能だが、 ソート条件を指定できる。 sort()の戻り値(aとbをソートした場合) 1:bがaの手前に移動する 0:順序の変化なし -1:aがbの手前に移…