Webデザインの表現力に差をつけるのは、デザインのクオリティと仕掛けのおもしろさだ。Webならではのインタラクティブな表現技術は、これからますます発展し広がっていくだろう。この連載では、ユーザーを魅せるさまざまなデザインや仕掛けの方法を紹介していく。 文:linker
洗練されたインターフェースを実装したい。 そんなときに参考になるのが、『”Outside the Box” Navigation with jQuery』。MacのStackの動きを実装するjQueryです。 MacのDock風の動きはよく見られますが、Stackの動きを作っていますね。動きが軽快でかなり気持ちいいです。HTMLはul, liでクリーンに書かれていますね。 デモは以下から。 Demo – see it in action 一度見てみてください。 “Outside the Box” Navigation with jQuery いろいろぱつぱつだったけどようやく少し落ち着いた。一つリリースできて、もう一つリリースできそうで、いい感じです。クライアントに喜んでもらえるとがんばった甲斐がありますね。
これは面白い!jQueryでバーコードを描けるプラグイン「jQuery BARCODE」 2010年02月24日- BARCODE : JQUERY PLUGIN TO CREATE BARCODE ONLINE jQueryでバーコードを描けるプラグイン「jQuery BARCODE」というものがあるみたいです。 普通画像を描画というとサーバサイドという発想が出ますが、jQueryを使ってJSでバーコードが描画出来ます 試しに携帯で読み取ってみたらちゃんと読めました。 実装も次のようにとっても簡単で、第一引数にデータと、第二引数にバーコードのタイプを埋め込めばいいみたい。 <div id="bcTarget"></div> $("#bcTarget").barcode("1234567890128", "ean13"); ean8, ean13, code11, code39, code
目的を持ってAjaxを使うためにjQueryの文法を知ろう:jQueryで学ぶ簡単で効果的なAjaxの使い方(2)(1/3 ページ) いま話題の「jQuery」を使って、目的を持ったAjax開発の効率化や使いどころ・注意点などについてサンプルを見ながら解説していきます。Webデザイナ/プロデューサーも必見! 連載第1回の「Aptanaで始めるJavaScriptライブラリ『jQuery』超入門」では、Ajaxを使うためのJavaScriptライブラリとしてjQueryの使い方を紹介しました。実際にAjaxを使ったシステムを作るときに、Ajaxを使うことが目的になってしまっている場合があります。残念ながら、このようなプロジェクトは失敗することの方が多いのが現実です。本来の目的というものは、Ajaxを使ったシステムによる業務の効率化であったり、ユーザビリティの改善によるリピータの確保であったり
本稿ではまず、そのいくつかを紹介しましょう。 すぐにjQuery 1.4.1がリリース! CDNも対応 また、jQuery 1.4記念キャンペーン中にバグ修正版のjQuery 1.4.1がリリースされました。その後、jQuery 1.4.1のリリースに伴い、グーグルとマイクロソフトからCDN(Content Delivery Network、詳細は連載第1回「jQuery、プラグイン、jQuery UI、Web経由のCDNとは」を参照)もリリースされています。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/jQuery/jquer
色々とjQueryのサンプルやプラグインが掲載されていて、眺めてるだけで楽しくなるエントリー。 ナビゲーションメニューで悩んだ時に使えそうです。 45 jQuery Navigation Plugins and Tutorials - Noupe さて、いまや多くの人たちから支持を得ているjQueryで、もっと楽しいブログにしてみるのもいいかもしれない。 jQueryは何もWEBサイトだけのものではありません。条件さえクリアすればブログだって使えるのです。 あなたのブログがほんの少しのjQueryで生まれ変わるかもしれない。 わかる方はさくっと上のリンクを叩いて色々試して見てください。 jQueryってそもそも何、って言う人が居ましたら以下を。 jQueryって、美味しいの? 結構美味しいです。 多くの方に支持されるにはやはりそれなりの理由があります。 超、簡単に説明すると あなたが書いた
時が経つのは早いもので、ぼーとしてたらもう1月も終わりそうですね。外村です。 先日リリースされたjQuery1.4で新しく追加されたメソッドや新しい使い方ができるようになった機能を全部ではないですがいくつか紹介します。以下に変更点が全て掲載されているのでそちらも参照するといいと思います。 Version 1.4 ? jQuery API 新規で追加されたメソッド 1. nextUntil()、prevUntil()、parentsUntil() 指定したセレクタまでの要素を返します。以下の例ではitem3とitem4の後ろにテキストが追加されます。 <ul> <li id="item1">item1</li> <li id="item2">item2</li> <li id="item3">item3</li> <li id="item4">item4</li> <li id="item5
大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」 2010年01月20日- jQuery Plugin: LiveFilter 1.0.1 | Mike Merritt | Digital Inferno 大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」。 1ページ内にリストが多く表示されていると探すのが大変ですが、LiveFilterを使えば瞬時に対象を探すことができます。 インプットボックスに検索したい文字列を入れると、一気に対象が絞り込まれ、好みのものがすぐに見つかるでしょう。 そんなの、グーグルツールバーやページ内検索を使えばいいじゃないか、という方もいると思いますが、それらの存在が知らない初心者の方に向けたページの場合は威力を発揮しそうです。 パソコン中級者や上級者の方に向けても、
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです(ブラウザごとにクッキーに依存した文字数制限などは存在すると思います) こういうことを1からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ
2010年1月14日、jQueryの最新版1.4がリリースされました。 本家のサイトをはじめ、新機能のサンプルコードや1.3.2との後方互換について紹介します。 jQuery 1.4 Released jQuery 1.4のダウンロードとリリース情報 jQuery 1.4のダウンロードや詳細な情報は、下記ページをご覧ください。 jQuery 1.4 Released – The 14 Days of jQuery 性能は1.3.2と比較して、上のキャプチャのようにほとんどの面でパフォーマンスがより改善されたものとのことです。 jQuery 1.4 API チートシート jQuery 1.4に対応したチートシートです。 PDF版とPNG版も用意されています。
かっこいいスライドギャラリーを実装したい。 そんなときにおすすめなのが、『GalleryView』。動きの洗練されたjQueryのスライドギャラリーです。 キャプションを付けられたり、画像だけフェードイン&アウトで切り替えたり、いろいろなタイプがありますね。しかも動きがかなり気持ちいいです。 デモは以下から。 Default Implementation Panels Only – Lightbox style gallery ソースもシンプルになっていますね。 ぜひ見てみてください。 GalleryView: A jQuery Content Gallery Plugin アバターを見てきました。迫力があって感動しましたね。
jQuery: The Write Less, Do More, JavaScript Library jQueryチームは2009年1月14日(米国時間)、最新のメジャーバージョンとなるjQuery 1.4を公開した。jQueryはJavaScriptで開発されたAjaxアプリケーションフレームワーク。軽量で高速、さまざまなシーンで採用されるもっとも人気のあるフレームワークのひとつであり、将来のFirefoxでもデフォルトで採用されるとみられる。 jQuery 1.4では1年間に渡って取り組まれた開発の成果が取り込まれている。より開発を便利にする機能の追加、テストケースカバレッジを広げ包括的なバグフィックスの実施などがある。しかし、もっとも注目されるのは、実行速度をさらに高速化させた点にある。 主要メソッドの呼び出し回数比較 - jQuery 1.4 Releasedより抜粋 .css(
普通と違った、奥行きのあるインターフェースを実装したい。 そんなあなたにおすすめなのが、『jQuery Roundabout』。jQueryで実装する、奥行きのある回転テーブルの動きです。 シンプルなul, liのHTMLを、奥行きのあるインターフェースにしてくれます。しかもクリックすると、前面にぐいっと回転して出てきます。 以下のようなデモも用意されていて、かなり刺激的なことになっています。 Standard Roundabout in Action Clock 一度見てみてください。 jQuery Roundabout ブログデーになりつつあるな。。今日はインプットが多すぎました。。朝までがんばるぞ。 P.S. 今気づきましたが2つとも田口さんとかぶってしまいましたすんまへんm(_ _)m
jQueryをよく使う人に使えそうな7つのチートシートがまとまっています。 内容が被ってしまう部分もあると思いますが、7種類の中から自分が使いやすいものを組み合わせて置いておくと便利ですね。 ajaxブームの2005年から4年。すっかりjQueryが地位を確立してしまった感がありますね。 以下のエントリを参照してください。 7 jQuery Cheatsheets For Every Designer & Developer to Have | TutZone 関連エントリ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い GoogleMapみたいに画像をズーム&グリグリ移動できるjQueryプラグイン「Mapbox」 少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」 jQuery用のGUIコンポーネントプロジェク
2009年に紹介したものを中心としたjQueryのプラグイン100選です。 カルーセル・ニュースティッカー関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 角丸関連
ページ内に雪を降らせられるjQueryプラグイン「jSnow」。 好きな文字をページ内に雪を降らせたような感じで浮遊させることができます。 デモページを見てみましょう 使い方は簡単で、flakeCode に配列を指定すると文字が指定でき、flakeColor 指定で色を指定できます。 $().jSnow({flakes:30,flakeCode:["♠","♣"],flakeColor:["#f00","#00f"]}); ちょっとしたドッキリエフェクトとして覚えておくと使えるかもしれませんね。 以下のエントリを参照してください。 jSnow, a jQuery plugin for creating falling snow effect on your website | DuMmWiaM.com
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 個人的に必要になるかもと思ってメモ。 テキストや画像にエフェクトを与えて Webサイトを動きのあるサイトにする 手助けをしてくれるjQueryのプラグイン をいくつかご紹介します。 コンテンツに対するユーザーの興味を高めたり、画像を使用せずテキストを装飾したりと、使い方次第でいろいろ用途がありそうです。 Sliding Door Effect マウスオーバーで画像が4隅に開きます。動きも素敵。 Sliding Door Effect / デモ Rainbows テキストにグラデーションや影をつけます。これは凄いですね。 Rainbows / デモ Opacity to Show Focus マウスオーバーしたコンテンツ以外に半透明のエフェクトを掛けるjQueryプラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く