jQuery

JavaScript で RSA 暗合複合

OpenSSL で作成した RSA 暗合鍵、どのJSコードが良いのか探した。 JSEncrypt というのが一番使い易い。 電子署名で、SHA256 にするので、CryptoJS から、 sha256.js だけ使う。 <script src="jsencrypt.min.js" type="text/javascript"></script> <script src="sha256.js" type="text/javascript"></script> 公開鍵で暗合化 var crypt = new JSEncrypt(); // 公開鍵 publickey は、Ba…

固定サイズでの画像の切取り

Cropper JS使用の画像 crop で、常に固定サイズ =常に一定の width と height で切り取りするようにする。切り取り BOX をリサイズ不可にするのは、 https://github.com/fengyuanchen/cropperjs#options にあるとおり、cropBoxResizable オプションを false…

画像切取り、crop のプレビュー

Webページ上で画像切取り crop を行う時のプレビューhttps://github.com/fengyuanchen/cropperjs を元に jQuery 用の Cropper https://github.com/fengyuanchen/jquery-cropper これを使用した時の プレビューについて、 crop 実行のオプションで任意の場所…

Bootstrap モーダルをドラッグ移動可能にする

Bootstrap モーダルをドラッグ移動可能にするには、やはり、jQuery UI を使うのが簡単 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> id=getCroppedCanvasModal が、BootStrap のモーダルエリアなら、、 $("#getCroppedCanvasModal").draggable({ cursor: "move" }); 昨日、悩んだのは、jQuery UI を使わ…

jquery-cropper を使ってみる。

画像のcrop(切取)を、GitHub - fengyuanchen/jquery-cropper: A jQuery plugin wrapper for Cropper.js. を使って必要最低限の機能を試してみる。 HTMLページは以下のような画面レイアウト BootStrap を使う。アイコンには fontawesome を使う。 H…

画像トリミング jQuery など

あまり画像処理のことは詳しくない。押し迫って着手することも少なかったせいか、 疎い方だ。 いいかげん気になってたので、少し触っていこうか。。。 github.com昔、Windows PC に、GIMP を入れて使ったりしてたことあったけど、 https://github.com/oliver…

jsTree ツリーを折りたたみ時、選択していたノードが存在したかチェックする

jsTree でノードを折りたたみをした時に 折りたたんだ中に選択していたノードが存在したかチェックして処理したい場合がある。”折りたたみ”のイベントを探して処理を書く。 →ここで、探す。。 https://www.jstree.com/api/#/?q=.jstree%20Event&f=after_clos…

jsTree 新規作成と名称変更を区別した処理

jsTree の contextmenu プラグイン と dnd (ドラッグ&ドロップ)プラグインの処理で イベントによる処理を書く場合、基本的には各イベント名で、 on の bind関数を書けばよいのだが、、 .on( Eventname , function(ev, data){ } https://www.jstree.com/ap…

jsTree 検索でHit だけでなく下の階層も表示する

jsTree search プラグインで検索した結果、Hitしたノードの階層の下も 表示させるには、 以下の属性、default : false を true にする。https://www.jstree.com/api/#/?f=$.jstree.defaults.search.show_only_matches_children$.jstree.defaults.search.s…

html2canvas+jsPDF で1ページに入りきらない時、

html2canvas+jsPDF で表示したHTML ページの中の任意の領域をPDFに作成する方法は、 以下のようにするが、 (入りきらない場合の対策をしていない) $('#outpdf').click(function(){ html2canvas(document.querySelector("#content")).then(function(can…

jsTree ノード選択時の処理を整理する

jsTreeでノード選択時の処理、 jQuuery on メソッドで、select_node.jstree でイベントと結合 $('#tree').jstree({ 'plugins': [ 'contextmenu','dnd' ], 'core':{ data':{ "url":"./tree.json", "dataType":"json" }, 'check_callback' : true, } }).on('se…

アイコン無し=区別ない jsTree での保存

編集可能 jsTree の編集結果を Pyhon で、JSON 保存 - Oboe吹きプログラマの黙示録 の続き、アイコン無し、フォルダ等の区別がない、自由にツリーを組み立てるようにする jsTree 編集可能 jsTree の編集結果を Pyhon で、JSON 保存 - Oboe吹きプログラマの黙…

編集可能 jsTree の編集結果を Pyhon で、JSON 保存

「jsTree 描画→Treeの編集操作→ 編集結果を次回表示の為に保存」 (ここでいうTreeの編集操作は、ツリーアイテムを移動したり新規作成・削除・名称変更をツリー図上で実行することです) 通常は、ブラウザで表示した jsTree → JavaScript で JSON 変換、→ サ…

Python eelで jsTree の AJAX load を確かめる

jsTree の AJAX による URL指定の描画は、わざわざ Webサイトを立てないと 確認できません。 ↑のGIF画像になってしまいます。 サーバを立てなくても描画させるのに、 Python の eel パッケージを使って、手元のWindows PC上で、HTML と JS + Pythonスクリプ…

Wicket full size ModalWindow

昔、Wicket の ModalWindow の caption を非表示にする css を書いたり、 Wicketモーダルウィンドウの外観を変更する - Oboe吹きプログラマの黙示録 CSS の記述で、画面いっぱいの ModalWindow 表示を書いたことがありました。 Wicket ModalWindow full scre…

jQuery ui Datepicker 年月プルダウンにした時の調整

Datepicker は jQuery ui 以外にも沢山あるのでまだ、jQuery ui を使うなんてという批判はさておき、 使い慣れてもいるので。。。 年月セレクタをプルダウンにした時、、 jquery-ui-1.12.1.min.js と、 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> で、以下のようにdatepicker を設定して表示した時、…

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…