トップ/web/js_jquery

web/js_jquery の変更点

#author("2023-12-23T23:09:26+09:00","default:nemusg.pad","nemusg.pad")
#author("2025-08-25T00:27:05+09:00;2023-12-23T23:09:26+09:00","default:nemusg.pad","nemusg.pad")
* jQuery [#x3087b07]

*** ナビゲーション系 [#ub333e37]

- [[jQuery Sliding Menu:http://alizahid.github.io/jquery-sliding-menu/]]
--  [[ドリルダウンナビゲーションを実装できるプラグイン jQuery Sliding Menu:http://c-brains.jp/blog/wsg/14/05/28-121700.php]]

** 便利そうなもの [#x618c047]

*** [[jQuery Retina:http://tylercraft.com/projects/jquery-retina-plugin/]] [#v2e1a322]

- [[[[JS]デスクトップはそのまま、新しいiPad, iPhone4には高解像度の画像を配置するスクリプト -jQuery Retina:http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-retina.html]]

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

#code_x{{
<!--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 が存在すれば高解像度版を表示する

#code_x{{
<img src="' . IMAGE_DIR . '068.png" alt="068" width="32" height="32" class="retina">
}}

*** Tableフィルター [#w070071b]

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

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

*** Tableソート [#qf507399]

- [[Stupid jQuery Table Sort:http://joequery.github.io/Stupid-Table-Plugin/]]
--  軽量
--  しかしthタグにdata-sort属性が必要なので、pukiwikiなどに実装が難しい
--  矢印表示がない [[Stupid jQuery Table Sortプラグインに矢印をつけてみた:http://d.hatena.ne.jp/amidaike/20130408/1365670855]]
- [[tablesorter:http://tablesorter.com/docs/]]（使った）
--  あんまり軽量じゃないが、カスタマイズが色々できる
--  矢印表示あり、というかclassがつくだけなので簡単に好きな画像にできる
--  デフォルトでは1クリック目で昇順だが、sortInitialOrder: 'desc' で1クリック目を降順にできる

*** まだ使ってない [#i657ea8b]

- [[ページを移動（離脱）するときにjQueryで警告を出す方法:http://www.koikikukan.com/archives/2013/03/11-005555.php]] 1.9.1
- [[製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」:http://phpspot.org/blog/archives/2013/01/jqueryimage_zoo.html]]
- [[マウスホバーだけの簡単操作で画像をズームできて便利な「jQuery Zoom」:http://phpspot.org/blog/archives/2012/08/jquery_zoom.html]]
- [[Parallax.js:http://stolksdorf.github.io/Parallaxjs/]] パララックス
- [[Masonry:http://masonry.desandro.com/]] 可変グリッドレイアウト
- [[Swipebox:http://brutaldesign.github.io/swipebox/]] ギャラリー

** その他 [#d54854f2]

*** jQueryのバージョンを簡易チェック [#j7392af8]

#code_x{{
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は見つかりませんでした');```)();
}}

#include(parts/feedback,notitle)