MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
jQueryの日本語の解説サイトと国産のプラグイン集
MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
[JS]フォームの入力欄にラベルをくっきりうっすら表示するスクリプト
フォームの入力欄にラベルを通常時にくっきり、フォーカス時にうっすらとアニメーションで表示するスクリプトを紹介します。 jQuery FormLabels Plugin デモページ スクリプトの特徴 クロスブラウザ対応。 ラベルをアニメーションで表示。 多数のオプションと旧式ブラウザへの配慮。 フォームのマークアップを変更しないシンプルさ。 フォームのラベルはinput要素と同じスタイルが可能。 パスワードのラベルはアスタリスク（*）ではなく、テキストで表示。 スクリプトのデモ デモページではいくつかのデモがありますが、デフォルト版のものをキャプチャで紹介します。 デモページ 入力時には入力したテキストが反映されます。 スクリプトの仕様 以下のフォームの要素に対応しています。 input[type='text'] input[type='email'] input[type='passwor
竹取 JS
画面をダブルクリックで縦書きと横書きを切り替えることができます。要素を指定して縦書きにしている場合は、次回アクセス時に同じ表示が引き継がれます。 どんなサイトでも縦書きにするブックマークレット。 ↓右クリックで「お気に入り」に保存するか、リンクをドラッグしてブックマークバーにドロップします。 「縦書きにする・iPhone 用リンク」 「縦書き可能にする・iPhone 用リンク」 「段組み縦書き可能にする・iPhone 用リンク」 iPhone に登録するには？ とりあえずこのページを共有ボタンからブックマーク。 iPhone 用リンク を長押ししてコピー。 ブックマークを開いて、追加したブックマークを「編集」。 名前を「縦書き可能にする」などに変更し、URL 欄に上記コードをペースト。 最初の「http://」を削除。 注意！ やや動作が重いです！ うまく変換できなかったときは、画面をダブ
[JS]あなたのウェブページを52の言語に自動翻訳するボタンを簡単に設置できる -Translate This Button
<textarea name="code" class="html" cols="60" rows="5"> <!-- Begin TranslateThis Button --> <div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script> <script type="text/javascript"> Trans
今日から現場で使えるjQueryのフォーム関連プラグイン15選
Webサイト制作で欠かせないのがフォーム。 これらは購入時や、お問い合わせ、ログインと言ったパーツで良く使われます。 今回はそんなフォームにスポットを当てて、なるべく使いやすく、導入しやすいものをご紹介いたします。 ただし、あくまでもjQueryプラグインのご紹介なので、よくわからないと言う方は華麗にスルーしてください。細かい導入方法までは説明しません。 機能性重視プラグイン In-Field Labels jQuery Plugin フォームの中に入っている文字がオンクリックでうっすらと消えていくプラグイン。 なかなかいい感じ。 Create a Progress Bar With Javascript | Nettuts+ demo シームレスにフォームの内容を変え、さらにどれくらい進んでいるかが％で確認できる。 overset - jVal - jQuery Form Field V
ユーザがアイドル状態になったかどうか確認できるjQueryプラグイン「IdleChecker」:phpspot開発日誌
Idle Checker : by Kevin Lint ユーザがアイドル状態になったかどうか確認できるjQueryプラグイン「IdleChecker」。 ユーザがブラウザ上で操作しているうちはいいのですが、席をたったりした場合にログアウトを発生させたいようなケースがありますね。 会社なんかで画面をそのままにして席をたった後、ログイン状態のままだと誰かに操作されてしまう危険性がありますが、自動でログアウトを実装する仕組みがこのプラグインで実現出来ます。 デモページを見ると、ページ内でいる時間数がどんどん上がっているのが確認できます。クリックするとリセットされます。 プラグインのメソッドに、タイムアウト秒数や、ログアウトURLをパラメータとして渡しておくことで、指定した時間がくればログアウトURLに移動するようなことが簡単に実装出来ます。 ログアウトした際の例 使い方は以下のようにオプション
あなたのWebを入力しやすくするjQueryプラグイン10選
あなたのWebを入力しやすくするjQueryプラグイン10選：CSSの書き方も分かるjQueryプラグイン実践活用法（終）（1/5 ページ） jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 前回の「画像や動画を綺麗に回転/拡大するjQueryプラグイン」では、イメージを回転させたりズームインする「jCarousel」「Zoombox」プラグインの使い方を解説しました。今回は、フォームを使いやすくするための各種プラグインを、以下のようにチェックボックス／ラジオボタン、ドロップダウンリスト、テキストボックス／テキストエリア、フォームのカテゴリ別に分類して紹介します。
IE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」
TOP > WebDesign > IE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」 WEBサイト構築においてもはや常識となったCSS。新たな仕様のCSS3が整備されつつあり、表現の幅をさらに広げてくれるものになっていますが、最新のブラウザのみ対応しており、IE6のようなシェアがある旧世代のブラウザは対応していないというのが現状です。そこで今日紹介するのはIE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」です。 全てのCSS3のプロパティが適応されるのではなく、角を丸くしたり、ボックスに影を入れたりテキストに影を入れたりといったCSS3の機能をスクリプトにｙほって再現するというものです。 詳しくは以下 スクリプトを読み込ませると言
ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」:phpspot開発日誌
ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」 2010年06月10日- Video LightBox - Embed video to your website with beautiful Lightbox effect! ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」。 名前から推測するに、単に動画をLightBox化しただけでしょう、と思いきやなかなか素晴らしいプラグインになっていたのでご紹介です。 動画のサムネイルを次のように様々なスキンによって修飾できます。クリックすればニュイーンとLightBox表示されるというオシャレさ加減がいいです。 更に埋込可能な動画形式が豊富で、flv, mp4, 3gp や、外部動画サイトのYoutube, Facebook, Goo
右クリックどころかクリックすらも禁止するjQueryプラグイン jDTNeverClick :: 5509
右クリックを禁止してるサイトありますよね？あれのうざさは僕が言うまでもないと思いますが、クリック・ダブルクリックまで禁止されてたらどうでしょう。考えただけで鬱陶しいですね。 ユーザーのうざがってる顔が見たいという鬼畜なあなたのために、右クリックどころかクリック・ダブルクリックすら禁止するjQueryプラグイン作りました。 導入方法 1. jQueryとjDTNeverClickを読み込む 2. 実行する $()で対象にする要素を指定します。 jQuery(function($) { $(document).jdtNeverClick(); }); オプション オプションを使えば、割り当てるlistenerとアラートの表示非表示・文章を変更できます。 オプション項目 内容
jQueryで作るGoogleカレンダークローン·wdCalendar MOONGIFT
wdCalendarはWebベース/jQuery製のオープンソース・ソフトウェア。Googleの中でも人気の高いプロダクトの一つがGoogleカレンダーだ。Ajaxを駆使し、まるでデスクトップアプリのような操作が可能だ。スケジュールはビジネス/プライベートを問わず利用できる。 スケジュール登録画面 そんな便利なツールだけに、自前のスケジュールアプリにもあのような機能を持たせたいというニーズは強くある。逆に言えばスケジュールアプリを作る上であのインタフェースと操作性は欠かせない存在になっている。それを実現するのがwdCalendarだ。 wdCalendarはjQuery製のオープンソース・ソフトウェアで、そのインタフェースはまさにGoogleカレンダーだ。マウスでドラッグして予定を作成したり、その詳細を記述（編集する際には自分でwdCalendarを立てる必要がある）することができる。 月
[JS]使い方も簡単、画像をフェードで切り替える超軽量スクリプト -hoverFade
既存のページに導入するのも簡単な画像をフェードで切り替えるスクリプトをDan Wellmanから紹介します。 フッタのアイコン 実装方法 フェードで切り替える画像のエレメントに対して、hover時に画像が切り替わるように設定します。その際に使用するクラス名は「hover-css」が初期設定です（変更可能）。 これはもしJavaScriptがオフの環境でも、ホバーがCSSで行われるようにするためです。 次にスクリプト用のクラスを用意します。初期設定は「hover-anims」で、「hover-css」と同様に画像が切り替わるように設定します。 これはスクリプトで利用するクラスで、その際にCSSのクラスは削除されます。 jquery.jsとhoverfade.jsを外部ファイルとして配置します。記述位置の理想はHTMLの終わりです。 HTMLにさきほどのCSS用のクラスを記述します。 また、初
ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」:phpspot開発日誌
jQuery.upload: A simple ajax file upload plugin ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」 同じページ内に生成したiframeへデータをPOSTすることで、非同期にファイルをアップロードが可能にするものです。 ファイルを選択すると即時にアップロードが開始するのが特徴 アップロードを完了すると次のように、ファイル名・サイズといったファイル情報が表示されるデモが公開されています。 ファイルアップロードを頻繁に行うようなケースにおいて、便利に使えるインタフェースが組み込めそうですね。 関連エントリ ajaxファイルアップロードに使えるjQueryプラグインいろいろ PHPでファイルアップロードの処理を超簡単にするクラス例「EasyUp」 ファイルアップロードの際に便利なFlash/JavaScri
IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」:phpspot開発日誌
IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」 2010年05月25日- jStorage - simple JavaScript plugin to store data locally IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」。 基本はHTML5のストレージを使いますが、対応していないブラウザは、例えばIEではuserDataを使ってデータを格納します。 ライブラリ内でクロスブラウザ対応はしてくれるので、利用者はただ jStorageのメソッドを呼び出すだけでストレージを利用できます。 ブラウザごとのサポートと、ストレージサイズは以下。IE6,7 が 128KBと、比較的小さいですが、それなりに大きなデータを保持できることが分かります。 基本とするフレームワークライブラ
透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_belatedPNG.js IE6でも透過PNGを実装できるライブラリ。class名等を指定
ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」:phpspot開発日誌
ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 2010年05月19日- Plugins | jQuery Plugins ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」。 ドロップダウンメニューといえば、複数のアイテムが表示され、クリックするとページ移動するというのが普通の動きですが、ドロップダウンメニュー内に好きなコンテンツを入れこんでしまうことが出来るのがMegaMenu。 一見何の変哲もないナビゲーション マウスオーバーすると、テーブルコンテンツがアニメーションしながら表示されます。 フォームだって埋め込んでしまえます。ログインフォームなんかを置くといいのかも リストも次のように綺麗に表示されます。リンクを貼って普通にメニューのように使うことも出来ますね。
HTMLDocument の動的な作成: Days on the Moon
ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre
textareaの選択範囲を取得し、前後に文字列を挿入する - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 textareaの中で選択した文字列の前後に、任意の文字列を挿入するJavascript。流れとしては、まず選択領域の始点と終点の位置を取得し、その境界を基準にしてtextareaの文字列全体を分割。そして加工して組みなおす。 始点と終点の位置は、Mozillaおよび（最近の）Opera/Safariでは容易に取得できる。問題はIE。IEのTextRangeオブジェクトは、後のコンテクストを見て処理を行うことが難しいため、特にtextarea内の文字列を操作したい場合は厄介です。 逆に言えば、始点と終点の位置さえ判ればなんとかなるので、いろいろ試してみてなんとか形に出
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/06/jquery-forms.html
HTML5.JP - 次世代HTML標準 HTML5情報サイト