[JS]シンプルなタブを実装する超軽量（5KB）のスクリプト -SimpleTabsjQueryなど他のスクリプトに依存せず、シンプルなタブコンテンツを実装する超軽量（5KB）のスクリプト「SimpleTabs」を紹介します。 SimpleTabs タブとパネルは、それぞれリストとdiv要素で実装されています。 タブとパネルの対応は実装の順番通りになるため、IDなどでのコントロールは不要となっています。 また、ブラウザのクッキーを利用して、最後にアクティブにされたタブを保存し、再アクセスした際にそのタブをアクティブにします。
スタイルシートやスクリプトなどのテクニックをまとめたフリーのeBook
スタイルシートの構造設計から、グリッド・フォーム・ナビゲーション・角丸などの実装例、データベースやAJAXの実践的なサンプルが豊富に掲載されているフリーのeBook「The Woork Handbook」を紹介します。 The Woork Handbook The Woork Handbookのテキストは英語ですが、キャプチャやコードが豊富に掲載されているため、英語が分からなくても理解できる箇所は多いと思います。 ダウンロードできる「The Woork Handbook」はPDFファイルで、現在配布されているv.0.1の目次は下記のようになっています。 スタイルシート データベース AJAX MooToolsやScriptaculous、他のJavaScriptのフレームワーク Blogger その他 フォント
JavaScriptのイベントハンドリングが楽に行える軽量ライブラリ「qevent」:phpspot開発日誌
qevent - Google Code JavaScriptのイベントハンドリングが楽に行える軽量ライブラリ「qevent」。 デモサイトにて、イベントハンドリングの挙動を確認することが出来ます。 QEvent.add(element, 'event', function() {}); みたいな感じに add していくだけでイベントハンドラを設定可能です。 例） QEvent.add(window, 'domready', function() { alert('loaded'); }); イベントだけを扱いたいみたいな場合に qevent のみインクルードすればよいので、便利かも 関連エントリ JavaScriptでキーボードイベントを驚くほど簡単に扱える「KeyTypeListener.js」 JavaScript: クロスブラウザでブロック要素内のクリック座標を得る方法 JavaS
HTML崩壊Reverse! meltdown2.js - KAZUMiX memo
今度は崩壊終了後に逆再生して元に戻ります。 javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown2.js?'+(new Date).getTime();s.charset='UTF-8';d.body.appendChild(s);})(document) これを崩壊させたいページのアドレスバーに貼り付けて実行すると、そのページが崩壊します。その後、逆再生して元に戻ります。 要素がたくさんあるページで実行すると面白いと思います。Yahoo! JAPANとか。 本体ソース meltdown2.js 前作からの改良点 逆再生します 大幅にパフォーマンスアップ。今回は
リンクを自動で超分かりやすく修飾してくれるJSライブラリ「DLINK」:phpspot開発日誌
-DLINK- automatic link improver - OOPStudios.com リンクを自動で超分かりやすく修飾してくれるJSライブラリ「DLINK」。 次のように、リンクをJavaScriptで自動で色分け&アイコン付与してくれます。<a>タグにclassを指定する必要もありません。 PDF、Flash、SWFなど、各種フォーマットも自動付与。 設置方法は簡単で、以下の３ステップ。 1. まずスクリプトを読み込む <script type="text/javascript" src="http://oopstudios.com/dlink/dlink.js"></script> 2. 色分けしたい部分をdiv.dlinkで囲う 中身に普通にHTML記述 <div class="dlink"> your <a href="#">link filled</a> conten
[JS]ラジオボタンをスライダーに変更するスクリプト -SuperSlider
SuperSliderは、ラジオボタンをスライダーに変更し、スライドバーやツールチップを表示するスクリプトです。 SuperSlider デザインの変更は、スライダーやバーは画像ファイル、ツールチップはスクリプト内の記述を変更することでできます。 スライダーの実装はラジオボタンをテーブルで整列させています。 SuperSliderはPrototypeのプラグインのため、実装にはprototype.jsとscriptaculous.jsが必要です。
[JS]画像の一部を拡大表示するスクリプト -jQZoom Evolution
以前紹介した画像の一部を拡大表示するスクリプト「jQZoom」の機能がバージョンアップしたjQZoom Evolutionがリリースしました。 jQZoom Evolution demo 主なバージョンアップは、ズームウインドウのカスタマイズ、タイトル表示、エフェクトなどです。 オプションでは、ズーム時のタイプ、ズームウインドウのサイズと位置、タイトルの有無、フェードの有無とスピードなどが変更できます。 jQZoom EvolutionはjQueryのプラグインのため、実装にはjquery.jsが必要です。
JavaScriptやCSSのメンテナンスにぜひどうぞ·CocProxy MOONGIFT
こ、これは便利…。新規開発しているときはまだしも、実際に動いているサイトのデザインやJavaScriptをメンテナンスしようと思うと以外と大変だ。静的な場合はまだしも、Ajaxを使ってデータを取得していたりすると、その用意だけでも時間がかかってしまう。 そんな時に使えるのがamachangご推薦のCocProxyだ。Webデザイナーまたは開発者の方はおお、こんなのを待っていたと思うに違いない。 CocProxyはRubyで書かれたオープンソース・ソフトウェアで、開発用プロキシだ。 CocProxyを使う際には、filesというディレクトリを作成し、そこにファイルを配置する。ドメインごとにフォルダを作成して、その中にファイルを入れても良いし、直接ファイルを置いても良い。優先度はfiles直下にあるファイルだ。 style.cssはヒットしたのでローカルファイルを利用している そしてproxy
ますますクールになったJavaScript用UIライブラリ「Ext3」:phpspot開発日誌
Designer.2 ますますクールになったJavaScript用UIライブラリ「Ext3」。 次のように、ますます美しくなったデザインのExt3が2009年を目処にリリースされる予定です。 ムービーが見れます これは楽しみですね。 関連エントリ Ext2.0を便利に使うためのIDE集 PHPからExtJSを簡単に使えるラッパー「PHP-Ext」 パスワードの強度を示してくれるJS「Ext.ux.PasswordMeter.js」
アニメーションするクールなアコーディオン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」
画像を球体化するエフェクトライブラリ「sphere.js」:phpspot開発日誌
sphere.js (javascript spherical image effect) 画像を球体化するエフェクトライブラリ「sphere.js」。 どんな画像も次のように、球体のなかに映ったようにしてくれるJavaScriptライブラリが登場しました。 ソフトなしに、JSでこういう加工が与えられるのは嬉しい人には嬉しいのかも。 使いどころは難しいかもしれませんが、覚えておけば使うべき局面があるかもしれませんね。 関連エントリ 画像にGoogleMapみたいにズームできる機能をつけるJS「shiftzoom.js」
これが決定版！JS＋CSSでお手軽に「target= _blank」なリンクを一目で判断させる
先日「target="_blank"」の設定されているリンクを簡単に判別できるようにする、という内容のエントリを書きました。 CSSのみで「target="_blank"」のリンクを一目で判別できるようにする これは最終的に「CSSの属性セレクタ」＋「手動class設定」という形に落ち着いたんですが、予想したとおり「class設定するの面倒だよね」(意訳)という指摘が。私自身はエディタとツールを使っているのでclassを設定するのはそんなに大変でもないのですが、一般的に考えれば面倒であることは間違いありません。FirefoxやGoogle Chromeならclass設定は不要なのですが、シェアトップのIE6(7)が対応してないのではやはり意味はないでしょう。 というわけで、今度はCSSとJavaScriptの両方を使って、classを設定しないでIE6(7)にも対応させ、「target="
MOONGIFT: » 要注目！モダンなUIを実現するJavaScriptライブラリ「LivePipe UI」:オープンソースを毎日紹介
JavaScriptを使って、クールなインタフェースを実現するライブラリは幾つか存在する。よく使われるものとしては、画像をクリックするとその場で拡大表示するもの、タブインタフェース、WYSIWYGなHTMLエディタ、レーティング、プログレスバー、コンテクスト（右クリック）メニューなどなど。 フローティングウィンドウ どれも個別のライブラリは存在する。だが、よく使われるものだけに、一つ一つ用意するのが面倒という人もいるはずだ。そこでこれを使おう。 今回紹介するオープンソース・ソフトウェアはLivePipe UI、Prototype.jsを使ったモダンなUIを実現するライブラリだ。 LivePipe UIが実現する機能はタブ、WSYIWYGエディタ、ツールチップ、フローティングウィンドウ表示、レーティング、プログレスバー、コンテクストメニューなどがメジャーなものとして挙げられている。レーティン
[JS]テキストのサイズをスライダーで変更するスクリプト
Nettutsのエントリーから、テキストのサイズをスライダーで変更できるスクリプトのチュートリアルを紹介します。 Use the jQuery UI to Control the Size of Your Text デモ テキストのサイズは、スライダーのマイナスからプラスの間で変更することが可能です。 変更したサイズはクッキーに保存されるため、次にアクセスした際にもそのサイズで表示されます。 オプションでは、テキストの初期サイズ、最小値・最大値などがカスタマイズ可能で、日本語フォントでも最適なサイズに変更することができます。 スクリプトのフレームワークには、jQuery UIが使用されています。
アニメみたいな視差を表現する面白JavaScriptライブラリ「jParallax」:phpspot開発日誌
webdev.stephband.info Parallax turns a selected element into a 'window', or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. アニメみたいな視差を表現する面白JavaScriptライブラリ「jParallax」 イメージ上でマウスを動かすと、近くの物ほど速く、遠くの物ほど遅く動作するような表現が可能。 仕組みとしては複数枚のエレメントを重ね合わせてJavaScriptで動作させているみたい。 他にも面白い例がいくつか紹介されてます。 webdev.stephband.info/parallax_demos.html test.stephband.info/pa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]一つの要素に複数の背景画像を自由に配置できるスクリプト -Background Layering
[JS]高さの異なるカラムを同じ高さに揃えるスクリプト -Equal Heights
[JS]複数のコンテンツをクロスにスライドして自動表示するスクリプト
[JS]省スペースにフェードと自動スクロールで表示するスクリプト -Simple Spy
タイムテーブルを実装するための便利なJavaScriptライブラリ『today's timetable』 | IDEA*IDEA
