記事一覧

input type="file"の隣に画像のプレビューを表示する

input type="file"を探して勝手に画像のプレビューを表示するスクリプトです。 画像じゃなくてもプレビューを出そうとしますが、まあそれはちょこっと弄れば直せるはずです。ファイル名をチェックするとかですかね。 (function() { if (typeof FileReader == "undefined") return; document.addEventListener("DOMContentLoaded", function() { var images = []; Array.prototype.forEach.apply( docum...

続きを読む

xSVをテーブルにする

近頃は(というほど近くもないですが)、JavaScriptのArrayも色々と拡張されて、forEach()やらmap()やらが使えるようになっています。例えばTSVをTableにするようなスクリプトもこんな感じですっきりと書けます。 var tsv2Table = function(tsv, table) {   tsv     .split(/\r\n|\r|\n/)     .map(       func...

続きを読む

スワイプ操作のスライド機能、DDScrollHandler

先日、ドラッグ&ドロップ操作を実現するためのライブラリDDHandlerを公開しましたが、そのコードを少し改造して、左右にスワイプ(フリック)をすることで操作ができるスライドのコンポーネント、DDScrollHandlerを作ってみました。JSjdbtools_DDScrollHandler.jsCSSjdbtools_autoScrollComponent.cssドラッグしている間はマウス操作に沿って動かし、離した瞬間に、元のページに戻るか、次のページに移るかを判定する、という仕組...

続きを読む

CKEditorにCtrl + Sのショートカットキーを実装する

最近、テキストエディタとして、CKEditorというライブラリを導入しました。主要な機能を網羅しており、バージョンを選べばIE7にも対応しているという、なかなかの優れものです。このCKEditorにはキーボードのコマンドを登録する機能があるので、ショートカットキーの動作を簡単にオーバーライドすることができます。Keyboardイベントを自力で書くのよりも楽です。以下よりどうぞ。...

続きを読む

【改訂版】JSでドラッグ&ドロップを実装する(スマホ対応)

最近、久々にWEB関連の開発を少々やっています。今日は主にクライアントサイドのコーディングをしました。さて、3年近く前に、DOM要素のドラッグ&ドロップのコードを紹介しましたが、わかりにくく、スマホにも対応していなかったので、書きなおしてみました。参考:要素のドラッグ(IE,FF,GC対応) - JDBな人生http://jabnz.blog69.fc2.com/blog-entry-735.html今回は、「初期化」「移動量の取得」「設定値の計算」「代入」等の処...

続きを読む

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。