IE6ユーザへのアップデートをスマートに促すことが可能な「ie6update.js」:phpspot開発日誌
IE6 Update IE6ユーザへのアップデートをスマートに促すことが可能な「ie6update.js」。 Windowsユーザの方ならご存知の、ブラウザ最上部に表示される情報バーのようにやんわりとアップデートを促してくれるJavaScriptコードです。 最近、海外のサイトを見ているとこの仕組みを使ったサイトをよく見かけますよね。 実装は、サイト上に掲載されているコードを貼り付けるだけで実装できるという容易さもGood! コードは以下で、googleのホスティングするjQueryコードなどを読み込むものになっています。 <!--[if IE 6]> <script type="text/javascript"> /*Load jQuery if not already loaded*/ if(typeof jQuery == 'undefined'){ document.write("
わずか2.5KBでテーブルにソート機能を提供する「TinyTable」:phpspot開発日誌
TinyTable JavaScript Table Sorter - 2.5KB - Web Development Blog わずか2.5KBでテーブルにソート機能を提供する「TinyTable」。 シンプルだけど次のようなかっこいいソート可能テーブルを実現できる軽量ライブラリが公開。 デモページ 各種変数の設定でカスタマイズも可能みたい。 ＣＳＳのクラス名の指定なんかが出来るようです。 var sorter = new TINY.table.sorter("sorter"); sorter.head = "head"; //header class name sorter.asc = "asc"; //ascending header class name sorter.desc = "desc"; //descending header class name sorter.even
これは便利だ！Excel→Table化するjQueryプラグイン
Webページに掲載する面倒な表（テーブル）の作成を楽にしたい――。以前、本サイトではExcelファイルを簡単にHTML（Tableタグ）に変換するExcelアドイン「XLS2HTMLTable」を紹介した（関連記事）。XLS2HTMLTableはとても便利なツールだが、それでも表が大量に必要な時にはやはり手間がかかる。 今回はさらに楽をできて便利なアイテムを紹介しよう。それが、CSVファイル（カンマ区切りテキスト）を読み込み、Tableに整形して表示するJavaScriptライブラリ「jquery.csv2table.js」だ。 JavaScript関連の著書も多い高橋登史朗氏が作った「jquery.csv2table.js」は、名前のとおりjQueryのプラグインとして動作するもので、HTMLにわずか数行のスクリプトを書き加えるだけで使える手軽なライブラリだ。さっそく実際にjquery.
アニメーションするクールなアコーディオンUI実装用JSライブラリ:phpspot開発日誌
Animated JavaScript Accordion V2 - Web Development Blog This lightweight (1.3 KB) animated JavaScript accordion is an update to the original accordion script posted on April 18th.アニメーションするクールなアコーディオン実装用JSライブラリ。 次のようなアコーディオンUIを実装できます。 デモはこちら アニメーションがなめらかでカッコいいです。 関連エントリ Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」
パネルをめくるような効果でブロック要素を切り替えられる「Flip!」:phpspot開発日誌
Flip! A jQuery plugin パネルをめくるような効果でブロック要素を切り替えられる「Flip!」。 次のようなパネルを上下左右の自由な方向にクルっと回転させられるウィジェット実装用jQueryプラグインが公開されました。 サイト上の省スペースで、製品なんかをＰＲする際に使えそうですね。 サイズを大きくすればプレゼンにも使えるかも。
ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル:phpspot開発日誌
Using jQuery for Background Image Animations - Snook.ca ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル。 デモページ デモページを見ればわかりますが、カーソルをあわせると滑らかに背景がアニメーションされます。 アニメーションの仕方がなかなか良くて、左→右や、上→下のように方向を指定できます。 当然ですが、Flashを使わなくてもJSでこうしたことが出来て、今までありそうでしたが、そんなに多く見かけることがなかったテクニックではないでしょうか。 覚えておくとふとしたときに使えそうです。
まじで使えるJavascriptライブラリ75選 | CREAMU
Javascriptで優れたインターフェースを実装したい。 そんなあなたにおすすめなのが、『75 (Really) Useful JavaScript Techniques』。まじで使えるJavascriptライブラリ75選だ。 以下にいくつかご紹介。 » Lightview スムーズに画像を拡大してくれる » FancyUpload アップロード中のプログレスを表示してくれる » SWFObject Javascriptを使ったFlashプレーヤ » JavaScript tabifier 簡単にJavascriptで切り替えられるタブインターフェースが作れる » FancyZoom 1.1 簡単なエンベッドでスムーズに画像を拡大してくれる » SimpleModal オーバーレイするクールなモーダルダイアログ » A Mac OS X-style Dock In JavaScript
JavaScriptのアラートボックスをセクシーにする仕組み:phpspot開発日誌
Sexy Alert Box JavaScriptのアラートボックスをセクシーにする仕組み。 普通のalertはあじけなくて音もなってよくない、ということで独自のalertボックスは色々 Sexy.alert('Hello world!'); で、alertを表示できます。 デモページはこちら。アニメーションしてちょっといい感じになりました。 デザインをもうちょっと洗練すれば更にセクシーになるでしょう。 関連エントリ JSによるカスタムダイアログボックス作成ライブラリ 多機能LightBoxのiBoxがバージョンアップ「iBox v2」
超クールなログインフォームを作成するチュートリアル:phpspot開発日誌
Build An Incredible Login Form With jQuery - NETTUTS 超クールなログインフォームを作成するチュートリアル ログインボタンを押すと、ビローンとアニメーションしながらカッコよくログインフォームを開くUIを作成するチュートリアルが公開されています。 Photoshopにはじまり、CSS、JavaScriptのコーディング手順が紹介されていて、とても有用です。 関連エントリ 超クールなタブインタフェースをjQueryで作成するチュートリアル JavaScript製の画像スライダー・ギャラリーいろいろ apple風のアニメーションする超クールなメニューを作成
JavaScript製の画像スライダー・ギャラリーいろいろ:phpspot開発日誌
Top 10 Javascript slideshows, carousels and sliders JavaScript製の画像スライダー・ギャラリーいろいろ。 JavaScriptで画像を使ってアニメーションさせたり、リスト管理したりするライブラリが多数紹介されています。 SpaceGallery Noobslide Accessible News Slider SmoothGallery jQuery Multimedia Portfolio JCarousel Glider Carousel Carousel slideshow Carousel.us 過去の画像ギャラリー関連エントリ スライドショー付きLightBox風イメージアルバムのサンプル jQueryベースのLightBoxクローン「prettyPhoto」 ＵＩがクールでサクサク使えるMacウェブギャラリー風画像ギャ
小気味よく動作するニュースティッカーウィジェット実装サンプル:phpspot開発日誌
woork: Fantastic News Ticker Newsvine-like using Mootools 小気味よく動作するニュースティッカーウィジェット実装サンプル。 次のようなニュースティッカーを設置するサンプルコードが公開されてます。 デモページはこちら div > ul > li の構造でマークアップが定義されていて、Tickerクラスで簡単に初期化できるみたい。 サイトのサイドバーにアニメーションするニュースウィジェットを置きたいという場合に参考に出来ますね。 関連エントリ jQueryとPHPでダイナミックな投票スクリプトを作成 アニメーションする2KBの軽量ツールチップJS
クールに回転するJavaScriptメニュー「mooVRotatingMenu.js」:phpspot開発日誌
mooVRotatingMenu menu tournant sur lui-me gre ・mootools et au whisky クールに回転するJavaScriptメニュー「mooVRotatingMenu.js」 マウスカーソルを合わせるとクルクル回転するメニューが作れます。 HTML的には下記のようになるみたい。 <div id="HorizMenu"> <a href="#" class="mooRotate rotateHome rotateSound"><span>Home</span></a> <a href="#" class="mooRotate rotateMoo rotateSound"><span>Mootools</span></a> <a href="#" class="mooRotate rotateWork rotateSound"><span>Wo
JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」:phpspot開発日誌
FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil... 次の記事 ≫：インターネット越しにWiiリモコンを操作できる「Wiimote-over-HTTP」 Dynamic Drive DHTML Scripts- Simple Tree Menu This is a unobtrusive Tree Menu script that turns any ordinary list (UL element) into a collapsible tree! JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」。 次のようなHTMLがあったとすると、 <ul id="treemenu2" class="treeview"> <li>Item 1</li> <li>Folder 1 <ul> <li>Su
Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ:phpspot開発日誌
NETTUTS - Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ 次のようなマークアップでシンプルに実装できる模様。 <div id="test-accordion" class="accordion"> <div class="accordion-toggle">トグル1</div> <div class="accordion-content">コンテンツ1</div> <div class="accordion-toggle">トグル2</div> <div class="accordion-content">コンテンツ2</div> <div class="accordion-tog
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クールに表示を切り替えられるCSSとjQueryサンプル:phpspot開発日誌
画像を効果的に見せるCSSサンプル集:phpspot開発日誌
超クールなタブインタフェースをjQueryで作成するチュートリアル:phpspot開発日誌
パスワードの強度を示してくれるJS「Ext.ux.PasswordMeter.js」:phpspot開発日誌
バナーに使える自動再生されるコンテンツスライダー実装:phpspot開発日誌
サクサク動く画像ギャラリー作成JSライブラリ「noobSlide」:phpspot開発日誌