表示されたブラウザの幅に合わせて、ぴったりになるようにカラムの幅や数を自動調整するスクリプトをSoh Tanakaから紹介します。
[JS]リキッドレイアウト上のカラムの幅や数を自動調整するスクリプト -Smart Columns
表示されたブラウザの幅に合わせて、ぴったりになるようにカラムの幅や数を自動調整するスクリプトをSoh Tanakaから紹介します。
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」:phpspot開発日誌
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」 2009年05月28日- jQuery Ribbon - Home これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」。 利用すれば、コントロールのグルーピングや、ドロップダウンメニュー、階層リストなどのリッチなコンポーネントが実装できるみたい。 jQuery Ribbonを使ったリッチなＵＩ。Windows7っぽいデザインのＵＩがJavaScriptで。 アイコン付きのかっこいいメニュー 表示しているＵＩのテーマを選べる アイコンつきリスト アイテムのグルーピング ドロップダウンメニュー ちょっとこれは素晴らしいですね・・・。jQueryの優位性がますます高くなってしまいましたね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイ
JavaScriptから簡単に使えるFlashビデオプレイヤー「Flowplayer」:phpspot開発日誌
Flowplayer - Flash Video Player for the Web JavaScriptから簡単に使えるFlashビデオプレイヤー「Flowplayer」。 FlashビデオプレイヤーをJavaScriptから再生、停止させたりすることが簡単にできちゃいます。 使い方は無茶苦茶簡単です。 // id="player" の div に動画を埋め込みます。"my-video.flv"を再生します $f("player", "flowplayer.swf", "my-video.flv"); // プレイヤーのバージョンを得ることもできます $f("player").getVersion(); // 再生の制御をすることもできます $f(0).play(); // 停止の制御をすることも可能 $f().stop(); FlowPlayerのAPIリファレンス 動画をとって f
オブジェクト指向っぽい話が分かるかもしれないJavaScript講座 その1 | Takazudo Clipping*
自分はスーパーJavaScripterでこんなすげーのが5行で書けちゃう。やばいだろ！とかいうのでは全然無いですが、オブジェクト指向っぽい話が最近分かってきたつもりで、それでやっときゃ問題無いってことを思い始めているので、なんかそんな話を書いていきます。 こんな短く書くテクニックがあるぜ！ var hoge = hage ? huga : hoga; とか書けちゃうんだぜ！とかより、長くていいから分かりやすく拡張しやすいようにするにはどうするのかとか、そういう話ができればなーと思います。内容的には全くもって新しくも何とも無いですが。jQuery使ってやる前提です。 まんじゅう製造スクリプト 今日はまんじゅうを5個作ります。なんと、まんじゅうは、クリックすると隠れます。 まんじゅうサンプル var Manju = function(){ this.elem; this.hidden = fa
Webデザインを向上させる8つのレイアウト | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Webデザインにおいて、コンテンツをどのようにまとめ、どのレイアウトで表現するかは大事な課題だ。すでによく使われているレイアウトと、それが何の目的で使われているのかは明かになっている。そうした人気のあるレイアウトとその目的を知ることは、Webページをデザインする際の資料として活用できる。 Matt Cronin氏がSmashing Magazineにおいて8 Layout Solutions To Improve Your Designsのタイトルのもと、使いやすい8つのレイアウトとテクニックについてまとめている。Webデザイナは一度チェックしておきたい内容だ。紹介されているレイアウトは次のとおり。 ス
Javascriptのメニュースクリプト30 – creamu
Quenessというサイトで、Javascriptのメニュースクリプトがまとまっています。 ざっといくつかご紹介。 ・アコーディオンメニュー » Dynamic drive Accordion menu » i-MarcojQuery Accordion Menu ・Dockメニュー » MacStyleDock » Mootool Fisheye ・ドロップダウンメニュー » Superfish Menu » jQuery Context Menu ・スライドメニュー » Slide Menu » iPod Drilldown Menu ・ツリーメニュー » Tree Panel » Sitemap Styler その他のリストは以下からどうぞ。 » 30 Javascript Menu Plugins and Scripts 昨日は焼肉。うまかった〜。
滑らかにアニメーション動作してナビゲーションにも使えそうな1KBのアコーディオンＵＩ:phpspot開発日誌
Horizontal JavaScript Accordion 1kb - Web Development Blog 滑らかにアニメーション動作してナビゲーションにも使えそうな1KBのアコーディオンＵＩ 次のように、マウスをあわせると、ホバーした部分がビヨーンとアニメーションしながら伸びるＵＩ実装用のサンプルが公開されています。 設置手順がすごくシンプルです (1) HTMLを定義します <ul id="sm" class="sm"> <li><img src="images/1.gif" alt="" /></li> <li><img src="images/2.gif" alt="" /></li> <li><img src="images/3.gif" alt="" /></li> <li><img src="images/4.gif" alt="" /></li> </ul> (2
Firefox 拡張を jQuery で書く！ Jetpack を使ってみた。 - IT戦記
はじめに JavaScript が書ければ、誰でも簡単に Firefox の拡張が書けてしまう。しかも、もれなく jQuery が付いて来る！ というものを Mozilla Labs がリリースしたみたいですね。 https://jetpack.mozillalabs.com/ というわけで 少し触ってみました Jetpack Feature の書き方 Jetpack で書く Firefox 拡張を「Jetpack Feature」といいます。 これは、以下の 2 つのものを用意すれば誰でも簡単に公開することが出来ます。 JavaScript ファイル 公開用 HTML ファイル JavaScript ファイル JavaScript ファイルには、 Jetpack Feature のアプリケーションコードを書きます。 (function() { Jetpack.statusBar.appe
Twitterのメッセージをページに載せられるJavaScript「Twitter.js」:phpspot開発日誌
Add Twitter to your blog (step-by-step) Twitterのメッセージをページに載せられるJavaScript「Twitter.js」。 Twitter.jsを使えばJavaScriptオンリーでTwitterのメッセージが載せられるみたい。 実装方法は以下の2ステップで簡単 (1) HTMLコンテナの定義 表示させたい位置に以下のHTMLコードを記述 <div id="tweet"> <p>Please wait while my tweets load <img src="/images/indicator.gif" /></p> <p><a href="http://twitter.com/rem">If you can't wait - check out what I've been twittering</a></p> </div> (2)
[JS]jQueryのプラグイン33+1選 -2009年5月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Beautiful jQuery sliders 洗練されたインターフェイスの画像ギャラリー。 BigPicture パネル表示やギ
いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
Ajaxで実現するエフェクト20選「20 More Excellent AJAX Effects You Should Know」
最近ではライブラリも多数リリースされ、様々な所で使われている「Ajax」簡単に高度なエフェクトや動作が導入可能ですが、今日紹介する「20 More Excellent AJAX Effects You Should Know」はAjaxで実現するエフェクトをまとめたエントリーです。 GlassBox 様々なAjaxのサンプルが紹介されていますが、今日はその中からいくつか気になった物を紹介したいと思います。 詳しくは以下 ■LightWindow YouTubeに動画、画像、PDFファイルと様々なメディアに対応したライトボックスエフェクト。 ■Unobtrusive Table Actions テーブルの各ブロックにエフェクトを付与できるAjax。データを見せるページには便利に使えそうです。 ■iCarousel plugin イメージをスライダー形式で表現できるAjax。 ■Validat
JavaScriptでとっても滑らか！画像切替のシンプルな技 (1/5)
「優れたデザインのWebサイトを探したい」。そんなときに役立つのが、Webデザインのギャラリーサイトです。美しいWebサイトのサムネイル画像がずらっと並ぶギャラリーは眺めているだけでも楽しく、新しいデザインのアイデアを考える刺激を与えてくれます。 「cssfights.com」もそうしたギャラリーサイトの1つですが、ユニークなのはWebサイトを“対決させる”というコンセプト。cssfights.comのトップページには2つのWebサイトのサムネイルが表示され、好みのサイトを選ぶよう促されます。ギャラリーページは、この対決の戦績（投票結果）順にWebサイト名が並んでいるので、いまどういったデザインが好まれているのか、一目で分かる作りです。 今回は、このcssfights.comの“技”をお手本とさせてもらいましょう。 今回のお手本サイト：『cssfights.com』 優れたレイアウト／デザ
入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」:phpspot開発日誌
ToggleVal :: jQuery Plugins by Aaron Kuzemchak 入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」。 入力ボックスにデフォルトでヒント値を入れておいてクリックすると消えるあの分かりやすいインタフェース。 実際に実装するとなると、ちょっと面倒ですが、ToggleValを使えば、メソッドを1回呼び出すだけで簡単に実装できます ↓↓↓↓クリックで消える↓↓↓↓ jQueryプラグインなので、以下のように使いやすくなっています。 $("input[name='name']").toggleVal( { option } ); 実装したくなった時、ちょっと面倒でまた今度、とならないようにこれを覚えておけばよさそう。
わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」:phpspot開発日誌
idTabs わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」 以下のようなHTMLを簡単にタブ化できるみたいです <ul class="idTabs"> <li><a href="#aaa">Tab 1</a></li> <li><a href="#bbb">Tab 2</a></li> </ul> <div id="aaa">This is tab 1</div> <div id="bbb">This is tab 2</div> UL要素の中にリストを定義してあるのがタブ部分で、<div>部分が該当ページ部分です。 1ページ内に全部のデータを収めることも出来るところもいいですね。 関連エントリ タブ機能付きパーソナライズドホームページ『Netvibes』 多数のタブをグループ化して管理できる「TooManyTabs」
jQueryの可能性を知りたいなら・・・『jQuerySTYLE』 | 100SHIKI
最近はよくjQueryを使うのだが、他の人がどんな風に使っているかに興味がある。 もしあなたが同じように思っているならjQuerySTYLEが参考になるだろう。 このサイト、jQueryが使われているサイトのギャラリーである。 また、それぞれのサイトでjQueryのどの機能（Ajaxだとかナビゲーションだとか）が使われているかもアイコンで一目でわかるようになっている。自分の興味にあわせて覗いてみるといいだろう。 自分が使っているものを他の人がどう使っているか。そんなことに気づかせてくれるこうしたサイトはいいですね。
画像が浮き上がるjQueryを使ったイメージギャラリー:phpspot開発日誌
jQuery Image Effects - Hover Effect w/ jQuery & CSS - jQuery Tutorial 画像が浮き上がるjQueryを使ったイメージギャラリー。 デモページのようなギャラリーを作成できます。 jQueryで小気味よくアニメーションするところがなかなかよいです。 ちょっとしたところで使えそうですね。 関連エントリ jQueryを使ったFlashばりにクールなギャラリー「GalleryView」 訪問者驚きの手めくり風、画像ギャラリー作成サンプル 滑らかに画像が切り替わる超絶クールFlash写真ギャラリー「imagin」
jQueryのサンプルTOP10 – creamu
MyPHPDuniaというサイトで、jQueryのサンプルTOP10がまとまっています。 かなり使えるものばかりな感じですね。 » スライドタブボックス » Appleのサイトで使われているようなメニュー » 画像をズーム » 画像の上にスライドするキャプション » メニューの背景にスライドする画像 » タブで画像を切り替える » メニューにフェード効果 » アコーディオンメニュー » タブによるコンテンツ切り替え » タブメニュー 詳しくは以下からどうぞ。ソースコードもダウンロードできますね。 » Top 10 Jquery Examples with Live Demos わいわいと飲み会。超たのしかったぞ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
作ろうiモード：iモードブラウザ2.0 | サービス・機能 | NTTドコモ