[B! *javascript] vanillateのブックマーク

[JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2

jQueryなどの他のスクリプトに依存せずにモーダルウインドウを実装する高性能で超軽量（5KB）のスクリプトを紹介します。 JavaScript Modal Windows – TinyBox2 デモページ [ad#ad-2] TinyBox2のデモデモはシンプルなモーダルウインドウから、アニメーション付き、AJAX対応、iFrame対応、画像対応などがあり、どれも実用的なものとなっています。ウインドウをクローズする際はクローズボタン、もしくはウインドウ外のクリック、「ESC」キーの操作に対応しています。デモページ：No Animation, No Close Button, Auto Width/Height, Custom Styling アニメーション：無し、クローズボタン：無し、幅と高さ：自動、カスタムスタイリング

vanillate 2011/03/30

もーだるー

*javascript

リンク

[JS]わずか1KBの水平方向に伸縮するアコーディオンのスクリプト

LEIGEBERのエントリーから、水平方向にスムーズに伸縮するアコーディオンのスクリプトを紹介します。 Horizontal JavaScript Accordion 1kb アコーディオンのスクリプトはjQueryやPrototypeなどの他のライブラリに依存することなく単独で動作する、1KBに満たないスクリプトです。アコーディオンの各項目は、リスト要素になっており、画像やリンクなどを配置することができます。動作環境は、IE6, IE7, Firefox, Opera, and Safari となっています。

vanillate 2011/03/29

*javascript

リンク

5509.me

This domain may be for sale!

vanillate 2011/03/07

ふわっと

*javascript

リンク

ブロックレベル要素の高さを揃えるheightLine.js[to-R]

ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。このライブラリは新バージョンがあります。レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja

vanillate 2011/03/06

*javascript

リンク

webデザイナーのためのjQueryベストプラグイン＆チュートリアル10個

かなり人気のあるjQueryですが、そんなjQueryの私個人が選ぶ素敵なプラグインとチュートリアル10選。とりあえず定番的なものをどうぞ。ちなみにjQueryを自作できるレベルまで手軽になりたい人は以下記事参照。 web制作の現場で使うjQueryデザイン入門が激しくお勧めな件タグクラウドの細分化 jquery Hover Sub Tag Cloud - Noupe サンプルデモこれかなり好き。タグクラウドをさらに細分化させて表示させてます。こういう発想は今までなかったので最初見たときちょっと感動しましたね。ローディングページ How to Load In and Animate Content with jQuery | Nettuts+ サンプルデモのメニュー部分をクリックしてみてください。右上にローディングのマークが若干出て、さらにアコーディオン風に内容が変わります

vanillate 2010/03/03

リンク

オシャレにフォームのエラーをヒント表示してくれるjQueryプラグイン「Ketchup」:phpspot開発日誌

Ketchup Plugin オシャレにフォームのエラーをヒント表示してくれるjQueryプラグイン「Ketchup」。次のように、Submit した時点でのエラー表示を吹き出しつきの枠をもってわかりやすく表示してくれます。地味にアニメーションする部分もいいです。 Validateというと、どういう値が正しいかという指定が必要なのですが次のように class に指定することで定義するようです。 class に指定するということで好き嫌いが分かれそうな気もしますね。ちょっと改造してもよさそうです。 <input type="text" class="validate(required, username, rangelength(3,20))" /> max, min, range, digits, mail, url など、基本的なバリデート指定は最初から実装されているみたいです。関連

vanillate 2010/02/21

リンク

ラベル入りのフォーム要素を実装する方法2つ – creamu

最近のフォーム要素にはラベル（透かしテキスト）を入れているものが多いですが、通常の実装方法は以下のソースで可能ですね。JavaScriptのonfocus、onblurイベントハンドラでvalueを切り替えています。 XHTML, JavaScript <input type="text" value="メールアドレス" id="em ail" onfocus="if (this.value == 'メールアドレス') {this.value = '';}" onblur="if (this.value == '') {this.value = 'メールアドレス';}" /> これは使いやすいんですが、ソースが綺麗じゃないのと、これからはよりリッチなインターフェースが求められるので、もう少し自然な動きだといいですよね。そこで、jQuery In-Field Label Pluginを使えば

vanillate 2010/02/20

リンク

35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects - noupe

35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects By Angel Wardriver jQuery can empower a developer with the tools required to create a rich user experience. The way in which we display images, text, charts and graphs can enhance functionality for the wide range of users. Let's take a look at 35 powerful and effective jQuery plugins and techniques for slideshows, graphs and text eff