[CSS]IE6/7でも動作する、可変レイアウト用グリッドシステム -Flurid
IE6/7でも動作する数少ない、可変レイアウト用グリッドシステムのCSS/JSのフレームワーク「Flurid」を紹介します。 Flurid - The Fluid CSS Grid [ad#ad-2] FluridはCSSベースで開発された可変レイアウト用グリッドシステムのフレームワークで、jQueryのプラグインとしても開発されています。 Fluridの対応ブラウザ Fluridの対応ブラウザは下記の通りです。 Internet Explorer (Windows) - versions 6.0 - 8.0 Mozilla Firefox (Windows/Linux) - versions 1.0 - 3.6 Fluridのデモ デフォルト Fluridのデフォルトのレイアウトです。
[JS]使いやすく高性能なフォームが簡単に設置できるフレームワーク -jFormer
簡単なログインフォームをはじめ、お問い合わせフォーム、コメント用フォーム、ショッピングカート用フォーム、アンケート用フォームなど多種多様なタイプが用意された、バリデーション機能も備えたフォームのフレームワークを紹介します。 jQuery Form Framework - jFormer [ad#ad-2] jFormerの特徴 クライアントサイドのバリデーション サーバーサイドのバリデーション AJAXを使ったページ変更機能 CSSベースの簡単なカスタマイズ Botの防止（CAPTCHAは無し） 入力データのレジューム機能 フィールドのロック機能 フォームのテンプレートも多数用意 jFormerのデモ デモには、さまざまな実用的なフォームがあります。
[JS]フォームのフィールドにテキストを表示する軽量スクリプト -autoclear
フォームのテキストフィールドに、入力補助になるテキストを表示し、ユーザーの入力時にそのテキストを消去するjQueryのプラグインを紹介します。 jQuery Plugin: autoclear デモ [ad#ad-2] テキストフィールドに表示されるテキストには、class名を付与し、スタイルシートでカラーなどを設定することもできます。 デモは、「color:gray;」が指定されています。 autoclearの実装 HTML 表示されるテキストは、title属性内のデータを利用します。 <form method="post"> <label for="name">Name:</label><input type="text" id="name" name="name" title="John Smith" value="<?php echo $_POST['name'];
[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider
jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaScript 「jquery.js」と「jquery.slider.js」を外部ファイルとし、下記のスクリプト
[JS]複数のパネルをアニメーションでスライド表示させるスクリプト -fixedTo
補助系のメニューやちょっとしたアナウンスを掲載するのに最適なパネルをアニメーションでスライド表示させるjQueryのプラグインを紹介します。 jQuery: Plugin fixedTo デモページ [ad#ad-2] デモでは、ブラウザ枠の左と下側から2枚のパネルがアニメーションでスライド表示され、表示位置はスクロールしてもブラウザの枠に対して固定位置に表示されます。 デモページ fixedToの実装 パネルはdiv要素を使用し、テキスト・画像・リンクなどあらゆる要素を設置可能です。 [ad#ad-2] JavaScript 「jquery.js」と「jquery.fixedto.min.js」を外部ファイルとし、下記のスクリプトを記述します。 $("elemento").fixedTo({ "posicion":"left", "ancho":360, "alto":70, "ocul
[JS]リリースしたばかりのjQuery1.5対応のチートシート -jQuery 1.5 Visual Cheat Sheet
jQuery 1.5 Visual Cheat Sheet [ad#ad-2] jQuery 1.5のリリース情報は下記を参考ください。 jQuery: » jQuery 1.5 Released また、先日jQuery 1.5rc1がリリースされました。 jQuery: »jQuery 1.5.1 RC 1 Released jQuery 1.5対応のチートシートは他のVisual Cheat Sheetシリーズと同様に実用的で、簡潔に美しく仕上がっています。
[JS]画像の一部を拡大するシンプルで実用的なスクリプト -Easy Image Zoom
プロダクトページなどによく利用される、画像の一部を拡大する実用的で軽量なjQueryのプラグインを紹介します。 jQuery plugin: Easy Image Zoom デモページ [ad#ad-2] デモではサムネイル画像にカーソルを合わせると、その箇所を中心に拡大表示し、ディテールをユーザーに提供することができます。 スクリプトは使い勝手をよくするために、できるだけ軽量にし、またカスタマイズも簡単にできるように設計した、とのことです。 Eazy Image Zoomの実装 HTML サムネイル画像をimg要素で実装し、拡大画像をa要素に配置します。 <a href="large.jpg"><img src="small.jpg" alt="Small image" /></a> CSS 拡大画像のスタイルはCSSで簡単にカスタマイズが可能です。下記はデモページの例です。 #easy
[JS]各パネルのリンクに対応した、シンプルなコンテンツスライダーのスクリプト -hash slider
hash slider デモ：3番目を表示 [ad#ad-2] hash sliderの主な特徴 設置が簡単。 スタイルシートで簡単にデザインのカスタマイズが可能。 マウスホイールでスライド操作が可能。 #のリンクで各パネルの個別リンクにも対応。 番号のナビゲーションは自動で生成。 個人でも商用でも完全に無料。 2.2KBと超軽量サイズ。 [ad#ad-2] hash sliderの実装 実装は簡単です。 HTML 各パネルは、リスト要素で実装します。 <div id="slider"> <ul> <li>パネル1</li> <li>パネル2</li> </ul> </div> <div id="left"> 左へスライド </div> <div id="right"> 右へスライド</div> <ul id="numbers"> <li></li> </ul> L.3, 4のli要素はパ
jQueryのプラグイン「Page Scroller」を商用利用でも無料に変更しました：更新- 3.0.7
当サイトで配付しているページ内をスムーズにスクロールできるスクリプト「Page Scroller」をバージョンアップ（3.0.7）して、商用利用でも無料に変更しました。 スクリプトは当サイトでも下記のキャプチャのように、いろいろな箇所に利用しています。 簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 [ad#ad-2] 3.0.7の変更点 スクリプトのライセンス スクリプトのダウンロード 3.0.7の変更点 主な変更点は、下記の通りです。 3.0.7 ライセンスが変わりました。 詳しくは、「スクリプトのライセンス」を参照ください。 スクリプトのライセンス ライセンスを下記のように変更しました。 変更前： 表示 - 非営利 - 継承 2.1 日本 変更後： 表示 - 継承 2.1 日本 使用条件 上記のライセンスに従い、個人でも商用で
[JS]パネルが次々にスライドして重なるエフェクトを実装するチュートリアル
パネルをクリックすると、次々にパネルがスライドして重なり順が変わるエフェクトを実装するjQueryのチュートリアルを紹介します。 Opera mobile window chooser, recreated with jQuery デモページ [ad#ad-2] このエフェクトはOpera Mobileの「window chooser」を模したものらしいです（持ってないから分からないです）。 HTMLはリスト要素で実装されており、非常にシンプルです。 HTML 最小限の要素にした例です。 最初に一番上にするパネルに「current」を与えます。 <ul id="container"> <li class="current">最初に表示するパネル</li> <li>パネル2</li> <li>パネル3</li> <li>パネル4</li> </ul> HTML デモでは、パネル内のコンテンツ
[JS]ページ遷移にフェードやスクロールのアニメーションを加えるスクリプト -Pageswitch
リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。 デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="//coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> [ad#ad-2] JavaScript PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。 $(document).ready(fun
背景画像をブラウザの枠いっぱいに表示するテクニックの考察
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
[JS]さまざまなDOM要素にツールチップを表示するスクリプト -Bubble Popup
テキストリンクをはじめ、p, span要素のテキスト、li要素のテキスト、div要素、img要素などさまざまなDOM要素に、アニメーションを伴ったツールチップを表示するjQueryのプラグインを紹介します。 jQuery Bubble Popup v.2.0 デモページ：さまざまなDOM要素への実装例 [ad#ad-2] Bubble Popupの対応ブラウザ Internet Explorer 6.5, 7, 8, 9 (beta) Firefox 3.5.x Safari 5.0.x Opera 10.x Chrome 6.0.x iCab 4.x Webkit based browser (reKonq, Arora) KHTML-based browser (Konqueror) Bubble Popupの主な特徴 あらゆるDOM要素にツールチップ、ポップアップを作成できます。 ツ
[JS]jQuery初心者もOK、サイトにアニメーション効果を取り入れるチュートリアル
jQueryを使用して、サイトにフェードやスライド、表示・非表示、タイマーなどのアニメーション効果を取り入れるチュートリアルを紹介します。 Super-Easy Animated Effects with jQuery チュートリアルは英語ですが、使用する関数、ソース（HTMLとJavaScript）が必要最小限でまとめられており、デモページ（シンプルすぎかも）もあるため、英語が苦手な人でも大丈夫だと思います。 下記に、チュートリアルをいくつかご紹介。 アニメーションでフェードイン・フェードアウト <textarea name="code" class="html" cols="60" rows="5"> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascr
[JS]jQueryのプラグイン33+1選 -2010年7・8月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Shadow animation シャドウをアニメーション。 bgFade マウスホバーで背景をフェードでアニメーション。 hove
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]HTML5/Canvasを手軽に扱えるようになる実用的なスクリプト -gury
IDEA * IDEA
[JS]先日（2010/11/11）、リリースしたjQuery 1.4.4対応のチートシート
IDEA * IDEA
IDEA * IDEA
