紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 前回のjQueryのプラグイン33+1選 -2007年9月と合わせて、参考ください。 lightbox for jQuery jQu
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 前回のjQueryのプラグイン33+1選 -2007年9月と合わせて、参考ください。 lightbox for jQuery jQu
よく、誕生日の入力などでドロップダウンリストから選ばせるものがあるが、あれほど入力が面倒なものはないと思っている。テキストボックスにそのまま数字で入れた方がよっぽども手軽だ。 とは言え、入力チェックやユーザビリティを考えるとそれもお勧めはできない。手軽で、さらに正確な入力が促せる方法としてこれをお勧めしたい。 今回紹介するオープンソース・ソフトウェアはprotocalendar.js、prototype.jsベースのカレンダー入力ライブラリだ。 protocalendar.jsはテキストボックスにフォーカスが当たるとカレンダーが表示されるライブラリだ。良くあるものだが、prototype.jsベースなのと、何より日本製というのが特徴だ。 日本製の嬉しい点としては、休日に対応している点だろう。ハッピーマンデーにも対応しているので、数年後の休日も表示されるのが素晴らしい。 さらに多言語対応によ
※ 画像は公式サイトデモより 人間は面白いもので、自分の好きな情報だけを見るようにフィルタリングをかけることができる。文字が見づらいコンピュータでは特にそうだ。書いてあるにも関わらず入力エラーが起こるなんて良くあることだ。 そして、それらの入力エラーはユーザにとって非常にストレスになる。自分自身、エラー画面で面倒になって止めてしまうなんてざらだ。そうした機会損失を防ぐためにもこのライブラリを使ってみよう。 今回紹介するオープンソース・ソフトウェアはLiveValidation、その場で行う入力チェックライブラリだ。 LiveValidationはJavaScriptベースの入力チェックライブラリで、特徴は何といってもその場で入力エラーをチェックできることにある。フォーム送信時にまとめてチェックすることもできる。いずれにせよエラーがあった際にはデータは送信されないのでユーザビリティは高い。
ログインが必要なサイトの多くは、IDとパスワードを入力するフォームが設置されています。 通常、このようなフォーム内のパスワード部分に入力した文字は盗み見防止のため、「********」のようなアスタリスクになって文字が隠されるようになっていますが、しばしば、この入力したパスワードを確認したい状況になる場合も少なくありません。 このようなケースに役立つハックの紹介。 以下のJavaScriptをアドレスバーに入力すると、次のようなダイアログ内にパスワードが表示されます。 javascript:(function(){var s,F,j,f,i; s = ""; F = document.forms; for(j=0; j<F.length; ++j) { f = F[j]; for (i=0; i<f.length; ++i) { if (f[i].type.toLowerCase() ==
これはすごい・・・。 TIDEは「Tiny IDE(統合開発環境)」の略らしい。 そのシンプルな名前にたがわず、実に手軽にJavaScriptを書いて、テストすることができる。日本語もきちんと通るようだ。 しかもIDEだけあって、変数の中身をウォッチしたり、ステップごとに実行していくことが可能だ。 JavaScriptは慣れていないとどうにもとっつきにくかったりするが、こうした環境があればその動作を確認しながら学習していくことができるだろう。 まだベータ版ということで多少のバグがあるようだが、これからJavaScriptをやってみよう!と思われている方にはお勧めだ。
Starbox - Rating stars for prototype Starbox allows you to easily create all kinds of rating boxes using just one PNG image. 綺麗にアニメーションする星型投票作成用JavaScriptライブラリ「Starbox」。 次のように、見栄えも綺麗で、カーソルを離すとアニメーションしてくれます。 実装は、次の流れで簡単に実装できます。 <script>タグでprototype.js等、必要ライブラリを読み込み CSSを読み込み、かつ画像をcssと同じパスに設置 new Starbox で初期化。コンストラクタに渡すオプションで挙動の調整が可能 自分でスタイルしてオリジナルの投票インタフェースを作るのもよさそう。 ライブラリ自体は、prototype.js/script.acu
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
Yetii - Yet (E)Another Tab Interface Implementation Yetiiのスクリプトは、わずか4KBの軽量スクリプトで、CSS・JavaScriptオフ時への対応、自由なクラス名の設定、タブの順番の入れ替え、タブの自動遷移、複数タブの設置などに対応しています。 ※動作には、PrototypeやjQueryなど他のスクリプトは必要ありません。
WEB開発に活用できるIE版のFireBug「DebugBar 5.0 beta」を試してみました 2007年11月15日- My DebugBar | ToDo / Beta This new version introduces a new DOM tab with greatly improved features on the css side and is fully unicode ! WEB開発に活用できるIE版のFireBug「DebugBar 5.0 beta」を試してみました。 DebugBar をインストールすると、DebugBarツールバーとDebugBarエクスプローラーバーがインストールされます。 DebugBarツールバーでは次のことが出来ます。 ブラウザ画面のキャプチャをメール送信 カラーピッカー 特定の画面解像度にリサイズする機能 ページの表示を 10%
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ!ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの!? めっちゃ簡単(で、ちょっとだけ適当)なDOM 3 XPath の説明をします><。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね? DOM 3 XPath
Scripteka :: Prototype extensions library Prototype.js (+Script.aculo.us)を利用して作られたJavaScriptライブラリまとめサイト「Scripteka」 例えば、次のようなPrototype.jsを使ったライブラリが紹介されています。 アコーディオン カラーピッカー ツールチップヒント 日付入力補助ウィジェット ライブラリ探しのヒントに。 関連エントリ prototype.jsベースのリアルタイムバリデートJSライブラリ「JSValidate」 Prototype.jsベースのUIライブラリ「Prototype UI」 prototype.js逆引きサンプル集 - JavaScriptist
どうも、「公開APIを利用したサンプルサイトを作っていくよ」管理人のZAPAです。 今日は、マッシュアップツールを作るための第一歩として、「iGoogleガジェット」の開発方法を解説します。 「Googleからのプレゼントが届いたよー!!!」に登場した、iGoogleガジェット。 「ガジェット大好き!」って人も、「これからの時代はガジェットだ!」って人も、「ガジェットって何だろう?」って人も、これからの時代は自分でガジェットを作れるとカッコイイと思うよ!!iGoogleガジェットに興味を持っても、開発情報を調べるのはなかなか大変です。 公式サイトに重要な情報はたくさん載っていますが、コンパクトにiGoogleガジェット開発方法を理解できるページがありませんでした。 公式ドキュメントをマジメに読むと30分以上かかり、やる気がそがれてしまいますので、ここに「iGoogleガジェット開発方法」を
#ff0000">2008年12月29日追記:逆再生する新バージョン「HTML崩壊Reverse! meltdown2.js」をアップ #ff0000">2009年4月21日追記:さらに進化したバージョン「HTMLの暴走(meltdown3)」をアップ まずは軽いページでお試しください。例えば Google とか。*1 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown/meltdown.js?"+da.getTime(); document.body.appendChild(s)})(); これを適当なページのアドレスバ
Ext JSとprototype.jsで作るリッチなUI:パターンとライブラリで作るAjaxおいしいレシピ(3)(1/4 ページ) 今回は話題のExt JSを使ったサンプル Ext JSはAjaxアプリケーションを構築するためのJavaScriptライブラリ(フレームワーク)です。Ext JSを使用することで、デスクトップアプリケーションのようなユーザーエクスペリエンスを提供できます。2007年10月11日に2.0のベータ版がリリースされ大変注目を集めました。 今回はそのExt JS 2.0のベータ版を使ったサンプルを紹介していきます。 ■ ごく普通の入力フォームのサンプル まずこちらのサンプルを見てください。 今回のサンプルプログラム(拡大表示はこちら、※注意1:FireBugを有効にしている場合は動作が重くなる場合があります。一時的にFireBugをオフにして利用されることをおすすめし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く