jQuery
Chart.js グラフの凡例をクリックするとデフォルトでは対象グラフ描画が消えて、 凡例テキストは打ち消し線が表示される。これを無効にしたい時がある、options 設定で以下のとおり onClick の戻り値を false にすればよい。 legend:{ onClick: function(){ …
Chart.js ToolTip のカスタマイズはネット検索すれば、まとまった解説も沢山見つかるし、サンプルもある。 http://tr.you84815.space/chartjs/configuration/tooltip.html あえて、時刻をＸ軸にしたグラフで ToolTipカスタマイズを書いてみた。options に、t…
Chart.js の PIE 描画でのサンプルです。 オプションで ToolTip の callback を書いて対応する。 つまり、 options: { tooltips: { callbacks: { label: function (tooltipItem, data){ return ％を表示する文字列を生成して返す。 } } }, } を書く。 全体の…
Chart.js を使用して canvas に描画するグラフは、canvas の中のグラフエリアだけは、 以下 stackoverflow の返答にあるように、描画前に実行する関数プラグインを書き option の chartArea で backgroundColor を指定すれば、グラフエリアだけは背景色が適…
www.chartjs.orgChart.js を使用しようとしたら、 Failed to create chart: can't acquire context from the given item 描画の為の の後で、スクリプトを書かないとならない。 <script src="Chart.bundle.js"></script> </head> <body> <canvas id="myChart"></canvas> <script type="text/javascript"> // ここで、canvas id="myChart" に対する Chart.js の処理を書く。 var …</body>
ブラウザウィンドウサイズが変化した時に処理する jQuery 関数定義する。 var resizeProcess = function(p){ var timer = false; $(window).resize(function(){ if (timer !== false) clearTimeout(timer); timer = setTimeout(p, 200); }); }; 使用する。 r…
以下のような、ＨＴＭＬとスクリプト <input type="text" data-bind="value: msg1" /> <input type="text" data-bind="value: msg2" /> <span data-bind="text: res"></span> と、 $(function(){ var ViewModel = function(){ this.msg1 = ko.observable('111'); this.msg2 = ko.observable('222'); this.res = ko.computed(function(){ return…
２桁以下の整数を０埋め文字列にするのに、if文 10 コードを書きたくない時Java int num = 7; String s = String.format("%02d", num);JavaScript var num = 7; var s = ("00" + num).slice(-2);Python format を使う num = 7 s = '{0:02d}'.format(num)Pyth…
時計のようなＵＩによる Time picker を探してたら github にありました。 https://github.com/weareoutman/clockpicker github サイトから入手した CSS と JS を使います。 <link rel="stylesheet" type="text/css" href="dist/jquery-clockpicker.min.css"> <script type="text/javascript" src="dist/jquery-clockpicker.min.js"></script> まずは、標準的なもの。 </link>
先日投稿の oboe2uran.hatenablog.com に続けて、 祝日ならToolTip も表示させる方法、 Datepicker のオプション beforeShowDay 返却値配列の３番目が、ToolTip のテキストになるので、 先日書いた JavaScript の Datepicker のオプションのbeforeShowDay を…
公開している JavaScript版祝日計算にサンプルとして付与している jQuery-ui Datepicker を 祝日休日の文字色背景色をつけるように更新した。 Java祝日計算 プロジェクト日本語トップページ - OSDNclass名 = ui-datepicker-holiday として、ＣＳＳを用意する…
Java版の祝日計算を更新したので、JavaScript の方も更新 Java祝日計算 プロジェクト日本語トップページ - OSDN
メモ。 スライドしてループするデザインの作り方を紹介しているのを見つけたのでリンクのメモです。 jQueryで中央が拡大表示されたカルーセルパネルUIを実装する方法 | BlackFlag
今まで過去から何度も書いたものをまとめる。 過去。。。 入力フィールドでよく使いそうな jQuery 処理のメモ - Oboe吹きプログラマの黙示録 input タグ type="number" のスピンボタンを非表示 - Oboe吹きプログラマの黙示録 chromeで０以上の整数入力に限定…
Handsontable で、任意にキーと値（value）を入力して、それをJSONテキストにするのと、任意の入力ＵＲＬに送信するもの。用意するもの。Handsontable は、コミュニティ版で充分、https://handsontable.com/JSON の jQueryプラグイン GitHub - Krinkle/jquer…
久々に Handsontable に触れる。 ３年程前、2014 年のバージョンの Handsontable のコンテキストメニューは、行削除、列削除を組み込んだ時、 最後の１行、１列は、削除できないように、以下のように disabled キーの関数コーディングをする必要があった。 v…
昔、フェードイン、フェードアウトするメッセージの jQuery を書いた。 見直すと中央寄せが中途半端でできていない。書き直す。ＣＳＳソース @CHARSET "UTF-8"; /** * fadeinmsg.css */ div#fadeMessageModal{ display: none; position: fixed; width: 100%;…
方法があった。 stackoverflow で見つけました。 $(function(){ $("body").on('mouseover', 'a', function(e){ var $link = $(this), href = $link.attr('href') || $link.data("href"); $link.off('click.chrome'); $link.on('click.chrome', function(){ /…
Wicket のモーダルウィンドウ使用時に注意しなければならないのは、 呼び出し Page とモーダルウィンドウの Panel 両方で jQuery Datepicker を配置したときである。 モーダルウィンドウを起動したとき、モーダルウィンドウの中で Datepicker が効かなかった…
memo任意のセレクタまで、アニメーションでスクロールさせる。例）table の tbody でスクロールを書いた時など。。。 $('tbody').animate({scrollTop:$('tbody tr:nth-child(20)').offset().top}); offset() でスクロールで表示させたい行のオブジェクトを取…
HTML input テキストフィールドで任意の範囲を選択するには、 <input type="text" value="1234567890"> jQuery で、focus して、setSelectionRange( 開始位置、終了位置 ); $('input').focus().get(0).setSelectionRange(3, 6);setSelectionRange で指定する値は、０始まりで数える。この setSelect…
jQuery UI の datepicker を使ってるWebサイトで、わざわざアイコンのボタンによる picker 呼出しをするデザインがなんか釈然としない。https://jqueryui.com/datepicker/#icon-triggerにあるようなカレンダーアイコンをクリックで呼び出すもの。これより入…
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関数、１秒間隔実行を用意して実行する。 $(…
２年近く前に知ってから愛用している 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 右クリックコンテ…
HTML 入力フィールドでよく使いそうな jQuery 処理をまとめる。 /** * input-support.js */ /* for 全角数字入力→ 半角数字 */ var numberConvert = function(value){ var str = new String(value); var han = str.replace(/[０-９]/g, function(s){ return …
jQuery で右クリックコンテキストメニューを表示するのに気に入って使うようになったもの https://github.com/swisnl/jQuery-contextMenuhttps://swisnl.github.io/jQuery-contextMenu/以前、これを使用する時のアイコンを変える方法を書いた。→ コンテキス…
JavaScript stopPropagationの例、メモ。テーブルタグに配置したcheckbox を td セルのクリックでも制御 class="sample" の 配下の tableで、、１列目に checkbox ある場合、、 $(".sample td").click(function(){ if ($(this).parent().children("td:nth-ch…
jQuery カラーピッカー plugin を使う機会があったので、サンプルを作って「補色」を求めたら興味深いことが出てきました。 ColorPicker - jQuery plugin を使います。昔からあるピッカーで有名なもの。 HTML をサンプルとして以下のように準備しました。Ｃ…
テーブルの 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>…
