jQuery

Wicket Bootstrap用の Pagenation

昨日の投稿、WicketのPagingNavigatorで、先頭(first)と末尾(last)を表示させない方法 - Oboe吹きプログラマの黙示録 に続いて、Wicket で、Bootstrap用の PagingNavigator を作りました。 ↓ 以下のような描画になります。(色は別にCSSで指定) まず、Bo…

IE11 でもHTMLに動的描画のエリアを画像として保存

先日、html2canvas を使って表示HTMLを画像変換してダウンロード - Oboe吹きプログラマの黙示録 を書いて、IE11では不可能と書きましたが、方法があったのです。 html2canvas を実行した時に、Promise が認識できなくてダメだったのですが、 Polyfil…

jsTree で作成したツリー図をPDFにする

jsTree jsTree で作成したツリー図をPDFで出力するのは、jsTreeがHTML表示としたものを 画像データにして、PDF作成のツールで出力ということをしなければなりません。 PDF作成でテンプレートによる作成というのは無理があります。=できない。【大…

html2canvas を使って表示HTMLを画像変換してダウンロード

html2canvas - Screenshots with JavaScript を使います。 HTMLが以下の様に、画像抽出されるエリアと抽出実行制御するボタンがあります。 <div id="tree">この中が画像として抽出される</div> <div> <ul> <li><button id="preview" type="button">prev Image</button></li> <li><button id="outImage" type="button">Download</button> <a id="download" href="#"></a> </li> </ul>…</div>

html2canvas onrendered option is deprecated

表示中HTMLのスクリーンショットを canvas tag にイメージ貼り付けしようと html2canvas を使おうと思い、、 html2canvas - Screenshots with JavaScript 最新バージョンで試すと、 html2canvas: onrendered option is deprecated, html2canvas returns a Pr…

JavaScriptコードの中で、日付データのJSONとDateオブジェクトの相互変換

JavaScriptコードの中で日付データのJSONとDateオブジェクトの変換をどうしようと悩んでたら、 なるほどと思う記事を見つけた。 【JavaScript】JSON.stringify/parse をカスタマイズしてDate型とかを使えるようにする - 藤 遥のブログ ありがたく書いて頂い…

jsTree の types プラグインの li_attr と a_attr の使い方が解りにくい

https://www.jstree.com/api/#/?f=$.jstree.defaults.types types プラグインの li_attr と a_attr は、HTMLの li タグと a タグに追加する属性ということぐらいしか 書いてなくて、、どう書けば良いか?書いたらどうなるか?がどうも見えてこない。 結…

jsTree の types プラグインを使う

https://www.jstree.com/api/#/?f=$.jstree.defaults.typesこれを使えば、コンテキスメニューにおける _disabled の判定も、 以前書いた jsTree のコンテキストメニューをカスタマイズ - Oboe吹きプログラマの黙示録 も、get_node した icon を問い合わせる…

jsTree で下のツリー階層を開く時にもAJAX通信で読み込む方法

jsTree配布デモを見ても、ツリー全体JSONをAJAXで読み込む方法はあるが、 静的に書いたJSON から下の階層を開く時や、AJAX読込み後さらに下の階層を読み込む方法が、 なかなか解らなかった。massload とかプラグインあるみたいだが、どうもできない。。。 ク…

jQuery3 から load関数は注意

jQuery 3から、画面ロード時の処理を $(function(){ $(window).on("load", function(){ // TODO }); }); と書いたら動かない。もともと .load() や .unload() は、jQuery 3 のRC版が出た時の changelog で もう無くなると書いてある。 https://blog.jquery.…

編集可能にしたTabulator で、ALL check のチェックBOXを設置する

Tabulator は、編集用に設置した場合、 チェック(tickcross)に対する、ALL check ON/OFF を切り替える=入力する為の 機能または部品というのは標準で用意されていない。 ALL check ON/OFF の部品は、普通のUI感覚では、表のヘッダにある。 しかし、Tabu…

jsTree JSON データの変換

ツリービューの情報を管理するのに、ノードの親子関係の処理を新たにコーディングするのは、どんな言語であれ 労力が必要です。 できれば、画面でツリーの描画操作の結果をそのまま管理するのが楽です。 せっかく JSON というオブジェクトで表現するのですか…

jsTreeのドラッグアンドドロップの制御

jsTree のドラッグアンドドロッププラグイン は、 単に、dnd だけを書くと、 $('#tree').jstree({ 'core':{ : }, "plugins":[ "dnd" ] )); なんでもかんでも、どこの移動先にもドラッグアンドドロップで移動ができてしまう。 ファイルの下に、ぶら下げるよ…

jsTree のコンテキストメニューにアイコンを設定

jsTree のコンテキストメニューをカスタマイズ - Oboe吹きプログラマの黙示録 に続き、CSS疑似要素で、フォントアイコンを書く - Oboe吹きプログラマの黙示録 を書いたことを利用して、コンテキストメニューにアイコンを設定します。 今回も、Fontello - ico…

jsTree のコンテキストメニューをカスタマイズ

jsTree のプラグイン contextmenu は、デフォルトのままではフォルダとファイルのように、 ある種類のノードの配下にノードを作成することができない =ファイルの下に、フォルダ/ファイルは作れてはいけないはずだ。。 つまり、ツリー構造を作成できるのは…

jsTree 初期表示で全て展開表示

open_all というメソッドが用意されてるとのことだが、jsTree の マニュアルを見ても どう呼び出すのか解りにくい。loaded.jstree イベントにバインドして実行させるそうだ。 $('#tree').jstree({ 'core':{ 'data':[ {"id":1, "icon":"jstree-folder", "text…

jsTree のクリックイベント捕捉の書き方

Webページに Tree 描画させるのに、Wicket が提供しているものは、Java Object で要素&ツリー体系を作らなくてはならず、 これは手間もかかって非常に辛い。巨大なツリーで children が大量の時、結果表示スピードも心配だ。 だから Wicket の Tree 機能は…

Tabulator のカスタムフィルタ

Tabulator のチェック値のフィルタは、標準ではONを抽出するフィルタである。 サンプル $('#example-table').tabulator({ layout:"fitDataFill", columns:[ { title:"名前", field:"name", sortable:true, headerFilter:true, headerFilterPlaceholder:"名…

Tabulator ウィンドウの高さに合わせる

Tabulator は、レスポンシブだが、ウィンドウの高さに合わせた表の高さ height までは 調整してくれない。 自前でやるしかないのか。。 サンプル $('#example-table').tabulator({ height: window.innerHeight - 70, layout:"fitDataFill", columns:[ // 行…

Tabulator 右clickコンテキストは、stopPropagationでなくてpreventDefault

jQuery のイベント伝播の制御は、、 preventDefault() = 対象の要素のイベントをキャンセル stopPropagation() = 親要素への伝播をキャンセル return false = 対象と親要素への伝播をキャンセル であるから、Tabulator 右click時、ブラウザのコンテキストメ…

JavaScript 文字列置換、可変な対象を全て置換

今更だけど、忘れそうなのでメモ。JavaScript 文字列置換、replace ( 対象文字列, 置換文字列 ) は、 最初に見つかるもの1個だけを置換するのは、非プログラマでないかぎり常識で 全てを置換するのは、 正規表現で replace( /pattern/g , 置換文字列 ) を使…

jQuery UI ダイアログの背景色を変更するメモ

Wicket ばかり書いていると、Wicket の ModalWindow が便利で、jQuery UI の Dialog を書く機会が減り、 jQuery UI ダイアログの背景色を変更するの、どうやるんだっけ? と少し気分が落ちる。。。(面倒くさいなあ!みたいな。。)jQuery UI ダイアログの背…

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

Tabulator のチェックONOFFデザインを持ってくる。(1) - Oboe吹きプログラマの黙示録Tabulator のチェックONOFFデザインを持ってくる。(2) - Oboe吹きプログラマの黙示録SVG でも、innerHTML できるようにする Polyfill - Oboe吹きプログラマの黙示録…

SVG でも、innerHTML できるようにする Polyfill

あるんですね。https://github.com/dnozay/innersvg-polyfill Polyfill 所謂、まだ機能が追いついてないブラウザに対して補うためのライブラリ、 これを使うと IE9以降でもSVGタグで、innerHTML を実行できます。 github サイトから、配布してる innersvg.j…

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…