jQuery

Bootstrap Datepicker カレンダーに、日本の祝日をマークする

元々、10年程前に Java で日本の祝日を求めるものを作って公開したのだが、 数年前に JavaScript 版も作っていた。jQuery - UI の datepicker で祝日をマークする為だった。JavaScript 版も、バージョン 1.4 では、JHoliday.descriptionDate(date) にバグ…

フォルダ指定のアップロード

HTML5 input の webkitdirectory 付与は、Google chrome と Fire Fox しか今のところ使えないが、、 Wicket でこれを受信するのは、FileUploadField コンポーネントの getFileUploads() で List<FileUpload> を受け取ることになる。 <input wicket:id="uploadfile" id="uploadfile" type="file" webkitdirectory> Wikcet final FileUploadField fileu</fileupload>…

twitter/Typeahead.js を Wicket の AJAX として Autocomplete の振るまいにする

Wicket の Autocomplete といえば、jQuery UI を利用したものが慣れ親しんでものであった。 最近よく使われる Bootstrap デザインを適用しても使えないわけではない、 CSSスタイルシートを合わせて書いていけば良いのだが、 Bootstrap と jQuery UI を併…

Bootstrap の datepicker

メモ、 以下からダウンロード https://github.com/uxsolutions/bootstrap-datepickerHTML head 読込み指定 曜日を日本語表示の為には、配布されてる中の bootstrap-datepicker.ja.min.js を使う。 <link href="dist/css/bootstrap-datepicker.css" rel="stylesheet" /> <script src="dist/js/bootstrap-datepicker.js"></script> </link>

jsTreeノード選択イベントのdata引数

以前、 oboe2uran.hatenablog.comを書きましたが、 この時、選択配下のノードツリーを配列JSONで取得する処理 on メソッドで、select_node.jstree でイベントと結合して $('#tree').jstree({ 'core':{ data':{ "url":"./tree.json", "dataType":"json" }, })…

Chart.js Time グラフの為のデータJSONを作成するクラス

Chart.js https://www.chartjs.org/ X軸=時刻 の線グラフを描画するためのJSONデータ作成する Java クラスを作成して、AJAX通信によるJSONデータ → Chart.js グラフ描画をデザインを除いた 可変の JSONデータ生成だけでも汎用的にならないかと考えました。…

PBKDF2ではなくSHA256で CryptoJS のAES暗合復号

Java と JavaScript 間の AES暗合 - Oboe吹きプログラマの黙示録 に書いたように、PBKDF2WithHmacSHA1 で実行する AES暗合も一計ですが、 単純に、SHA-256 ハッシュ&初期ベクトルを単純にハッシュ値から持ってくる方法も、 CryptoJS で書こうと思えば書けま…

Java と JavaScript 間の AES暗合

Java と JavaScript 言語間の暗合文や鍵の渡し方はいろんな方法あるので ここでは書きません。 相互での暗合復号の実際の実行を書いてます。 CBCモードで、PBKDF2WithHmacSHA1 です。 Java側JavaScript は、crypto-js を使います。 https://code.google.com/…

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型とかを使えるようにする - 藤 遥のブログ ありがたく書いて頂い…