マウスオーバーをデザインする | DesignWalker
jQueryとは――Webデザイナーから見た魅力 (1/3)
Webデザイナーさん、（X）HTML／CSSコーダーさん、マークアップエンジニアさん、お待たせしました。Web制作者のためのjQuery入門が始まります。 本連載では、現役Webクリエイターの西畑一馬氏が、人気のJavaScriptライブラリ「jQuery」を使ったリッチなUI（ユーザーインターフェイス）の作り方を解説します。プログラムの基本的な書き方の説明から、実務で使えるサンプルの紹介まで。目指すは「Webデザイナーが最短距離でjQueryを使えるようになること」です。 jQueryをマスターすれば、たとえば「このタブパネルの向きを変えてほしいんだけど……」といったクライアントのわがままにもスピーディーに応えられるようになります。仕事の幅をぐっと広げるきっかけに、本連載をお役立てください。 （編集部） 圧倒的人気を誇るJavaScriptライブラリー「jQuery」 ここ数年、「pro
jQueryを使った開発に便利！Firebug + jQuery·FireQuery MOONGIFT
Firefoxを使ってWebシステムを開発する際には必須とも言えるFirebug。そして人気の高いJavaScriptライブラリのjQuery。この二つが組み合わさったとき、これまで以上の魅力が感じられるようになる。 マウスを当てるとそのエレメントがハイライト表示される そう確信できるのがFireQueryを使った瞬間だ。この二つの融合は、JavaScriptの開発をバーストしてくれるのではないだろうか。 今回紹介するオープンソース・ソフトウェアはFireQuery、Firebugと連携するjQuery開発補助アドオンだ。 FireQueryはconsole.logに吐き出した内容を元に、画面上のエレメントをハイライトしてくれる。例えばconsole.log($('p'));と出せば、コンソールに出力された jQuery(p)という表示にマウスを当てると、該当部分がハイライト表示になる。ど
jQuery TOOLS - The UI library for the Web
Demo Area A small list of things you can do with this library. 1. Tabs The most important UI widget on the web Minimal setup for tabs Naming the tabs 3 different skins with CSS Loading tab contents with AJAX Handling browsers back button AJAX:ed tabs with History support Using mouseover to switch tabs Making Wizards with the Tabs Making Accordions with the Tabs Customizing the Accordion e
ページ内の画像のダウンロードを超簡単に制限できる「dwImageProtector for jQuery」:phpspot開発日誌
ページ内の画像のダウンロードを超簡単に制限できる「dwImageProtector for jQuery」 2009年06月15日- dwImageProtector Plugin for jQuery ページ内の画像のダウンロードを超簡単に制限できる「dwImageProtector for jQuery」。 Flickr などで導入されていますが、右クリックしてダウンロードしようとすると、元画像ではなくダミーの画像のダウンロードが開始する、という仕組みを簡単に実現するためのjQueryプラグインです。 ダウンロードしようとすると、ダウンロード開始するものの、ダミー画像(blank.gif)がターゲットになります。 単純に、元画像にダミー画像(blank.gif)を被せているというハックなのですが、画像の右クリックダウンロードを抑制したい方には便利に使えます。 以下のようなケースで保存す
[JS]複数のパネルをアニメーションでスライドして切り替えるスクリプト -Sliding Tab Menu
サイドバーなどの省スペースにぴったりな、複数のパネルをスムーズなアニメーションでスライドして切り替えるスクリプトをQuenessから紹介します。 jQuery Sliding Tab Menu for Sidebar Tutorial demo デモでは、タブをクリックすると、それに対応したパネルがスライドして表示されます。 各パネルはコンテンツの量に合わせてサイズが調整されます。 タブとパネルはそれぞれdiv要素で実装されており、スライドのアニメーションにはjQueryとjQuery.ScrollToが使用されています。
jQueryでCookieの操作を超簡単に行える「jQuery Cookie plugin」:phpspot開発日誌
Setting cookies with jQuery jQueryでCookieの操作を超簡単に行える「jQuery Cookie plugin」。 このjQueryプラグインを使えば、Cookieさえ１行で簡単に設定できてしまいます。 以下のコードを使って、example というクッキーのキーに foo という値を設定することが出来ます。有効期限は見ての通りですが、7日間有効 $.cookie("example", "foo", { expires: 7 }); パスの設定も以下のように行うことができます。 $.cookie("example", "foo", { path: '/admin', expires: 7 }); ブラウザに対するデータ設定として最もお手軽に使えるCookieですが、これはますます活用できちゃいそうですね。 プラグインのページはこちら 関連エントリ Java
[JS]jQueryのプラグイン33+1選 -2009年6月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Image Rotator スタイリッシュな画像ギャラリー。 GalleryView インターフェイスが豊富な画像ギャラリー。 Sl
jQueryクライアントとPHPサーバ間をJSONで結ぶには
jQueryクライアントとPHPサーバ間をJSONで結ぶには：jQueryで学ぶ簡単で効果的なAjaxの使い方（3）（1/3 ページ） いま話題の「jQuery」を使って、目的を持ったAjax開発の効率化や使いどころ・注意点などについてサンプルを見ながら解説していきます。Webデザイナ／プロデューサーも必見！ jQueryで、オペレータにクリエイティブな時間を 今回は、前回の「目的を持ってAjaxを使うためにjQueryの文法を知ろう」で使ったテキスト入力を効率化させるプラグイン「jQuery Autocomplete Mod（オートコンプリートプラグイン）」を、自分の手でさらに使いやすくする方法を学んでいきます。ユーザビリティを高めて業務効率化をアップするサンプルを通じて、JavaScript/AjaxによるJSON形式のデータのやり取りの仕方を学びましょう。 検索サイトの検索キーワード
リッチでクールなスケジューラー用ＵＩをJavaScriptで実装できる「dhtmlxScheduler」:phpspot開発日誌
dhtmlxScheduler - Ajax Events Calendar/Scheduler リッチでクールなスケジューラー用ＵＩをJavaScriptで実装できる「dhtmlxScheduler」。 このライブラリを使えば、次のような、Google カレンダーみたいなＵＩを簡単に実装できるみたいです。 しかも、こうしたライブラリにありがちな動作のモッサリ感はなく、非常に高速に動作してくれます。 デモページを見れば分かりますが、ドラッグ＆ドロップでスケジュールを作成できます。 Day, Week, Month タブがついていて、表示形式を切り替えることもできます。 ためしに月表示にしてみると、カレンダーみたいになりました。 これはむちゃくちゃ便利ですね。 ライブラリ自体のサイズも、gzippedで19KBと比較的軽くて、動作自体も高速。応用範囲は広いかもしれません。 ライセンスはGPL
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」:phpspot開発日誌
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」 2009年05月28日- jQuery Ribbon - Home これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」。 利用すれば、コントロールのグルーピングや、ドロップダウンメニュー、階層リストなどのリッチなコンポーネントが実装できるみたい。 jQuery Ribbonを使ったリッチなＵＩ。Windows7っぽいデザインのＵＩがJavaScriptで。 アイコン付きのかっこいいメニュー 表示しているＵＩのテーマを選べる アイコンつきリスト アイテムのグルーピング ドロップダウンメニュー ちょっとこれは素晴らしいですね・・・。jQueryの優位性がますます高くなってしまいましたね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイ
jQueryやPHPを使った便利な仕組みのチュートリアル集:phpspot開発日誌
9lessons: jQuery and Ajax best 9lessons. jQueryやPHPを使った便利な仕組みのチュートリアル集。 9lessonsというサイトがあって色々便利な仕組みのチュートリアルが公開されています。 Twitter Like More Button with jQuery and Ajax. 「もっと読む」をajaxで実現するサンプル Exactly Twitter like Follow and Remove buttons with jQuery and Ajax Twitter風のフォロー、削除ボタンを実現するサンプル Delete a Record with animation fade-out effect using jQuery and Ajax. 行を削除してフェードアウトアニメーションをさせるサンプル jQuery Username Av
「複数RSSまとめ＆タブ化ジェネレーター」、公開します！
複数のRSSフィードをひとつのタブにまとめて読み込み、そんなタブを最大５つまで表示させるスクリプトジェネレーター、作っちゃいました！ その名も「複数RSSまとめ＆タブ化ジェネレーター」!! Yes！そのまんま！Yes!! タブに表示させたいタイトルと、それぞれのタブで読み込みたいRSSフィードのURLを入力するだけで、いともたやすくスクリプトが生成されます。あとはそのスクリプトを自分のサイトに貼っ付けるだけ。 どなたでも簡単に実装できます。もちろん使用無料のMIT-lisenceなフリーウェア！今回のエントリーは、smkn渾身のWEBサービス「複数RSSまとめ＆タブ化ジェネレーター」のご紹介です！ 「複数RSSまとめ＆タブ化ジェネレーター」について まずはどんなモンが生成されるのか、以下のサンプルをご覧ください。 サンプルページ 上記サンプルページのようなものを実装するために必要なマークア
Toggle Tutorial - jQuery CSS Toggle Effect - javascript toggle tutorial - simple Toggle Effect
I know there are a lot of toggle tutorials out there already, but when I was learning the basics of jQuery and the toggle effect, I had a hard time finding resources on how to switch the “open” and “close” graphic state. After reading a few tutorials and mix and matching techniques I was able to achieve this effect, but wanted to share it with those who experienced the same frustration that I had
Coming Soon
We're under construction. Please check back for an update soon.
[JS]ドリルダウンやフライアウトなど、アニメーションのエフェクトを持つナビゲーションのスクリプト -fg.menu
iPod風のドリルダウン型、飛び出すエフェクトのフライアウト型、シンプルなドロップダウン型など、アニメーションのエフェクトを持ったナビゲーションのスクリプトをfilament groupから紹介します。 Dropdown, iPod Drilldown, and Flyout styles demo: drilldown 上記のデモでは、クリックした項目のパネルが次々にスライドするドリルダウン型のナビゲーションで、上部にはパンくずが実装されています。 パンくず機能の代わりに、戻る機能の「Back」ボタンが実装されているものもあります。
[JS]パネルをスムーズなアニメーションで開閉するシンプルなスクリプト
Simple Toggle with CSS & jQuery demo デモではバーをクリックすると、パネルがスムーズに開閉します。 それぞれのパネルは個別に開閉するため、同時に開いた状態にすることも可能です。 バーはH2要素、パネルはdiv要素で実装されており、パネル内には画像やテキストなどを自由に配置することができます。 HTMLの基本構造 <textarea name="code" class="html" cols="60" rows="5"> <h2 class="trigger"><a href="#">Toggle Header</a></h2> <div class="toggle_container"> <div class="block"> <h3>Content Header</h3> <!--Content--> </div> </div> </textarea>
bassistance.de » jQuery plugin: Treeview
Note as of April 2010: While the plugin still works as it is, it has some shortcomings, and not maintained anymore. There are now plenty of alternative jQuery tree plugins, like jsTree. Note October 2010: Despite the above, I’ve moved the plugin to GitHub, fixed a bug when combining persist: “location” and prerendered: true, and released (tagged in Git) 1.4.1. Transform an unordered list into an e
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]クロスブラウザ対応、背景をアニメーションで変更するスクリプト -Blend
[JS]ホバー時に浮かぶエフェクトがとってもリアルなスクリプト