jQueryを学ぶためのリンク集
1. 概要の理解 jQueryを一切知らない場合はまずは概要の理解から始めます。 ノンプログラマーのためのjQuery入門 http://www.slideshare.net/hayatomizuno/jquery-7665168 はじめてのjQuery http://higashizm.sakura.ne.jp/jquery_first/ 2. 基本的な使い方を理解する サンプルを見ながら具体的なコードを作成し理解を深めます。 40分で覚えるjQuery速修講座 http://ascii.jp/elem/000/000/498/498710/ jQuery基礎文法最速マスター http://blog.webcreativepark.net/2010/02/02-111519.html jQueryサンプル集 http://www.designwalker.com/2008/04/jque
livedoor Techブログ : 裏jQuery - 特殊なTriggerを作ってみよう
こんにちは。開発部でインターフェースエンジニアをやっております油井(あぶい)です。ライブドアでは主にjavascriptを中心としたクライアントサイド側の開発をやっております。 今回は裏jQueryと題しまして、普段から単にユーザーとして使っているだけでは決して知ることができないjQueryの裏技を紹介したいと思います。 注意 この記事で扱うjQueryは最新版の1.4で動かすことを前提としています(一つ前のバージョンである1.3.2でも動くことは検証済みです)。サンプルで使うjQueryセレクタの書き方は「jQuery」で統一しています。「$」に置き換えて読んでもらってもかまいません。 はじめに - jQueryで扱うイベントやトリガー javascriptがふんだんに使われた画面遷移の発生しないウェブアプリケーションではブラウザ上で発生するイベントやトリガーをうまく扱いこなすということ
jQueryでフォームの内容をJSONで投げ、受け取ったJSONをフォームに戻す方法 - ありの日記
今回RESTのサービスを使っていて、そのインターフェースはJSONになっている。リクエストもレスポンスも。サーバ側(Java)では、JSONICというJSONライブラリを使っていて、JSON形式の文字列をJavaのオブジェクトに変換したりまた、その逆を行ったりしている。 そこで、フォームの内容をがつっとJSONに変換して送信したり、また、JSONで取得したデータをがつっとフォームに戻したいなーと思って色々探してみた。 そのときのメモ。 フォームの内容をJSON形式の文字列にする方法。 まず、フォームの内容をJavaScriptのハッシュにする。その時formの内容を取得するserializeArrayというメソッドが用意されているのでこれを使う。 // フォームを取得 var form = $('form-id'); var param = {}; // フォームの内容を取得 // ser
これは新しい日付ピッカー実装用jQueryプラグイン「calendarPicker」:phpspot開発日誌
BugsVoice - turn bugs into opportunities これは新しい日付ピッカー実装用jQueryプラグインのjQuery.calendarPickerが公開されています。 通常、日付ピッカーというとカレンダーを想像しますが、今回紹介するものは次のようなUIで、１週間が基本となっています。 不要な日付を出来る限り非表示にすることで、分かりやすくなったりする場面もありそうです。 現在の日付は黄色の枠で表示されるようになってるみたいです。 オプションに値を与えることで、月、曜日の表示名カスタマイズをすることが出来るのでローカライズも容易ですね。 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 jQueryを使ったカレンダー型、日付入力補完ライブラリ
角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」:phpspot開発日誌
Free javascript date picker - popup date picker for websites and web apps - javascriptcalendar.org 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」が公開されています。 次のように可愛いUIがいい感じです。 カレンダーピッカーのデザインもいいものを使いたい際の１つの選択肢として覚えておくとよいかも 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 jQueryを使ったカレンダー型、日付入力補完ライブラリ 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン これは新しい日付ピッカー実装用jQueryプラグイン「calendarPicker」
システム屋以外向けの JavaScript 本探したけどいいの見つからず
今さらですが、書いている時点で4ヶ月前の情報ですorz ずいぶん前に HTML, CSS, 周辺技術関係の本を一度整理したことがあるけど、こういう感じで JavaScript の本てないかなーという要求が発生した。 14:56:55 >wtnabe< まともな jQuery 本てあるのかな。jQuery 本が存在してる のは知ってるけど。 14:57:26 >wtnabe< JavaScript を基礎から知る必要はないけど一つの幅として jQuery くらいなら使えるといいなぁという人にお勧めの本 てなんだろう？ 14:59:44 >wtnabe< monjudoh に DM 飛ばしまくると教えてくれるかな 15:07:43 >wtnabe< openspc の人の本があるな 15:08:36 <monjudoh> @wtnabe バージョンアップが速いので割といい本が出て もすぐに陳腐
JavaScriptからPHPの関数を呼び出せるインタフェース提供ライブラリ「jQPie」:phpspot開発日誌
jQPie (Jquery PHP interface extension) JavaScriptからPHPの関数を呼び出せるインタフェース提供ライブラリ「jQPie」。 <a>のonclickイベントからPHPの関数をキックするという仕組みが簡単に実装できます。 PHP関数の返り値を alert したりすることも出来ます。 例えば、以下のコードを見てみましょう。 <a href="#" onClick="$.getJSON('handler.php', { handler: 'json', callback: 'getarray' }, function(json) { alert(json.a)})">Test 1</a> .getJSON メソッドの第一引数に、キックするPHPのソースコードを指定、第二引数に、返り値をjsonで受け取る指定と、callback として、PHPの関数
マウスホイール操作が超簡単になるjQueryプラグイン:phpspot開発日誌
jQuery mouseWheel Plugin マウスホイール操作が超簡単になるjQueryプラグインがあるみたいですね。 サンプルを動かしてみたところ、いい感じに動作しました。 それぞれの要素上で、ホイールを動かすと、ちゃんと対象エレメントを取得できます。 サンプルには階層になってても上位伝播させず、 event.stopPropagation(); event.preventDefault(); で停止させる例も載ってます。 実際にどうやって使うかというと、これまたシンプルで、次のような感じ。 $('#test1').mousewheel(function(event, delta) { if (delta > 0) log('#test1: up ('+delta+')'); else if (delta < 0) log('#test1: down ('+delta+')');
iPhoneで使えるjQueryプラグイン·jQTouch MOONGIFT
iPhone向けのサービス提供となるとついネイティブアプリケーションに目がいってしまう。だがネットワークが必須なものであれば、アプリケーション開発にこだわる必要はない。むしろ審査やObjective-Cの習得などに工数がかかってしまう。 iPhoneでjQuery ならばもっと容易に提供するiPhone向けWebサービスの方が合理的だ。そこで使えるjQueryプラグインがjQTouchだ。 今回紹介するオープンソース・ソフトウェアはjQTouch、iPhone向けjQueryプラグインだ。 jQTouchはjQueryプラグインであり、iPhoneやG1などWebKitを使ったモバイルブラウザで利用できる。とは言え日本では主にiPhone向けになるだろう。iPhoneでよく利用される機能を容易に実装できるようになっている。 様々な機能が盛り込まれている 左右に移動するアニメーションはもちろ
Priit Haamer > Blog
Just released updated versions of Mac OS X dictionaries for Ruby and Rails, which you can download here: It took me some time since the Dictionary Development Kit was excluded from default installation of Mountain Lion and i had to make few changes to rubydictionary gem i use to build these dictionaries. Another news is that rubydictionary gem is now updated to version 1.0 and can be used to build
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
jQuery + Canvas ≠ Flash？·Primer MOONGIFT
Flashは多彩な表現を実現したり、クライアント環境に左右されたい機能を実現したりするのに便利な技術だ。最近では動画の再生はほぼFlashが独占している状態だ。だがデザインとプログラミングが融合している感があり、技術者にはあまり使われない技術でもある。 文字と図形を重ね合わせて表示 しかし表現の自由度は求めたい、そんな方はJavaScriptでできるFlashライクな技術を紹介しよう。それがPrimerだ。 今回紹介するフリーウェアはPrimer、jQueryとCanvasで実装するFlashライクな機能を実現するライブラリだ。ソースコードは公開されているが、ライセンスは明記されていなかったのでご注意いただきたい。 PrimerはjQueryとCanvasを組み合わせて図形や文字を描くことが出来る。初期の頃のFlashのような、簡単な図形を描き出すことが可能だ。APIもFlashライクに作
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (1) ドラッグ&ドロップでカラム幅を変更可能 | エンタープライズ | マイコミジャーナル
Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している
John Resig - Deep Profiling jQuery Apps
This evening I was playing around with the idea of profiling jQuery applications – trying to find a convenient way to completely analyze all the code that is being executed in your application. I’ve come up with a plugin that you can inject into a jQuery site that you own and see how the performance breaks down method-by-method. Here’s how you can try this plugin on your own site: Step 1: Copy sit
Re:一晩で覚えるjQueryの逆引き基礎サンプル7つ (でぃべろっぱーず・さいど)
一晩で覚えるjQueryの逆引き基礎サンプル7つ*ホームページを作る人のネタ帳 jQueryに書くとほってんとり入りできるらしいので便乗。というかリンク先で紹介されているサンプルコードにちょっと意義異議あり。 一個のサンプルは非常に単純な構造になっておりますゆえ、jQueryをすでにやったことがある人にとって必要ないものだということをあらかじめご了承くださいませ。 ということであれば、「jQueryらしい」書き方をした方が良いかなと思います。 で、僕ならこう書くってことで。 全般的に使われている$(document).ready(fn)は、$(fn)でショートカットできます。 $(document).ready(function(){alert('hoge');}) は、 $(function(){alert('hoge');}) こう書けると。 まあ、これはどうでもいいや。短く書けるって
jQueryベースの滑らかなグラフ描画ライブラリ「Flot」:phpspot開発日誌
Ruminations: Flot 0.1 released! It draws on inspiration from Plotr and PlotKit, and several other commercial packages. But also from venerable old gnuplot - there's nothing more boring than hand-picking axis scales so I wanted the default algorithm to be smart. jQueryベースの滑らかなグラフ描画ライブラリ「Flot」。 Flotを使えば次のようなグラフをJavaScriptで描画することが可能です。 コードは次のように書くみたいです。 <div id="placeholder" style="width:600px;height
テレパス・ラボ : target="_blank" を使わないで新しいウィンドウでリンクを開く
target="_blank" を使わないで新しいウィンドウでリンクを開く方法 ここで紹介されているようにtarget属性は非推奨となっているためXHTML準拠するためにはこれ以外の方法にて実現する必要があります。 リンク元ではprototype.jsを利用してすべてのpopupクラスのリンクに新規ウィンドウで開くjavascriptイベントをバインドしていますが、ここではjquery.jsを利用して実装してみましょう。 function initOpenNewWindow() { var popupEvent = function(event) { window.open(this.href); event.preventDefault(); event.stopPropagation(); } $("a.popup").each(function(i) { $(this).click
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
IBM Developer
