ブラウザでフローチャートを作れるシンプルなスクリプト・「Flowy」
Flowyはブラウザでフローチャートを作成出来るスクリプトです。シンプルで軽量なコードですがjQueryに依存します 上図のように左ペインからブロックをD&Dで追加、右ペインで各ブロックを編集するUIとなっていますので直感的な操作でフローチャートを作成する事が出来ます 基本的な機能のみの提供で、完成されているようなものでは無いようで、あくまでフローチャートを作成出来る機能を提供するもののようです examplevar spacing_x = 40; var spacing_y = 100; // 初期化 flowy($("#canvas"), drag, release, snapping, spacing_x, spacing_y);初期化します。例ではブロックサイズを定義していますがデフォルトで設定されています function snapping(drag) { //例：ドラッグするブ
Webページに訪問したユーザーのマウスの動きを再現するスクリプト・「viewRecorder」
viewRecorderはWebサイトでユーザーが動かしたマウスの動きを記録、再現するスクリプトです。jQueryに依存しています。以前ご紹介したrrwebと少し似ていますがもう少しシンプルで導入ハードルも低めな印象です。用途もrrwebと概ね同じでWebアプリ等におけるユーザーへの操作サポートなどでしょうか。 有効に活用できそうだとは思いますが、最近スクリプトの使用によって捜査対象となった報道が相次いでいる為、若干使用を躊躇しますね。forによる無限ループだけで補導されるなら書き方を書いてるサイトは総じてアウトになりそうだし、この手のスクリプトに限らず、当局が罪だと言えばどんな理由であれ罪になってしまいそうで、いついかなる理由でも検挙/逮捕される可能性も否めません。 高いスキルを持ってたり上昇志向がある方は日本よりもITリテラシーの高い傾向にある国に行った方が安心かもしれませんね。余談が
画像に対するマウスの位置で画像を変化させられる「imageLife」:phpspot開発日誌
GitHub - rockman84/imageLife: Jquery Plugin 画像に対するマウスの位置で画像を変化させられる「imageLife」 画像とマウスポイントの位置によって、画像を指定したものに切り替えられるjQueryプラグインです。 マウスの位置を矢印で図示する、といった使い方ができますが、アイデア次第で面白い効果が作れるかもしれません。 関連エントリ ブロックへのマウスの入り方でアニメーションを変える「Direction Reveal」 マウスでなぞると反応する背景イメージを作成する「Brusher」
DOM要素をドラッグで複数選択するスクリプト・「selection.js」
selection.jsは要素の複数う選択を可能にするスクリプトです。非依存で単体で動作します。上サンプルのように、複数並べられたボックスをドラッグで選択する事が可能で、タッチデバイスにも対応させることも可能です。選択された要素にはclassが付与されます。ライセンスはMIT。 selection.js
カスタマイズ性に優れたサジェスト機能を実装できる「jQuery Autocompleter」 – bl6.jp
jQuery Autocompleterはカスタマイズ性に優れたサジェスト機能を実装できるjQueryプラグインです。文字を入力するとそれに関連するキーワード候補をリストアップしてくれるので、入力の手間も省けます。 以下、jQuery Autocompleterの実際のデモになります。 デモ デモではテキストボックスに何か文字を入力すると、その文字に関連したキーワード候補を表示してくれます。 例えば、aという文字を入力すると、Almond、Antique Brass、Apricot、Aquamarine、Asparagus……などといったキーワード候補がいろいろ出てきます。目的の候補を選択するだけでテキストボックスへの入力が完了するので、いちいち全ての文字を入力する必要もなく、ユーザーの負担も軽減できますね。 オプションもたくさんあり、source、asLocal、empty、limit、
シンプルな画像ズームjQueryプラグイン「ZoomIt」:phpspot開発日誌
ZoomIt シンプルな画像ズームjQueryプラグイン「ZoomIt」 マウスオーバーでオーバー箇所をズームインできます 関連エントリ 画像をホバー時にJavaScriptなしでズームする ECサイトなどに使える画像のカーソル部分ズームjQueryプラグイン「xZoom」
通常のフォームをインタラクティブなチャットフォームにする「convForm」:phpspot開発日誌
GitHub - eduardotkoller/convForm: A jQuery plugin that transforms a form into a interative chat. 通常のフォームをインタラクティブなチャットフォームにする「convForm」 無機質なフォームに値を入れていくだけではなく、チャットに対する質問形式でフォームを埋めていくという新しいアプローチのフォームに変換できます。 誰かと会話しているような感じでフォームが埋まっていくので、コンバージョンが高まるかも。 一度A/Bテストでコンバージョンを測ってみたいですね。 関連エントリ デフォルトのフォーム要素を改善した「formbase」 複数ステップに分けたフォームが簡単に作れる「Multi-Step-Form-Js」
JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」 – bl6.jp
jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQueryプラグインです。ドラッグアンドドロップでの移動にも対応しているほか、キーボードもサポートしているとのこと。効率的にツリー構造を表示させたい人にはピッタリのjQueryプラグインですね。 jqTreeの実際のデモ動作は以下のページからチェックできます。 デモ デモではnode1やnode2などと書かれたツリー構造が設置されています。node1の下にはchild1とchild2が、node2の下にはchild3が入っていて、横にある下矢印をクリックすると、下にある階層のものが非表示になります。再度クリックすると表示されます。 また、jqTreeはドラッグアンドドロップにも対応しているのが特徴です。各項目をドラッグして好きな位置に移動できます。例えば、child1とchild2の順番を入れ替えたり、child1の下の階
高さ揃えのjQueryプラグインを比較してみた ｜ Tips Note by TAM
要素の横並びなど、高さを揃えたいときに使っているjQueryのプラグインをご紹介します。 jquery.heightLine.js jquery.tile.js jQueryAutoHeight.js jquery.heightLine.js $(".box0>div").heightLine(); オプションが豊富なのと、レスポンシブに対応しているので便利だと感じました。 maxWidthオプション：ウィンドウ幅640px以下の場合のみ高さを揃えたい場合はmaxWidthを指定。 $(".box1>div").heightLine({ maxWidth:640 }); minWidthオプション：上のmaxWidthの逆です。また、同時にも使えます。 destroyメソッド：設定されたheightLineを取り除きたい場合はdestroyメソッドを利用します。 $(".box0>div"
サムネイルをクリックすると大きな画像で表示する jQueryプラグイン Boxerを試してみた | WEB PIXY
サムネイルをクリックして大きな画像で表示するプラグインというと LightBoxが有名ですが、同じような機能を持った jQueryプラグインは数多く存在します。今回は、Boxerを紹介をします。 Boxerの使い方 GitHubに公開されている Boxerのページからデモファイルをダウンロードして、Boxerを実装するのに必要なファイルをサーバーにアップロードします。ファイルは、jquery.fs.boxer.min.js、jquery.fs.boxer.css、jquery.fs.boxer-icons.png、jquery.fs.boxer-loading-dark.gif、jquery.fs.boxer-loading.gifです。 <link href="css/jquery.maximage.css" rel="stylesheet"> <script src="http://a
要素をスクロールに追従させる jQuery プラグイン
Apple Store のサイドバーのように、要素をウィンドウのスクロールに追従させる jQuery プラグイン、jQuery Floating Widget を作りました。説明が難しいので、まずはデモをご覧ください! jQuery Floating Widget plugin demo このアイデア自体は新しいものではなくて、たとえば以下の記事で詳しく紹介されています: Fixed Floating Elements | jQuery for Designers - Tutorials and screencasts この方法で基本的にうまくいくんですが、フッターの高さがある程度あると、下までスクロールしたときに該当要素がフッター領域に食い込んでしまう場合があります。そこで、上記記事での実装を参考に、要素の「動ける範囲」を制限するための処理などを加えたものを考えてみました。 例として、フ
スクロールしても項目が分かりやすいヘッダー固定「jquery.stickyTableHeader」:phpspot開発日誌
GitHub - simonsmith/jquery.stickyTableHeader: Small, accessible sticky table header plugin スクロールしても項目が分かりやすいヘッダー固定「jquery.stickyTableHeader」 通常のテーブルの欠陥を補うプラグインです。 関連エントリ テーブルをサクッとレスポンシブ対応にする「resTables」 テーブルをブラウザ上で組み立てられるUI実装「a-table」 テーブル等のヘッダをスクロールしても超簡単に固定できる「jquery-sticky-header-footer」 テーブル行の詳細をクリックで開けるテーブル実装
smoothState.js - 滑らかな画面遷移を提供 MOONGIFT
スマートフォン向けのWebサイトなどでは画面遷移が大事です。普通のURLを遷移するような動きではUXがよくありません。新しいコンテンツがスライドしてきたり、前の画面と滑らかに入れ替わることでユーザの意識を切らさずに操作を継続できるようになります。 そうした動きをサポートしてくれるライブラリがsmoothState.jsです。履歴管理も行ってくれるライブラリです。 smoothState.jsの使い方 デモです。クリック時にコンテンツがスムーズに表示されます。 アニメーションのされ方も複数あります。 メニューで使うパターンです。 smoothState.jsを使うと画面遷移はもちろん、履歴管理も行ってくれます。スマートフォンはもちろんデスクトップブラウザでも利用できるでしょう。多くのフレームワークでは同様の機能がありますが、大げさになってしまいます。遷移機能だけ欲しい時に良さそうです。 sm
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コードサンプルをアニメーションしながら表示させるOSS・「GLORIOUS」 | かちびと.net
コンテンツのスクロールをスマホっぽくさせられる「ScrollBooster」:phpspot開発日誌
軽量のスライド式サイドメニュー実装「bigSlide.js」:phpspot開発日誌
複数ステップに分けたフォームが簡単に作れる「Multi-Step-Form-Js」:phpspot開発日誌
サイドバーをスティッキーに固定する「Sticky Sidebar」:phpspot開発日誌
パネルをくるりと回転させるアニメーションエフェクト実装「jQuery Flip」:phpspot開発日誌
jQuery＆Bootstrapで作ったシンプルなギャラリー「simplegallery」:phpspot開発日誌