jQuery
横長カレンダーを書く jQuery ソース・・・メモ。 moment.js http://momentjs.com/ を使うことにした。jQuery は、2.x系で書いた。moment-with-locales.js を使う。 /* datetext = yyyy/MM/dd 日付 * predays = 前方日数(datetextの日付を含まないカウント）…
画像を使わないでＣＳＳで描画させるプログレスバーを探したらありました。red-team-design.comこれを jQuery の $.ajax で通信した時に、進捗率を表示させます。これに、バーの中央に（％）進捗率を表示させたいので、以下のようにHTMLを書いて、 <div id="preogress_bar" class="progress-bar stripes"> <span style="width: 0%"></span><p>0 %</p> </div> 次…
jQuery context menu https://swisnl.github.io/jQuery-contextMenu/ これを使ったコンテキストメニューのアイコンの変更の方法、 items オプションを指定する時に記述する icon キーワードに沿って、以下のクラス名で CSSを用意しないとならない。 .context…
テーブルのスクロールを tbody で出現するようにＣＳＳで指定して、 jQuery ui の Selectable を この tbody に適用させて行選択をできるようにしたところ、、、 スクロールはきちんと表示されてマウスホイールの操作で問題なくスクロールはできるが、、 ス…
selectタグの option を他の入力フィールドで入力したキーワードフィルタで動的に絞り込む要求がありました。 サーバと通信をして select タグを書きなおすということをしたくなかったので、jQuery だけで検索するように書きました。 （１文字キーが押される…
典型的な jQuery イベント発生のエラーだと思うが、 td タグ内に、radio ボタンを設置して以下のような JavaScript(jQuery)を書いた。 $('#selectGroup td').click(function(){ $(this).children(':radio').trigger('click'); }); $('#selectGroup :radio').…
jQuery UI のAccordion は手軽に使えて良いのだけど、table の行に対して適用するのは、困難になる。 原始的に、jQuery の toggle 関数で組むしかないみたいだ。 工夫が必要で、tbody タグを toggle 関数で制御する以下サンプルのような方法になる。<table> <thead> <tr><th>Name</th><th>id</th></tr> </thead></table>…
HTML CSS display属性 none に対して、jQuery UI の Selectable で操作をすると遅くなる。 例えば、選択した table の ある td タグが、display: none; で選択された時に中の radio ボタンクリックするなど、隠されたものに対して操作を 実行するようにした…
jQuery UI Datepicker で、動的に再作成した時に、結構ハマりました。 next アイコンリンクをクリックしたら１９００年になってしまうのです。 stack overflow に書いてあって助かりました。。 http://stackoverflow.com/questions/4987293/weird-jquery-dat…
２年前に書いた spin.jsを使ったプログレス状態のＷｅｂページを表現する JavaScript http://blog.zaq.ne.jp/oboe2uran/article/970/ ＝プログレス表示中に半透明なシートを覆い被せてクリックできないようにガードするものを書いたけど、 ＣＳＳスタイルシ…
以前、chrome で、何がなんでも全角入力させない を書いたが、 半角で０以上の整数入力に限定する場合が欲しくなった。 「.」のキーイベントコード：190 「+」のキーイベントコード：187 + ShiftKey 「-」のキーイベントコード：189 を keydown で捕捉するこ…
table セルをはみ出た時だけ、Tooltip表示する。というのをするのに、サーバサイドでHTML生成では条件分岐したくなくて、少し悩んだあげく 結局、jQuery に頼るしかなかった。 CSSを以下のように用意。 td { border: 1px solid #000000; padding: 4px 10px; …
先日ここに、投稿、http://blog.zaq.ne.jp/oboe2uran/article/1165/ しましたが、、 キーボードの「半角／全角漢字」キーでＩＭＥがＯＮにされると、ＩＭＥがそのままで、目的もいまいち不完全 そこで、「半角／全角漢字」キーで、ＩＭＥ－ＯＮになる時の ke…
HTML テキスト入力フィールドで、chrome ブラウザでも、とにかく！半角英数字だけの入力に制限したい！ CSS の ime-mode 属性が、IEでしか有効でないし、chrome ではダメなので、 入力された全角文字を半角に置き換えや判定などをよくやっていたもので そん…
中途半端なＷｅｂページ作成中で、見られてもいいから公開／運用したいＷｅｂサイトがあるとします。 ある特定のページだけ、内容が見られても良いリンクやボタンなど操作できないページにする 管理が簡単にできないかと考えました。 ・共通の JavaScript を…
jQuery で、子要素の数を求める時は、 （jQueryObject）.length table の行数、<tr> なんかを調べる時に、注意しなければならないのは、 ＨＴＭＬで、tbody を書かずに table を書いていても、セレクタで tr 要素にたどりつくまでに、 tbody が間に必要である。 </tr>…
Webアプリ開発で、数値を３桁のカンマ区切りで入力させる input タグへの対処として、jQuery を使った方法を よく見かけます。 皆、良くできていているのですが、受信するサーバ側でカンマ区切り文字を取り除いて解釈しなければならず、 ちょっと惜しい感が…
