web/js_jquery の履歴(No.1)

jQuery#

ナビゲーション系#

便利そうなもの#

jQuery Retina#

デスクトップはそのまま、高解像度対応端末にはRetina画像を配置するスクリプト。 最近は全ての端末にRetina画像を出せばいいみたいな流れになっているのでもう使わないかも。

<!--retina img -->
<script type="text/javascript" src="skin/jquery.retina.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#body img.retina').retina({suffix: "-2x"});
});
</script>
  • 068-2x.png が存在すれば高解像度版を表示する
<img src="' . IMAGE_DIR . '068.png" alt="068" width="32" height="32" class="retina">

Tableフィルター#

どちらもスマホではテーブルが数百行になると重くて使いにくい

  • Jquery Table Filter
    • jsファイルは軽量
    • 文字を入力してからが重いタイプ
  • jQuery.FilterTable（使った）
    • ハイライト表示が分かりやすい。クリックでフィルタがかかる（文字を入力したことになる）ショートカットも作れる。
    • ページを表示させるときが重いタイプ

Tableソート#

  • Stupid jQuery Table Sort
  • tablesorter（使った）
    • あんまり軽量じゃないが、カスタマイズが色々できる
    • 矢印表示あり、というかclassがつくだけなので簡単に好きな画像にできる
    • デフォルトでは1クリック目で昇順だが、sortInitialOrder: 'desc' で1クリック目を降順にできる

まだ使ってない#

その他#

jQueryのバージョンを簡易チェック#

javascript:(function(){if(typeof jQuery !== 'undefined'){alert($.fn.jquery);}else{alert('jQuery使ってないよ');```)();
javascript:alert('jQuery%20Ver.'%20+%20$.fn.jquery);
javascript:alert('jQuery Ver.' + $.fn.jquery);
javascript:(function(){if(typeof jQuery !== 'undefined'){alert('jQuery Ver.' +
$.fn.jquery);}else{alert(‘jQueryは見つかりませんでした');```)();