jQuery

モーダルウィンドウ使用時の datepicker

Wicket のモーダルウィンドウ使用時に注意しなければならないのは、 呼び出し Page とモーダルウィンドウの Panel 両方で jQuery Datepicker を配置したときである。 モーダルウィンドウを起動したとき、モーダルウィンドウの中で Datepicker が効かなかった…

任意のセレクタまで、アニメーションでスクロール

memo任意のセレクタまで、アニメーションでスクロールさせる。例)table の tbody でスクロールを書いた時など。。。 $('tbody').animate({scrollTop:$('tbody tr:nth-child(20)').offset().top}); offset() でスクロールで表示させたい行のオブジェクトを取…

input テキストフィールドでカーソルの位置を指定する。

HTML input テキストフィールドで任意の範囲を選択するには、 <input type="text" value="1234567890"> jQuery で、focus して、setSelectionRange( 開始位置、終了位置 ); $('input').focus().get(0).setSelectionRange(3, 6);setSelectionRange で指定する値は、0始まりで数える。この setSelect…

jQuery UI の datepicker trigger を画像でなくてフォントアイコンで指定

jQuery UI の datepicker を使ってるWebサイトで、わざわざアイコンのボタンによる picker 呼出しをするデザインがなんか釈然としない。https://jqueryui.com/datepicker/#icon-triggerにあるようなカレンダーアイコンをクリックで呼び出すもの。これより入…

moment.js でリアルタイムに日付時刻を表示

moment.js でリアルタイムに日付時刻を表示する。jQuery と moment-with-locales.js を使う。 <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="js/moment-with-locales.js"></script> <div> <h1 id="date"></h1> <h2 id="hour_min_sec"></h2> </div> 自分で clock関数、1秒間隔実行を用意して実行する。 $(…

moment.js で曜日出力に注意

2年近く前に知ってから愛用している moment.js 曜日を出力しようと思って、 各国語対応の moment-with-locales.js を使ったら フォーマット dddd または、ddd を使ったら曜日が日本語で出力されない。 あれ、そうだっけ?!しかたなく、moment-with-locales…

表の編集

前回の投稿、入力フィールドでよく使いそうな jQuery 処理のメモ http://oboe2uran.hatenablog.com/entry/2016/12/18/113206 と、 右クリックコンテキストメニューの基本サンプル http://oboe2uran.hatenablog.com/entry/2016/12/11/161826 右クリックコンテ…

入力フィールドでよく使いそうな jQuery 処理のメモ

HTML 入力フィールドでよく使いそうな jQuery 処理をまとめる。 /** * input-support.js */ /* for 全角数字入力→ 半角数字 */ var numberConvert = function(value){ var str = new String(value); var han = str.replace(/[0-9]/g, function(s){ return …

右クリックコンテキストメニューの基本サンプル

jQuery で右クリックコンテキストメニューを表示するのに気に入って使うようになったもの https://github.com/swisnl/jQuery-contextMenuhttps://swisnl.github.io/jQuery-contextMenu/以前、これを使用する時のアイコンを変える方法を書いた。→ コンテキス…

stopPropagationの例、checkbox を td セルのクリックでも制御

JavaScript stopPropagationの例、メモ。テーブルタグに配置したcheckbox を td セルのクリックでも制御 class="sample" の 配下の tableで、、1列目に checkbox ある場合、、 $(".sample td").click(function(){ if ($(this).parent().children("td:nth-ch…

jQuery カラーピッカー plugin で補色計算してみた。

jQuery カラーピッカー plugin を使う機会があったので、サンプルを作って「補色」を求めたら興味深いことが出てきました。 ColorPicker - jQuery plugin を使います。昔からあるピッカーで有名なもの。 HTML をサンプルとして以下のように準備しました。C…

table で複数行の sortable

テーブルの Sortable 去年書いたけど、書き直す。ドラッグした後に、きちんとハンドルを外す。sortable の stop オプションで、ui.item.data('multidrag') で取得した移動対象を移動後に ui-selected を外してやります。HTML <table id="sortable"> <thead> <tr><th>header-1</th><th>header-2</th></tr> </thead> <tbody> <tr><td>Item-1</td><td>aaa</td></tr> <tr><td></td></tr></tbody></table>…

横長カレンダーを書く

横長カレンダーを書く jQuery ソース・・・メモ。 moment.js http://momentjs.com/ を使うことにした。jQuery は、2.x系で書いた。moment-with-locales.js を使う。 /* datetext = yyyy/MM/dd 日付 * predays = 前方日数(datetextの日付を含まないカウント)…

プログレスバー、画像を使わずに。

画像を使わないでCSSで描画させるプログレスバーを探したらありました。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 scroll と jQuery ui の Selectable

テーブルのスクロールを tbody で出現するようにCSSで指定して、 jQuery ui の Selectable を この tbody に適用させて行選択をできるようにしたところ、、、 スクロールはきちんと表示されてマウスホイールの操作で問題なくスクロールはできるが、、 ス…

selectタグの option 絞り込みをクライアントだけで行う

selectタグの option を他の入力フィールドで入力したキーワードフィルタで動的に絞り込む要求がありました。 サーバと通信をして select タグを書きなおすということをしたくなかったので、jQuery だけで検索するように書きました。 (1文字キーが押される…

jQuery イベントRangeError: Maximum call stack

典型的な jQuery イベント発生のエラーだと思うが、 td タグ内に、radio ボタンを設置して以下のような JavaScript(jQuery)を書いた。 $('#selectGroup td').click(function(){ $(this).children(':radio').trigger('click'); }); $('#selectGroup :radio').…

jQuery UI を使わない table の Accordion

jQuery UI のAccordion は手軽に使えて良いのだけど、table の行に対して適用するのは、困難になる。 原始的に、jQuery の toggle 関数で組むしかないみたいだ。 工夫が必要で、tbody タグを toggle 関数で制御する以下サンプルのような方法になる。<table> <thead> <tr><th>Name</th><th>id</th></tr> </thead></table>…

CSS display属性 none の注意

HTML CSS display属性 none に対して、jQuery UI の Selectable で操作をすると遅くなる。 例えば、選択した table の ある td タグが、display: none; で選択された時に中の radio ボタンクリックするなど、隠されたものに対して操作を 実行するようにした…

datepicker 翌月が 1900年になってしまう!

jQuery UI Datepicker で、動的に再作成した時に、結構ハマりました。 next アイコンリンクをクリックしたら1900年になってしまうのです。 stack overflow に書いてあって助かりました。。 http://stackoverflow.com/questions/4987293/weird-jquery-dat…

プログレス書き直す

2年前に書いた spin.jsを使ったプログレス状態のWebページを表現する JavaScript http://blog.zaq.ne.jp/oboe2uran/article/970/ =プログレス表示中に半透明なシートを覆い被せてクリックできないようにガードするものを書いたけど、 CSSスタイルシ…

chromeで0以上の整数入力に限定する

以前、chrome で、何がなんでも全角入力させない を書いたが、 半角で0以上の整数入力に限定する場合が欲しくなった。 「.」のキーイベントコード:190 「+」のキーイベントコード:187 + ShiftKey 「-」のキーイベントコード:189 を keydown で捕捉するこ…

セルをはみ出た時だけ、Tooltip

table セルをはみ出た時だけ、Tooltip表示する。というのをするのに、サーバサイドでHTML生成では条件分岐したくなくて、少し悩んだあげく 結局、jQuery に頼るしかなかった。 CSSを以下のように用意。 td { border: 1px solid #000000; padding: 4px 10px; …

chrome で、何がなんでも全角入力させない

先日ここに、投稿、http://blog.zaq.ne.jp/oboe2uran/article/1165/ しましたが、、 キーボードの「半角/全角漢字」キーでIMEがONにされると、IMEがそのままで、目的もいまいち不完全 そこで、「半角/全角漢字」キーで、IME-ONになる時の ke…

厄介なMS-IME chromeでも半角英数字に制限したい

HTML テキスト入力フィールドで、chrome ブラウザでも、とにかく!半角英数字だけの入力に制限したい! CSS の ime-mode 属性が、IEでしか有効でないし、chrome ではダメなので、 入力された全角文字を半角に置き換えや判定などをよくやっていたもので そん…

作成中のページでもガードをかけて公開

中途半端なWebページ作成中で、見られてもいいから公開/運用したいWebサイトがあるとします。 ある特定のページだけ、内容が見られても良いリンクやボタンなど操作できないページにする 管理が簡単にできないかと考えました。 ・共通の JavaScript を…

jQuery で、子要素の数

jQuery で、子要素の数を求める時は、 (jQueryObject).length table の行数、<tr> なんかを調べる時に、注意しなければならないのは、 HTMLで、tbody を書かずに table を書いていても、セレクタで tr 要素にたどりつくまでに、 tbody が間に必要である。 </tr>…

3桁カンマ区切り

Webアプリ開発で、数値を3桁のカンマ区切りで入力させる input タグへの対処として、jQuery を使った方法を よく見かけます。 皆、良くできていているのですが、受信するサーバ側でカンマ区切り文字を取り除いて解釈しなければならず、 ちょっと惜しい感が…