jQuery

Tabulator のチェックONOFFデザインを持ってくる。(2)

昨日書いた oboe2uran.hatenablog.comやはり、IE11でも表示できるJS版にします 原始的に、DOMの innerHTML を使います。HTML <h2>width × height : 24</h2> <div class="case1"></div> <h3>border</h3> <div class="case2"></div> <h2>width × height : 14</h2> <div class="case3"></div> CSS は前回と同じです。 svg.chk-on path { fill: #2dc214; clip-ru…

Tabulator のチェックONOFFデザインを持ってくる。(1)

jQuery のプラグイン、Tabulator のチェックON/OFF のデザインは、SVGで作成されているので Tabulator サンプル等を表示して、SVGコードを抽出して他で利用できそうである。 このチェックON、OFFのSVGコードのHTMLタグを抽出すると以下で…

jQuery ui ダイアログのタイトルバーの大きさ調整

jQuery ui ダイアログのタイトルバーが大きすぎると思ったので調整 通常は、、、 これが大きいと思うなら、、 .ui-dialog-titlebar{ padding: 0.3rem !important; font-size: 0.5rem; } タイトル文字列を指定しなければ、、

jQuery ui ダイアログの制御ボタンの表示位置調整

久々に jQuery UI ダイアログのコードを書きました。ちょっとしたメモとしてここに残します。 何も気にせずに、マニュアルどおりに書けば、、、 HTML・・・ダイアログ表示させる div <div id="dialog"></div> JS・・・ダイアログ var dlg = $('#dialog').dialog({ autoOpen: false…

Tabulator CSV download を BOM 付きにする

Tabulator で表示した表から、BOM付きのCSVダウンロードするには、 2通りの方法がある。 ・Custom File Formatter を使う方法 ・Format Data Before Download を定義する方法 いずれも、対策するためにカスタマイズする方法を示したマニュアルが http://tab…

TypeError: e.indexOf is not a function

jQuery を書いていて、今まで動いてたのは、 HTML に、iframe タグ、src は適当に何かを指すようにしてあって、表示サイズを0 (=あえて、隠しておく) <iframe id="otherframe" src="xxxx" width="0px" height="0px"></iframe> 何からのイベントで、load(function(){} )で、印刷プレビューを表示していたのですが、、 $('#otherf…

Uncaught TypeError: Cannot read property 'step' of undefined

jQuery 2.x → 3.3.1 upgrade した時、jquery-ui エラー Uncaught TypeError: Cannot read property 'step' of undefined StackoverFlow に書いてあるように、 https://stackoverflow.com/questions/45356723/jquery-ui-cannot-read-property-step-of-undefin…

ブラウザへのファイルドロップ禁止する

JavaScript で抑制します。 window.addEventListener('dragover', function(ev){ ev.preventDefault(); }, false); window.addEventListener('drop', function(ev){ ev.preventDefault(); ev.stopPropagation(); }, false); これで、マウスでPCのローカル…

Python でのカレンダー週番号

Python で年の週、を取得するのは、datetime の isocalendar 3 要素のタプル (ISO 年、ISO 週番号、ISO 曜日) が返ってきます。 import datetimetoday = datetime.datetime.today() weekNumber = today.isocalendar()[1] print(weekNumber)しかし、月曜始ま…

注意しよう。jQuery AJAX resuest body JSON

stackoverflow.com

chart.js の レスポンシブ

chart.js レスポンシブ指定で描いたグラフが、ウィンドウのリサイズで canvas の縦横比での リサイズがうまくいかなくてグラフが揺れるように振動してしまうことがある。 表示サイズ(canvas.style.width、canvas.style.height)に対して、 キャンバスのレンダ…

Chart.js で折れ線グラフの交点(intersect)をToolTip 表示(時刻編)

Chart.js で折れ線グラフの交点単純な X軸:double 値、Y軸:double 値 のパターンを先日書いたので、 今回は、X軸:時刻、Y軸:double 値 の線グラフの交点である。 プロットするデータの型は、先日書いた中の Ploter クラスである。x軸である x は、d…

jQuery ui datepicker の change イベントを Wicket で捕捉して処理する。

表題に挙げた Wicket で捕捉して処理する前に、そもそも jQuery ui Datepicker の change イベントは 通常の change イベントハンドラでは処理できず、オプション onSelect でハンドラ指定するのはマニュアルに書いてあるとおり有名である。 onSelect で指定…

jQuery AJAX通信でリクエストヘッダに動的に任意のコードを付与

jQuery AJAX通信でHTTPリクエストヘッダに任意のコードを付与するには、 headers{ }, を付ければ良いのだが、 折角なので、Wicket でページ表示のタイミング=Page コンストラクタ実行で付与する値を決めて 送るようにする。 ページが読込む JavaScript は、…

Chart.js 凡例クリック無効化

Chart.js グラフの凡例をクリックするとデフォルトでは対象グラフ描画が消えて、 凡例テキストは打ち消し線が表示される。これを無効にしたい時がある、options 設定で以下のとおり onClick の戻り値を false にすればよい。 legend:{ onClick: function(){ …

Chart.js ツールチップカスタマイズ

Chart.js ToolTip のカスタマイズはネット検索すれば、まとまった解説も沢山見つかるし、サンプルもある。 http://tr.you84815.space/chartjs/configuration/tooltip.html あえて、時刻をX軸にしたグラフで ToolTipカスタマイズを書いてみた。options に、t…

Chart.js ToolTip で%を表示する方法

Chart.js の PIE 描画でのサンプルです。 オプションで ToolTip の callback を書いて対応する。 つまり、 options: { tooltips: { callbacks: { label: function (tooltipItem, data){ return %を表示する文字列を生成して返す。 } } }, } を書く。 全体の…

Chart.js 図全体背景色、グラフエリア背景色、イメージダウンロードの問題を解決する

Chart.js を使用して canvas に描画するグラフは、canvas の中のグラフエリアだけは、 以下 stackoverflow の返答にあるように、描画前に実行する関数プラグインを書き option の chartArea で backgroundColor を指定すれば、グラフエリアだけは背景色が適…

Chart.js can't acquire context from the given item

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

ブラウザウィンドウサイズが変化した時に処理する jQuery 関数定義する。 var resizeProcess = function(p){ var timer = false; $(window).resize(function(){ if (timer !== false) clearTimeout(timer); timer = setTimeout(p, 200); }); }; 使用する。 r…

knockout.js の computed の注意

以下のような、HTMLとスクリプト <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…

整数0埋め文字列

2桁以下の整数を0埋め文字列にするのに、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…

時計のUIによるTime picker

時計のようなUIによる 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>

jQuery ui Datepicker に 祝日ならToolTip も表示させる

先日投稿の oboe2uran.hatenablog.com に続けて、 祝日ならToolTip も表示させる方法、 Datepicker のオプション beforeShowDay 返却値配列の3番目が、ToolTip のテキストになるので、 先日書いた JavaScript の Datepicker のオプションのbeforeShowDay を…

jQuery ui Datepicker に、祝日休日の文字色背景色をつける

公開している JavaScript版祝日計算にサンプルとして付与している jQuery-ui Datepicker を 祝日休日の文字色背景色をつけるように更新した。 Java祝日計算 プロジェクト日本語トップページ - OSDNclass名 = ui-datepicker-holiday として、CSSを用意する…

JavaScript版の 祝日計算を更新

Java版の祝日計算を更新したので、JavaScript の方も更新 Java祝日計算 プロジェクト日本語トップページ - OSDN

スライドしてループする jQuery で

メモ。 スライドしてループするデザインの作り方を紹介しているのを見つけたのでリンクのメモです。 jQueryで中央が拡大表示されたカルーセルパネルUIを実装する方法 | BlackFlag

Webページ入力フィールド制限、ToolTip

今まで過去から何度も書いたものをまとめる。 過去。。。 入力フィールドでよく使いそうな jQuery 処理のメモ - Oboe吹きプログラマの黙示録 input タグ type="number" のスピンボタンを非表示 - Oboe吹きプログラマの黙示録 chromeで0以上の整数入力に限定…

Handsontable で 安易なテストツールを作る。

Handsontable で、任意にキーと値(value)を入力して、それをJSONテキストにするのと、任意の入力URLに送信するもの。用意するもの。Handsontable は、コミュニティ版で充分、https://handsontable.com/JSON の jQueryプラグイン GitHub - Krinkle/jquer…

Handsontable コンテキストメニューで削除の丁寧な補助は書かなくてもよい

久々に Handsontable に触れる。 3年程前、2014 年のバージョンの Handsontable のコンテキストメニューは、行削除、列削除を組み込んだ時、 最後の1行、1列は、削除できないように、以下のように disabled キーの関数コーディングをする必要があった。 $…