jQuery Accessible Tabs - How to make tabs REALLY accessible demo スクリーンリーダー、スクリプトオフ時の対応をはじめ、タブ箇所の充分なホットスポット、アクティブなタブのハイライト、a href="#"の不使用、キーボードでの操作などを配慮して実装したとのことです。 オプションでは、タブに使用する要素やクラス名、パネル表示のモーション、スピードなどを設定できます。 デモは他に、YAMLを使用したものも公開されています。
twitter facebook hatena google pocket 背景画像にも何らかの効果をつけられると、面白い表現が可能になりそうです。 BGTransitionは、そんな時手軽に導入が可能です。 sponsors 使用方法 BGTransitionからjquery.BgImageTransition.jsを、jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.BgImageTransition.js"></script> <script language="JavaScript" type="text/javascript"> $( function(){ va
IEのみに有効なif構文。 head内に記述することで、CSSやJavascript等をIEだけに適用させることが出来る。 <!--[if lte IE 5.5000]>IE5.5以下に適用< ![endif]--> <!--[if IE 5 | IE 6]>IE5〜6に適用< ![endif]--> <!--[if lt IE 7]>IE7以外に適用< ![endif]--> <!--[if gte IE 7]>IE7以上に適用< ![endif]--> ▼こう書くとIE7以外にhoge.jsが有効になる。 <!--[if lt IE 7]> <script typ="text/javascript" scr="hoge.js"></script> <![end
レイアウト用のグリッドをオーバーレイで表示します。 URLを変更すれば画像の変更可。 Bookmarklet Layout Grid Overlay MRI
[CSS] 5 CSS3 Techniques For Major Browsers using the Power of jQuery – jQueryを使ったCSS3のテクニック Pocket Tweet jQueryを使って、来るべきCSS3で使えるようになるテクニックを先取りしちゃおう!みたいな記事。角丸のDIVボックス、ボーダー部にイメージ配置、バックグラウンドに複数のイメージ配置、テキストへのドロップシャドウ、透明度の設定などが紹介されてます。っていうか色々便利になるんだなぁ。デザイナー的にこういうのって待ち遠しいですな。まぁ着いていくのが大変と言えば大変だけど。 5 CSS3 Techniques For Major Browsers using the Power of jQuery >>
Lightweight jQuery Portal JavaScriptを活用した軽快なポータルを作るためのフレームワーク「jPolite」. iGoogleみたいなポータルを作るようなjQueryベースのフレームワークです。 デモページ タブをクリックで画面が軽快にアニメーションでいい感じに切り替わります。 ページ内には小窓がコンポーネントとして登録できて中身に自由にHTMLが記述できます。 各ページは、1ページあたり1枚のHTMLモジュールとしてJavaScriptで定義できて、非常に簡単かつシンプルにポータルが作れるフレームワークになっています。 JSでモジュール定義の例 var _modules={ m101:{l:"m101.html", t:"Motivation", c:"red"}, m102:{l:"m102.html", t:"Philisophy", c:"yello
JavaScriptで背景の色や文字の色を時間によって変えたり、 背景の画像を一定時間ごとに変えるプログラムを書いた。 使った主なメソッドをまず簡単に説明する。 eval(s) :sという文字列を数値に変換する。 charAt(i) :文字列の中のi番目の文字を返す。 document.fgColor="#aaaaaa":文字の色を指定する document.bgColor="#ffffff":背景の色を指定する。 document.body.background = "画像のURL":URLにある画像ファイルを背景に設定する。 setTimeout("関数",ミリ秒) :一定時間(ミリ秒)後に命令(関数)を呼び出すタイマーを設定する。 以下のコードを拡張子をhtmlで保存してブラウザで開くと実際に動作すると思う。 <html> <title>CLOCK<
プログラマーとして覚えておくと便利な英語をまとめてみた。 プログラミング系 admission 許可 submit 提出する alias 別名 array 配列 attachment 添付 attribute 帰する、属性 common 共通の compare 比較 complete 完成 confirm 確認する configuration 設定 error prone エラーが発生しやすい create つくる date 日付 directory ディレクトリ、フォルダ dynamic 動的な empty からっぽ enable 可能 exception 例外 exchange 交換 execute 実行 exit 抜け出す explain 説明する fetch CPUがメモリから命令を持ってくる forward 前へ function 機能 grep global regular e
25 jQuery Plugins for Navigation ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集。 階層メニュー、タブ、ツリーやページャにいたるまで、ナビゲーション部分に使えるjQueryプラグイン集25種がまとまっていました。 jQuery (mb)Menu クールなアイコン付階層メニュー BDC Drilldown Menu (iPod Style) iPod風ドリルダウンメニュー jBreadCrumb 動くパンくずリスト Treeview そのまんまツリービュー jQuery Full Width Navigation Widthを指定のサイズにあわせる jQuery Nested Tabs タブ内タブというネストが可能なプラグイン FastFind Menu クールなメニュー実装 jQuery Pagination Pagerを実装 全部見る 最近
ユーザーのマウス操作にあわせて、複数のレイヤーをずらして動かし、パララックス(視差)効果を与えるスクリプト「mParallax」を紹介します。
すごいねこれほんとすごい。ってか今まで知らなかったこんなのあるなんて・・・。 Learn & Test Google’s APIs Easilyで掲載されてて朝から色々触ってました。 その簡単なレポートです。 GoogleAPIが色々サンプル収録されたエディターって感じでしょうか。 AJAX APIs Playground 面白いなぁ。わくわくするなぁ。 手っ取り早くRSSリーダーみたいなのを作ってみると この時点で、下のほうにプレビューが生成され、レイアウトや仕様を見ながら選べるのが特徴的。 すごく便利ー。 後はキーの部分や、取得するRSSのURLをちょこっと変えてコードをコピペすれば、あなたのサイトで簡単にRSSリーダが設置できますね。 APIキーについては、公式で確認するのが一番ですが、それぞれのサービスを使う為に、APIを使うURLをGoogleに申請して『キー』を発行してもらう必
17 Best Javascript Image Galleries 色々な画像の見せ方を演出できる画像ギャラリー集。 特に目を引く物をピックアップしました。 Spacegallery 3D空間で画像を次々閲覧できる Galleriffic なかなかUIが洗練されていて適度なフェードアニメーションが心地よい Image gallery by James 自動スライドショーや、ページ番号がついたLightBox。かなり滑らか。 Cycle plugin 画像のページ送りを、シャッフルやズームなど色々なエフェクトで切り替え可能なライブラリ (E)2 Photo Gallery 一見Flashかと思うようなUIとアニメーション Protoflow iTunesのカバーフロー風に動作する画像ギャラリー。少し重いかも。 全部見る 単に画像ギャラリーといっても色々な見せ方があって感心しました。 関連エ
Copyright © chibatch.jp All Rights Reserved. | お問い合わせ先
jQueryでクールなカレンダーを作りたい。 そんなときにおすすめなのが、『Create astonishing iCal-like calendars with jQuery』。jQueryでiCalライクなカレンダーを作るチュートリアルだ。 このエントリーでは、↑のようなカレンダーの作り方が紹介されている。マウスオーバーするとふわっとポップアップするツールチップテキストつきだ。 ソースファイルもダウンロードできるので見てみてほしい。 デモは以下から。 View the online Demo! jQueryでiCalライクなカレンダーを作るチュートリアル、チェックして参考にしてみてはいかがだろうか。 Create astonishing iCal-like calendars with jQuery 天気がよくて気持ちいいですねー。 先日買った雑誌を読んでいます。「Casa」はまた紙面
さて、今回取り上げるリッチクライアント技術は「JavaScript」です。このプログラミング言語は、皆さん何度も聞いたことがあると思います。 しかし、名前は知っていても、実際どんな言語でどんな特徴があるのか、JavaとJavaScriptは違うのか? Ajaxと関係があるの? ……と、もし上司や同僚から質問をされたらきちんと答えられますか? JavaScriptに関して何となくでしか分かってない人も、今回の記事を読めば、ばっちり答えることができますよ! それでは、見ていきましょう。 いまさらだけど、“JavaScript”って何? JavaScriptは、WebブラウザNetscape Navigatorをリリースしていた、米Netscape Communicationsによって開発されました。 JavaScriptはWebブラウザ上で主に動作します。JavaScriptが誕生した当時、い
twitter facebook hatena google pocket 米大統領選でクリントン氏と壮絶な攻防を繰り広げるオバマ氏のサイトでも使用されるなど、巷で大人気のjQuery。 今回はjQueryの関連サイトを紹介します。 追記: 2008/2/8 2サイト 2008/5/29 2サイト 2008/6/25 1サイト 2008/7/9 5サイト(jQuery UI系・Cheet Sheetを集めました) sponsors Reference ・jQuery リファレンス:v1.0.x、1.2.x ・jQuery 1.2 ドキュメント日本語訳 ・jQuery 開発者向けメモ:v1.1.x ・jQuery日本語リファレンス:v1.2.6 HowTo / Review ・jquery.jsを読み解く(追記:2008/2/8) ・jQueryの魔法 ・ニュータイプなJSライブラリjQue
Supersized - Full Screen Background/Slideshow jQuery Plugin | Build Internet! 伸縮する全画面背景を設定できるjQueryプラグイン「Supersized」。 次のように、ブラウザのサイズを変えても背景画像がリサイズされます。 更に、スライドショーのように背景を切り替え可能です。 ありそうでなかったかもしれないプラグインですね。 背景に迫力のあるものを設定すればインパクトが大きそうです。 関連エントリ 便利なjQueryプラグインいろいろ これは面白!PHPとjQueryでクリックした位置が分かるクリックマップ作成 サイトに驚き!のページめくり効果をつけられるjQueryプラグイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く