Google Chart API を jQuery で簡単に使えるラッパーライブラリ「jQuery Google Charts」:phpspot開発日誌
Google Chart API を jQuery で簡単に使えるラッパーライブラリ「jQuery Google Charts」 2009年07月08日- jQuery Google Charts 1.0 - Demo Site Google Chart API を jQuery で簡単に使えるラッパーライブラリ「jQuery Google Charts」。 たとえば、次のようなコードを書きます。 var api = new jGCharts.Api(); var opt = { data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]//mandatory }; jQuery('<img>').attr('src', api.make(opt)).appendTo("#bar1"); すると、次のグラフが簡単にページに挿入されます。 もちろ
Sliding Boxes and Captions with jQuery « Build Internet
Add an extra layer of information to your images with sliding boxes. This is now a plugin! Check out the announcement post for the Mosaic jQuery plugin. Check the project page for the latest release notes and features! The Basic Idea All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of yo
マウスオーバーで画像を拡大させるJavaScript「MagicalHover」
画像の拡大と言えばLightBox・・・と言わずに、こんなJavaScriptはいかがでしょう？ インラインで拡大画像を見せられるMagicalHoverです。 sponsors 使用方法 MagicalHoverからファイル一式をダウロードします。 <link rel="stylesheet" type="text/css" href="magicalHover-01beta1.css" media="screen" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="magicalHover-01beta1.pack.js"></script> <script type="text/javascript"> $(document).re
ユーザビリティに優れた画像ギャラリーJavaScript「jquery.showcase」
画像ギャラリーは、数多くあふれていますが、発端がLightBoxだったからか、あまりユーザビリティに優れているとはいえません。 jQueryプラグインのjquery.showcaseを使用すると、今何を見ていて、後何枚あるのかを明示することができ、わりとユーザビリティに配慮できます。 sponsors 使用方法 jquery.showcaseからjquery.showcase.1.0.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.showcase.1.0.js"></script> <script language="javascript" type="text/
[JS]画像だけでなく、テキストなども拡大表示できるスクリプト -AnythingZoomer
demo: calendar 仕組みは、通常表示用の画像・テキストとは別に、拡大表示用の画像・テキストを用意し、それをクリップして表示しています。 そのためデータが二重に実装するのが弱点です。 AnythingZoomerはjQueryのプラグインのため、実装にはjquery.jsが必要です。
[JS]パネルをペロッとひっくり返すスクリプト -QuickFlip 2
divで実装した2枚のパネルを使用して、裏表にペロッとひっくり返すスクリプトをJon Raaschから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="quickFlip"> <div>表のパネル<br /> <a href="#" class="quickFlipCta">click to flip</a></div> <div>裏のパネル<br /> <a href="#" class="quickFlipCta">click to flip</a></div> </div> </textarea>
[JS]滑らかにスライドするナビゲーションを実装するチュートリアル
滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。 ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマスクし、マウスのホバーでスライド表示させています。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li
Plugins | jQuery Plugins
Can't find a Plugin you are looking for? Check out the jQuery Wiki page. Are you a plugin developer? Please move your plugin over to this site.
selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js :: 5509
This domain may be for sale!
jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」
twitter facebook hatena google pocket Web2.0を個人レベルで実感させてくれたのが「LightBox」だと思います。 今では画像を表示する多くのブログで使用されています。 今回はこれをjQueryで実現したjQuery lightBox pluginを紹介します。 sponsors 使用方法 jQuery lightBox pluginからファイル群をアップロードします。 <script type="text/javascript" src="http://yourdomain/jquery.js"></script> <script type="text/javascript" src="http://yourdomain/jquery.lightbox-0.3.1.js"></script> <link rel="stylesheet" type
Interface elements for jQuery - About Interface
Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery. The collection is dual licensed with the MIT license and the GPL, which basically means you can use it for free for both non-commercial and commerci
j-carousellite
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB, yet very flexible and customizable to fit most of our needs. As if that wasn't enough, the best part is yet to come... You don't need any special CSS file or class name to get
[JS]jQueryのプラグイン33+1選 -2008年9月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 MopSlider オート・マニュアルに対応したコンテンツスライダー。 MopBox スライド機能付きの移動可能なボックスを表示。
CrossSlide
CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery's animation facility, so it is as portable across browsers as jQuery itself (a lot.) What does it do? CrossSlide can do a few different things, depending on how it's called: Slid
フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」:phpspot開発日誌
Autotab: jQuery auto-tabbing and filter plugin | Matthew Miller フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」。 電話番号入力欄や、郵便番号入力欄で、フィールドが複数に分かれている場合、桁数が決まっているのであれば、次のフィールドに自動で移ってくれた方が使い勝手はよくなります。 Tabで移動することは出来ますが、その処理を知らない場合はマウスで移動する人なんかもいそうですし、打つキー数も多くなります。 そこで、オンラインバンキングなどではよくある、規定の桁を入力した後は次のフィールドに自動で移ってくれるＪＳライブラリがjQueryベースで開発され、公開されています。 実装は簡単で、まず必要なＪＳを読み込みます。 <script type="text/javascript" src="jquery
入力後に自動でフォーカスを移動してくれるスクリプト: Autotab - ウェブユーザビリティ.JP
製品のシリアルナンバーや、郵便番号など、あらかじめ決まっている桁数の文字を連続で入力する場合に便利な「Autotab: jQuery auto-tabbing and filter plugin」の紹介です。 ユーザーに連続した数字や記号を入力させる場合には、ルールに基づいて固まりに分けて入力させると入力がスムーズになります。 そのような、データを固まりに分けてユーザーの記憶や理解を助ける手法のことをチャンキング（chunking）と言います。 入力する際にも「CDケースの裏に書いてあるシリアルナンバーをサイトの入力フォームに書き移す」などの際に短期記憶を使うので、この手法が有効です。 しかし、入力エリアを分けた場合のデメリットとしては、全て入力するための手間が増えるということが挙げられます。 通常の場合には、文字を入力した後に次に入力したい領域をクリックし、また文字を入力するというよ
jQuery 開発者向けメモ - 基本・サンプル
基本 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです． 独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます． JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも， Ajaxを利用したインタラクティブなページを作ることが出来ます． 以下のサンプルを見れば，JavaScriptらしい表記をほとんどする必要がないことがわかると思います． toggleサンプル 特定のブロックの表示・非表示を切り替えるのは以下のようなコードになります． $("#target_toggle").toggle("slow"); このブロックは，<p id="target_toggle"> です． Ajaxサンプル Ajaxでhello.htmlをロードするのは以下のようなコ
as3Query: alpha version (New Wave ActionScript) [TECH-NI Blog]
as3Query is an ActionScript3.0 port of John Resig's exellent JavaScript library jQuery 1.2.1. This port is released under the MIT and GPL licenses(as is the original jQuery). Documentation is NOT available. Please refer to the original jQuery Documentation. Most features are ported except for Ajax methods. Download Full source code for the engine and examples is hosted on a Subversion(SVN) server
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://onehackoranother.com/projects/jquery/tipsy/
jQuery Background Test