checkboxやradioボタンを個性的なデザインにできるjQueryプラグイン「ezMark」:phpspot開発日誌
ezMark jQuery Plugin - Stylize Checkbox and Radio Button Easily checkboxやradioボタンを個性的なデザインにできるjQueryプラグイン「ezMark」。 次のようなデザインにすることが可能です。CSSをカスタマイズしてiPhoneっぽくすることも出来ます $(element).ezMark() とするだけでスタイリングできるのはいいですね。 関連エントリ フォームのユーザビリティに貢献するjQueryプラグイン ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 サイト内にTwitter投稿用のフォームを直接埋め込んでしまえるjQueryプラグイン「
jQueryの日本語の解説サイトと国産のプラグイン集
MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
HTML5で作られたフォームの入力チェックができる「jQuery Tools」 | Web活メモ帳
HTML5になってFormの要素が大幅に増えました。inputのtype属性にtel、url、emailなどの値が指定できたり必須属性を設定できたりするので、使いこなせれば便利になりますね。 しかし複雑なチェックやエラー表示のデザインを変更するにはJavaScriptを使う必要があります。 「jQuery Tools」を使う事で簡単に解決する事が可能になってます。 基本的なチェックは1行コードを追加するだけでできるようになるようです。 $("#myform").validator(); エラーメッセージのカスタマイズはCSSで実装できるとの事 /* error message */ .error { height:15px; background-color:#FFFE36; border:1px solid #E1E16D; font-size:11px; color:#000; pad
ドロップダウンメニューのデザインネタ帳:phpspot開発日誌
17 Effective Dropdown Menu resources | Underworld Magazines NYC | ドロップダウンメニューのデザインネタがまとまってます。 ソースを見ることもできるので、ドロップダウンメニュー実装の際に参考にされてみてはどうでしょうか。 ドロップダウンといっても様々なデザインのアプローチがありますね。 関連エントリ CSS3を使ったMacライクでクールなドロップダウンメニュー「CSS3 Dropdown Menu」 複数選択が可能でスタイリッシュなドロップダウンメニュー実装用「jQuery MultiSelect Plugin」 クールにアニメーションする水平ドロップダウンメニュー実装jQueryライブラリ
WEBデザインのワイヤーフレームを書くためのツール10選「10 Excellent Tools for Creating Web Design Wireframes」
WEBデザインのワイヤーフレームを書くためのツール10選「10 Excellent Tools for Creating Web Design Wireframes」 WEBデザインと言っても様々なフローがあり、受注を受けたとき、いきなり、Fireworksやphotoshopでデザインを始めるという方はなかなか少ないと思います。今回はデザインの前段階のワイヤーフレームを描くためのツールを集めたエントリー「10 Excellent Tools for Creating Web Design Wireframes」を紹介したいと思います。 .mockflow.com/”>MockFlow 基本的にモックアップをつくるための前段階のものなので、そこまで複雑な表現はできませんが、WEBのワイヤーを作るという意味で、様々な便利な機能が組み込まれています。今日はまとめられているツールのなかからいくつ
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+ サンプルデモのメニュー部分をクリックしてみてください。 右上にローディングのマークが若干出て、さらにアコーディオン風に内容が変わります
MOONGIFT: » jQTouch用のjQuery拡張「jQExtensions」:オープンソースを毎日紹介
jQExtensionsはjQuery/JavaScript製、iPhone/iPod Touch用のオープンソース・ソフトウェア。iPhone向けのWebサイトを開発する場合、いわゆる携帯サイトのように幾つかの特徴がある。とはいえPCのWebブラウザ並みの機能はあるので携帯電話ほどの制約はない。 フローティングウィンドウ ほとんどがデザイン的な特徴になる。既に幾つものデザインフレームワークが存在し、それらを上手に使うことで手早くiPhone向けサイトの開発が出来るようになっている。その一つとして知られるのがjQTouchであり、jQueryならではの拡張を行ったのがjQExtensionsだ。 jQExtensionsはjQTouch用の拡張を提供している。一つはフローティングウィンドウで、スライドさせても常に画面上部に表示される小窓機能だ。クリック一つで消したり、表示/非表示が切り替え
AJAXとCSSで作るクリエイティブなフォーム集「Astounding Ajax/CSS Forms: 30+ Modern Trends」
TOP > WebDesign > AJAXとCSSで作るクリエイティブなフォーム集「Astounding Ajax/CSS Forms: 30+ Modern Trends」 ユーザーとコンタクトが取れる窓口的な役割を持つフォーム。ユーザーが実際に使う部分だけに、そのデザインやわかりやすさ使い勝手によって、目的が達成できるかどうか大きく変わります。今回紹介するのはAJAXとCSSで作るクリエイティブなフォーム集「Astounding Ajax/CSS Forms: 30+ Modern Trends」です。 jQuery inline form validation ちょっとした仕掛けがあるものから、見た目が美しいもの、入力補助が効くものなどなど、様々なフォームがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■H
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
CSS3を使った凄いアニメーション集４７:phpspot開発日誌
CSS3を使った凄いアニメーション集４７ CSS3を使った凄いアニメーション集がまとまったエントリが公開されています。 注意点としてCSSだけで実現しているわけでなく、jQueryなども使っている部分があります。 ただ、こういうことも出来るのか、という物が沢山で見ていて楽しく学習できます。 CSS3/jQuery Clock 一見Flashかと思えるような綺麗な時計のサンプル Multiple 3D Cubes with animation using CSS 3Dのキューブがなめらかにアニメーションします。 CSS3 Matrix Animation マトリックスアニメーション OS X Dock Mac OS X風になめらかに動作するドック 今の時期だと、CSS3で出来ることはまだ出尽くしていないと思うので、驚きのエフェクトを作れば世界をワッと驚かせることが出来るかもしれませんね。
)
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」:phpspot開発日誌
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」 2009年10月23日- JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」というサイトを発見。 ちょっとした動作確認用のコードを書いたり、入門者の方がJavaScriptを学ぶのに非常に有用ですし、その結果も保存してサーバに置いてホスティングしてもらうことも可能。 また、比較的面倒なjQueryやjQuery UI、prototype.js 等の有名どころのフレームワークを簡単に読込めて使える機能もあります。 サイトを開くと、まず3つのタブがあって、JavaScript のタブにはJSを、HTMLのタブにはJavaScript から操作するHTMLを、Output には実行結果が出力されるようになっています。 JavaScript
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
わずか8KBのjQuery用カレンダープラグイン「CalendarPicker」 | Web活メモ帳
http://moto-mono.net/2009/07/07/jqueryplugins-i-have-used.html
css-lecture.com
IDEA * IDEA
[JS]ブラウザのサイズに合わせてレイアウトがアニメーションで変更されるスクリプト -Sliding Resizable Grid
Twitterのような通知バーを実装するjQueryプラグイン – creamu
マウスオーバー時にリンクが右にずれるjQueryプラグイン – creamu