Category / jQuery

セレクトボックスの内容（option）を消す書き方の例

2012-03-15 例1 id=”target” の要素の中身を空にする → select要素の中の子要素、テキストノードがなくなる。 $('#target').empty(); 例2 id=”targe […]

ページの下までスクロールしたときに何らかの処理を実行する例

2012-03-08 ページの下までスクロールしたときに何らかの処理を実行する例 $(window).bind("scroll", function() { scrollHeight = $(document).height(); scrol […]

【jQuery】.on() の使い方（jQuery1.7～）

2012-02-25 jQuery1.7から、.bind()、.live()、.delegate()などは非推奨となり、.on() が推奨となりました。今後すべてのイベントは .on() で、となっていきそうですが、なにやら引数が多くて分かり […]

【jQuery】ちょっとシンプルなアコーディオンメニュー

2012-02-23 問題ぱたぱた開閉するメニューを作りたい。開いたり閉じたりしたら、ページを移動しても状態を維持して欲しい。答え前回のアコーディオンメニューよりちょっと機能追加したバージョンです。開いた位置を記憶しておいて新しく開 […]

【jQuery】シンプルなアコーディオンメニュー

2012-02-20 アコーディオン型のメニューというのはjQueryでよく見るプラグインの１つだと思います。これを自分のサイトに取り込む場合、よさそうなのを探してくるのも手ですが、余計な機能がついていたり、そのせいで重くなったり、カスタマ […]

【jQuery】formのリセットをで3行で書いてみる

2012-02-16 フォームのリセットといえばこれ。 <input type="reset" value="リセット" /> しかしこれは各フォームのデフォルト値に戻すだけで、もともと何か値を持っていた場合、空欄の状態にはなりま […]

jQueryで立体的な動き（.animation()に挑戦）

2012-02-01 立体的な動きをさせてみる。何と言うのか、スロットマシーンのような動きをしたい。3Dの立体的スライドショーとも言うかもしれない。本当に文字が円筒に張り付いているような動き（文字自体にも遠近感を出す）は難しいが、せめて観 […]

【jQuery】コンテンツの高さの自動調整

2012-01-25 問題ユーザのブラウザサイズに合わせてコンテンツを調整したい。ウィンドウ全体にスクロールバーを出したくない。ユーザーが途中でブラウザサイズを変えても、調整したい。答えウィンドウサイズを変更する際にはresizeイ […]

【jQuery】Ajaxを使ったコンテンツの表示方法

2012-01-23 内部リンクを全てAjaxによるロードに変える方法です。利点はページの書き換えが一部になるため、新規のページを開いた際の(html/javascript等の)初期化処理が発生しない。 javascriptが動かない環境 […]

【jQuery】selectboxにoption要素の追加・削除をする

2012-01-17 状況によって、動的に、jQueryで、選択項目を増やしたり、減らしたりしたい。そんな時に役立つ基本的なやり方。 //select要素のIDをselectとする //追加するとき $('#select').append( […]

【jQuery】スライドショーするjQueryプラグイン

2012-01-15 作りました。名前 ssSlideShow … SlideShowだからss。深い意味はありません。バージョン Version: 0.1 … 出来立てです。ライセンス自由に使って、改造して、何かあればフィードバック […]

【jQuery】ページ内リンクをスムーズに移動する

2012-01-14 よく見かける、にゅる～んと移動する「ページ上部へ」のリンク、つるるるる…と移動するページ内リンクの実装例です。 a要素で、href属性に、#を含むものに対して、クリックしたときに目的の要素までぬるっとアニメーションして移 […]

【jQuery】複数選択可能なセレクトボックスを扱う

2012-01-13 multiple(複数選択可)なセレクトボックスをjQueryで扱いたい場合のTipsです。通常のselectboxとの違いは、結果の取得や、選択に配列を使うことです。複数選択可能なセレクトボックスをjQueryで扱 […]

【jQuery】checkboxの全選択/全選択解除を簡単に作る

2012-01-11 よくある定番の機能です。 IMAGE JavaScript $(function() { $('#all').on("click",function(){ $('.list').prop("checked", $(thi […]

セレクトボックスの選択されている項目の取得

2012-01-08 問題セレクトボックスの選択されている項目の文字の方を取得するには？答えセレクトボックスの、選択されている項目をあらわすセレクタは、 #hoge option:selected 値を取得するには、 $("#hoge […]

画面外からニョキっとスライドしてくるエフェクト

2011-12-28 ちょっと注目してほしいアラートや誘導に使えます。 Ajaxで非同期でデータを更新した後、「更新しました！」などの情報を表示したり。上からでてくるのはiOSの通知センターみたいですね。 jQueryではanimateとい […]

シンプルなニュースティッカー

2011-12-15 ニュースを電光掲示板のように表示するニュースティッカーです。気づいて欲しい情報や、にぎやかな感じを出すため、限られたスペースで表示をローテーションするためなどに使えます。 jQueryとjQueryUIの機能を少し使っ […]

テーブルのキーワードにマッチする行だけ表示する

2011-11-27 Excelのオートフィルタのような感じで、一覧表示している情報の中から、指定したキーワードにマッチする行だけを表示します。サーバーにはリクエストが発生せず、ブラウザ側の画面上での処理となります。通信が発生しない分、一瞬 […]

【jquery】IEのhover（mouseenter/mouseleave）がおかしい？

2011-06-21 問題 mouseenter、mouseleaveイベントを使った処理をjQueryで書いたのだが、IEとそれ以外で何か動きが違う。 IEは想定外の箇所でmouseleaveが発生した。なぜ？たぶん答え Microsof […]

SOFTELメモ Developer's blog