問題 jquery.ui の autocomplete で、日本語入力が未確定の状態でも候補が表示されてしまい、邪魔だといわれました。 日本語入力中は候補を出さないで、日本語入力が確定してからautocompleteできないでしょうか。 http://jqueryui.com/autocomplete/ 答え DEMO まず普通のautocomplete （「あ」「か」など入力してみてください） 昔のjquery ui なら、以下のようにすれば、未確定中に候補を出さないようにできた。 //昔はこんなことをした例。今はダメ。 $('#hoge').autocomplete({ （略） search: function(event, ui) { //firefoxは未確定中にキーイベントが発生しない //firefox以外は未確定中のキーイベントのkeyCodeが229になるのでこれでキャンセ

問題 Bootstrapを使っているのですが、日付選択UIはやっぱりjqueryuiのdatepickerを使うしかないでしょうか…… jqueriy.ui.datepicker はいいと思うんだけど、読み込まないといけないファイルが増えたり、見た目の統一感が問題だったり…… こんなのがいい！ けど、こうなっちゃう 答え jquery.ui.datepicker.jsをちょっといじくると、BootstrapのCSSを適用できて、Bootstrapっぽいdatepickerができる。 jquery.ui.datepickerのJavaScriptは完成度が高いので、そのまま使うとして、見た目はjqueryuiのCSSに頼らないようにする。 jquery.ui.datepicker.jsではカレンダー部分のHTMLを作っている_generateHTMLというメソッドや、作ったHTMLを適用・調

問題 jQueryプラグインとか無しで、回転できる？ 答え 回転します。 jQueryプラグイン無しで、回転します！ jQueryのanimateは、数値で設定できるスタイルシートのプロパティでしかアニメーションできない。 それならば、表示に影響しないz-indexなどのプロパティを利用して、値の変化を発生させ、stepオプションでそれを横から利用して回転などのプロパティの指定に使ってはどうかというアイデアで作ってみました。 //ここでは表示に影響しないz-indexをアニメーションさせます（見た目には何も起きません） $('#sample20130314').animate({zIndex:1},{ //1秒かけてアニメーション duration:1000, //stepは、アニメーションが進むたびに呼ばれる step:function(now){ //nowに現在のz-indexの値（

問題 $(document).ready() と $(window).load() は何か違うの？ 答え 違う。 readyはDOMが構築されたら実行される。 $(document).ready(function() { // Handler for .ready() called. }); これは次のよく見かける省略形と同じ。 $(function() { // Handler for .ready() called. }); loadは、使用される画像など含めて、ページが完全に読み込まれたら関数が実行される。 $(window).load(function () { // run code }); そのため $(document).ready(function() { // 画面にある画像の大きさを取得したいよ　→　できません× }); $(window).load(function(

戻り値は変化率とでもいえばよいだろうか。 一番簡単な、進捗に正比例して変化する例 こんな変化をさせる場合。横軸が時間（0～1）、縦軸が値の変化。 これでよい。 jQuery.easing.myEasing = function(x, t, b, c, d) { return x; } 進捗率＝変化率で、進捗0なら変化も0、進捗1（100%）なら変化も1（100%）。 最初ゆっくり、後から加速の、二次関数を使った例 こんな変化をさせる場合。物が落下するときの感じの変化。 jQuery.easing.myEasing2 = function(x, t, b, c, d) { return x * x; } あら？なんだかとても簡単そうな感じがしてきましたか？ 変化のある動きをさせる例 こういうのはどうでしょう。 jQuery.easing.myEasing3 = function(x, t,

リストで、あまりに長くなって邪魔な場合があると思います。 例えば、WorPressの年月日のアーカイブの一覧が、3年ぐらいたつと36個もできてしまう。 普段は上10個ぐらいあれば十分。でも件数制限して画面から消してしまうのはなんだかもったいない。 そこで、下図のようなことをしてみます。 スクリプトが動くPCなどの環境ではリストがコンパクトになり、スクリプトが動かない環境では通常通りの表示をします。 JavaScript $(function(){ $("#list").each(function(){ $(this).find("li:gt(10)").each(function(){$(this).hide();}); $(this).append('<p>» もっと見る</p>'); $(this).find("p:last").click(function(){$(this).par

日付入力、カレンダー入力をしたいときは jquery.ui.datepicker.js。 では、年月入力ができる機能が欲しいときはどうしましょう。 → jquery.ui.ympicker.js デモ 今回は、jquery.ui.datepicker.jsを 改造して作る例をご紹介します。 元が jquery.ui.datepicker.js なので、オプションなどもほぼそのまま、動きもだいたい似ています。 名づけて jquery.ui.ympicker.js。 以下、調理方法です。 １、材料 jqueryuiのダウンロードページから一式ダウンロードする。 ダウンロードしたzipファイルを解凍し、中身から、開発用の元のソース（development-bundle/ui/jquery.ui.datepicker.js）を使う。 ２、名前を変更する お好みの名前にしていただいてよいですが、ここ

フォームのリセットといえばこれ。 <input type="reset" value="リセット" /> しかしこれは各フォームのデフォルト値に戻すだけで、もともと何か値を持っていた場合、空欄の状態にはなりません。 （とあるフォームにて） そこでjQueryで各フォームを空欄・未選択にできるような処理を書いてみます。 その際、hiddenだけは空欄にしないようにしてみます。 $(".clearForm").bind("click", function(){ $(this.form).find("textarea, :text, select").val("").end().find(":checked").prop("checked", false); }); こんな感じになります。 DEMO ラジオボタン が選択されていても。 なにかチェックされていても。 テキストエリアでも。

ページの下までスクロールしたときに何らかの処理を実行する例 $(window).bind("scroll", function() { scrollHeight = $(document).height(); scrollPosition = $(window).height() + $(window).scrollTop(); if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) { //スクロールの位置が下部5%の範囲に来た場合 } else { //それ以外のスクロールの位置の場合 } }); demo ページをある程度下までスクロールしたときに何らかの処理を実行する – デモ 「本当にぴったり最下部までスクロールしたら」という条件にすることも可能ですが、ある程度範囲を持たせておいた方がよいことが多いでしょう。 条件