「ほっ」と。キャンペーン

カテゴリ:jQuery デモ( 1 )

jQuery デモ

jQuery デモ

CLEditor

WISYWIG のHTML エディタをインストールできるプラグインを使ってみた。ダウンロードサイトは http://premiumsoftware.net/cleditor/. body のテキストエリアを簡単にエディタに変身。このデモでは jquery.indent.js を使って、HTML 文書のソースを整形している。

markItUp!

body のテキストエリアをマークアップ補助のできるエディタに変えることができる jQuery のプラグイン。http://markitup.jaysalvat.com/home/ からダウンロード。チュートリアルのデフォールトの設定をしただけ。

jQuery HTML Editor

オリジナル。jQuery のコマンドを使ってDOM要素を操作できる。jQuery の学習用。プラグインではない。

Test Bed

オリジナル。jQuery をインストールしただけの白紙のページ、Google Chrome の JavaScript コンソールや FireBug でコントロールする。直接 body に記入することはできないが、jQuery で普通に書き込んでいけるので、ちょっとしたテストには便利。

付箋

オリジナル。jQuery UI の練習で作った。画面左上の付箋のテキストエリアにメモを書き込める。付箋の上の方のハンドルをドラッグすると位置を変えることができる。

プレゼンテーション

オリジナル。jQuery を使うとプレゼンテーションソフトの骨格を簡単に作ることができる。


jQuery のプラグインの導入は非常に簡単だ。ライブラリをインクルードして、操作したい対象の jQuery オブジェクトを作ってそれを初期化するだけだ。オープンソースのプラグインが多数あるのもうれしい。
[PR]
by tnomura9 | 2010-12-31 16:22 | jQuery デモ | Comments(0)