[JS]表組みのヘッダを固定し、表示する列も選択できるスクリプト
左上のアローをクリックすると、チェックボックスが表示されます。 スクリプトはクッキーにも対応しており、選択した列をクッキーに保存することも可能です。 スクリプトはjQueryのプラグインのため、実装にはjquery.jsが必要です。 オプションでは、テーブルの幅と高さ、列選択の有無、クッキーの有無を設定できます。基本の書式は下記のようになります。 JavaScript <textarea name="code" class="js" cols="60" rows="5"> $(tableID).scrollableFixedHeaderTable(widthpx, heightpx, showSelect, cookie) </textarea>
[JS]美しいグラデーションがネオンサインのようにアニメーションするスクリプト
SEOにも配慮した、jQueryで実装するネオンサインのエフェクトのチュートリアルをTutorialzineから紹介します。
iPhone向け最適化Webサイトを構築するjQueryライブラリ·jQuery iPhone UI MOONGIFT
jQuery iPhone UIはHTML/JavaScript製のオープンソース・ソフトウェア。iPhone用のWebサイトを構築するニーズが増えてきている。既に幾つかテンプレートもリリースされており、それらを使えば最適化されたインタフェースのサイトが作りやすくなる。 アイコンリスト そうしたライブラリを使う時に重要なのが、どれくらいの機能に対応しているかだ。単純なリストはもちろん、プロフィールページ、画像付きリスト、フォームなど多数のニーズがある。その一つ、JavaScriptを使ったパターンに適合できそうなのがjQuery iPhone UIだ。 jQuery iPhone UIの特徴は名前の通りjQueryを使っていることだろう。同種のライブラリとしてjQTouchがあるが、あちらはがちがちに固まっている雰囲気があるがjQuery iPhone UIは切り離して使えそうだ。HTML
Make an Animated Alphabet using Keypress Events in jQuery « Build Internet
The result here was the result of some random jQuery keypress event experiments over the past few days. I recommend that you use this tutorial as a proof of concept rather than final product. Let’s be real for a moment — there are very few places where you would need the exact effect we’ll be building. However, the logic behind it should be a much more useful in adapting to your own needs. The Goa
Filtering Blocks | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! One of our eCommerce clients at work had a number of products they wanted to put on special to promote on the web. Each product has a different “reason” why it’s on special. Perhaps it’s discontinued, perhaps its special pricing, perhaps it’s free shipping. Originally they wanted a special p
Windows7のような透過ウィンドウを実現するjQueryプラグイン – creamu
Windows7のようにウィンドウを透過させたい。 そんなときに使えそうなのが、『AeroWindow』。Windows7のような透過ウィンドウを実現するjQueryプラグインです。 divを透過させて、重なったときに後ろが透けて見せることができますね。ダブルクリックすると、びよーんと拡大したり、右下をドラッグするとリサイズすることができます。 デモは以下から。 オンラインデモ 動きが気持ちいいので、一度見てみてください。 AeroWindow gihyoさんでの連載が始まりました。最近のかっこいいUIについて考えたり、作り方を紹介したりしていくので、よろしければご覧ください。 第1回 使いやすいメニューはどう作る？ ?水平メニュー あと代官山で物件を見てきました。めちゃくちゃかっこいいんだけど、うーんもうちょい探そうかな。
jQueryで行うFlashみたいなスプライトアニメーションのチュートリアル:phpspot開発日誌
jQuery & CSS Sprite Animation Explained In Under 5 Minutes | AddyOsmani.com | Where Web Businesses Grow jQueryで行うFlashみたいなスプライトアニメーションのチュートリアルが公開されています。 iPhone向けのサイト等ではFlashは使えませんが、jQueryによって実装すればアニメーション機能も実装出来ますね。 デモページ jQueryのコードが意外にシンプルです。 数年後のアニメーションはどうなっているのでしょうか。 関連エントリ アニメーションの残像が残るjQueryアニメーションチュートリアル キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラ
iframe を iframe ぽく見せない jQuery プラグインを作ってみた - Cyokodog :: Diary
更新履歴 2011-09-29 Ver 0.1.4 に更新 jQuery 1.6.2 に対応しました 2010-06-10 Ver 0.1.3 に更新 getTargets, getTarget メソッドを追加しました 2010-06-04 Ver 0.1.2 に更新 IE6 で実行時にタイミングにより表示されてたエラー警告を、表示されないように修正しました。 2010-06-01 Ver 0.1.1 に更新 IE で正常に動作しない不具合を修正しました。 社内アプリも Ajax 的な UI なものが増えるにつれて、１画面にたくさんの機能を詰め込みたいという要望を受ける事が多くなりました。素直に作るとプログラムも肥大化し保守も大変になるので、機能単位に画面を分けて作成し、それぞれの画面を iframe で１つの画面に読み込むといった方法で対応したりしてます（iGoogle 的な感じ）。 そ
jQueryとPHPで作るサムネイルがスライドするギャラリー – creamu
サムネイル表示のあるフォトギャラリーを作りたい。 そんなときに参考になるのが、『Fresh Sliding Thumbnails Gallery with jQuery and PHP』。jQueryとPHPで作るサムネイルがスライドするギャラリーです。 マウスオーバー状態でカーソルを動かすことで、サムネイルをスライドさせることができます。クリックすると、大きくプレビュー表示されますね。 右上のドロップダウンで、アルバム管理もできるようなので、複数のセットを見せることができます。 デモは以下から。 View demo ソースもダウンロードできるので、一度見てみてください。 Fresh Sliding Thumbnails Gallery with jQuery and PHP iPhone版も作られています。 Awesome Mobile Image Gallery Web App やっと
物体のドラッグ＆ドロップ時に勢いをつけられる「towel.js」:phpspot開発日誌
towel.js 物体のドラッグ＆ドロップ時に勢いをつけられる「towel.js」。 ドラッグして勢いよく話せば、そのままズズズっとテーブルホッケーのように要素がすべるような効果をつけられます。 どんな場面に使うかはアイデア次第ですが、面白いのでご紹介させて頂きました。 ドラッグ＆ドロップというと、ピタッと止まるものが多いなかでこうした効果を実現しようというアイデア自体もなかなか面白いですね。 関連エントリ ドラッグ＆ドロップで数値の設定が出来る便利ＵＩを実装できる「jquery-drag-spinbox」 対象をドラッグ＆ドロップしてtwitter等にシェアできるプログラムと作成チュートリアル ドラッグ＆ドロップできるサイトマップ作成チュートリアル
Flashのような8種のエフェクトを選べる汎用的なjQueryギャラリー・AviaSlider - かちびと.net
Flash製のギャラリーなどでよく 見かけるようなエフェクトが8種 用意されているjQueryを使った スライドギャラリーのAviaSlider をご紹介します。 若干怪しいですけどIEでも動きました。懲りすぎてない、汎用的なギャラリーです。
jQueryとCSS3で文字修飾に便利なMS OfficeのMinibar風ウィジェットを実装するサンプル:phpspot開発日誌
jQueryとCSS3で文字修飾に便利なMS OfficeのMinibar風ウィジェットを実装するサンプル 2010年05月27日- Why and how to create Microsoft Office Minibar with jQuery and CSS3 jQueryとCSS3で文字修飾に便利なMS Office 2007のMinibar風ウィジェットを実装するサンプル テキストを選択すると、ツールバーがうっすらと現れ、ツールバー内のボタンを押すと、文字が修飾されるようタグを付与してくれるようなMinibar実装サンプルです。 デモページではその場でプレビューされる機能もあります。 デモでは、b, i, uタグの他、リンクタグしかありませんが、他にも追加することで、テキスト入力をより便利にすることが出来そうですね。 関連エントリ フォームのユーザビリティに貢献するjQuery
指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」:phpspot開発日誌
指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」 2010年05月27日- Plugins | jQuery Plugins 指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」。 $(element).footer() みたいにするだけで、element に指定した要素をページのフッターに吸い付くように配置することが出来る便利なプラグインです。 ブラウザの高さを変更してもJavaScript側で調整してくれます。 通常の例。div#footerブロックは最初の要素の直下に来てます。 フッター設定した例。ブラウザの下部に常に配置されます。 色々方法はあると思いますが、実装が簡単なので便利かもしれませんね。 関連エントリ HTMLで雑誌のような美しい段組みレイアウト
ボックス内をスクロールすると自動でコンテンツをロードするjQuery - かちびと.net
IE6でも7でも動いてくれるのと なかなか使い勝手も良さそう なのでメモ。jQueryを使った コンテンツボックス内の自動 読み込みを実装します。 去年くらいの記事ですけど見逃してたのでメモ。 Facebookをやられてる方はピンと来るかも。下までスクロールすると自動で次のコンテンツが読み込まれますが、それをボックス内で実装したものです。基本的にどのブラウザでも動くみたいです。 Scrolling Dynamic Content box このボックス内でスクロールすると自動で次のコンテンツが読み込まれ、アイテムの数も表示されます。というか、見たほうが早いですね。 デモ コード コードです。 $('document').ready(function(){ updatestatus(); scrollalert(); }); function updatestatus(){ //ロードしたアイ
オシャレなサイトに使えそうな画像ズームが行えるjQueryプラグイン「Cloud Zoom」:phpspot開発日誌
Professor Cloud オシャレなサイトに使えそうな画像ズームが行えるjQueryプラグイン「Cloud Zoom」。 写真にカーソルを合わせるだけで、次のようにカーソル部分がズームされ、こうしたUIが必要な場面において便利に使うことが出来そうです。 範囲外を反転させることも出来るみたい。 アパレルサイトとかで、細部を拡大してより商品をしってもらう、的なインタフェースが必要な際にサクッと実装出来てしまいますね。 関連エントリ GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 細部のズームアップ表現に使えるPhotoshopチュートリアル 画像を同一Window内でスムーズにズームしてくれるJSライブラリ色々
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Code Archive - Long-term storage for Google Code Project Hosting.
IDEA * IDEA
MdN Design｜総合情報サイト
http://www.designwalker.com/2010/06/jquery-forms.html
IDEA * IDEA
