jQuery入門講座 使い方-名前空間
索引 ├ 使い方 目次 └ バグノート(1) 1章：jQuery入門 ├ jQueryのメリット ├ readyイベント ├ オブジェクトについて ├ メソッドについて ├ 情報の取得 ├ イベント(1) ├ イベント(2) └ 初歩なサンプル 2章：jQuery基礎 ├ thisについて(1) ├ thisについて(2) ├ jQueryとDOM要素 ├ 簡単な演出 ├ thisから辿る ├ 汎用的なアニメ(1) ├ 汎用的なアニメ(2) ├ アニメの停止 ├ アニメを管理する仕組み └ 汎用的なアニメ(3) 3章：jQuery発展 ├ イベントフロー(1) ├ イベントフロー(2) ├ イベントフロー(3) ├ 画像のプリロード ├ jQueryの高速化 └ メソッドチェーン 番外編：研究 ├ イベントを外す ├ cssアニメとの連携(1) ├ cssアニメとの連携(2) ├ cssア
「jQuery Mobile」を活用したスマートフォンサイト作成（中編）
はじめに 今回も、簡単にスマートフォン向けサイトを作成するために活用できるjQuery Mobileを紹介します。今回は2月に正式リリースされたばかりの最新バージョン1.3.0の新機能を紹介します。 対象読者 jQuery mobile、スマートフォンに興味があり、使ってみたい方 必要な環境と準備 執筆時点のjQueryの最新版は、1.9.1です。第1回を参考に、ダウンロードしてください。また、jQueryプラグインの基本的な使い方は、第3回を参照してください。 また、執筆時点でのjQuery Mobileの最新版は、1.3.0です。こちらからzipファイルでダウンロードできます。サンプルでは、htmlファイルと同じ階層にmobileというフォルダを作成しています。zipファイル中のimagesフォルダ（cssファイルが呼び出す画像ファイルが格納されたフォルダ）と、jquery.mobil
とうとうjQuery 2.0がリリースされました。 - kaz16a's blog
jQuery 2.0 Released とうとうIE8の終わりの始まりですね。 IE8が無くなるのは、まだ多大なシェアのあるWindows XPが無くならないといけないので、それでもまだ数年はかかるのでしょう。 しかし、本格的なHTML5+CSS3の時代の始まりのきっかけになると期待します。 で、何が変わったか少し見ておかないといけませんね。 IE８以下サポートせず 1.9の次は1.10となるそうです。今後の2.0系との互換性が気になります。 2.0は1.9と互換性あり これは助かりますね。 サイズが小さくなる jquery-1.9.1.min.js（92629byte） jquery-2.0.0.min.js（83095byte） なので、約１０％ほど小さくなってますね。ファイルサイズだけ見ると小さいでしょけれど、かなりのサイトでjQueryが使われていることを考えると、メリットは非常に
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
jQuery ページや要素の幅に合わせて文字サイズを変更してくれるプラグイン | Stronghold Archive
どうもこんばんは。今回は【jQuery ページや要素の幅に合わせて文字サイズを変更してくれるプラグイン】についてメモしておきます。数行追加するだけで簡単に実装できう上に、iphone等の様々なディバイスにも柔軟に対応してくれます。どこかで試してみても良いかもしれませんね。 SLABTEXT 挙動も安定していて使い勝手も良いです。カスタマイズ性も高そう。パディング等で全体幅からスペースを取ったサイズ調整もできます。span等にはCSSの追加が必要なようです。詳しくはSLABTEXTへ HTML <h1 class="slab">HEADLINES</h1> <script src="jquery-1.X.X.min.js"></script> <script src="jquery.slabtext.min.js"></script> <script type="text/javascrip
動画の一部をリアルタイムに透明に·jQuery seeThru MOONGIFT
jQuery seeThruは動画にリアルタイムにアルファチャンネルを当てはめて動画を透明にするライブラリです。 HTML5によって動画をJavaScriptから扱いやすくなったこともあって、videoタグやCanvasタグを使った面白い試みが増えています。今回は動画の一部に透明度を持たせるjQuery seeThruを紹介します。 上が元動画。下がそのアルファチャンネルだけの動画です。 下がその合成動画。背景が透明になっています。 こちらも。これは静的なマスクを作って、それを当てはめています。 マスクが当たった場所は透明になっています。 JavaScriptを使って動画の一部をリアルタイムに透明にしてしまうというのは驚きです。これを使うと動画の一部だけを再生するなんてこともできそうです。 jQuery seeThruはjQuery/JavaScript製のオープンソース・ソフトウェア（M
jQuery.load()をChromeで使う時にちょっとハマったこと | バシャログ。
こんにちは。さすがに見ないだろうと昔撮ったVHSビデオを、捨てるにあたってじっくり見てしまったminamiです。 小ネタです。HTMLファイルにちょっとした文言を読み込みたいときに重宝するjQuery.load()ですが、Chromeでうまく動かない場合があります。ちょっと引っ掛かってしまったので回避方法を調べました。 サンプルを作ってみた ものすごく簡単に以下のようなスクリプトを書きました。data.txtから読み込んだテキストを、div#txtPlaceに読み込みます。これをローカルでチェックしてみます。 function loadText() { var dataPath = "data.txt"; $("#txtPlace").load(dataPath); } firefox IE8 出ました。 出ません。なぜ！？参考ページを見ると、 Chrome: ローカルWebページからのア
jQueryで既存サイトの画像を「なんちゃって遅延ロード」する方法
jQueryを使って、既存サイトの画像を遅延ロードっぽく見せる方法、いわゆる「なんちゃって遅延ロード」について紹介します。 昨日エントリーした「画像を遅延ロードする定番jQueryプラグイン「Lazy Load」」ですが、投稿済み記事の画像に対して設定をひとつひとつ変更するのは現実的に厳しいと思われます。 とはいっても、他のサイトでページをスクロールすると画像がふわっと浮かび上がるアクションには憧れます。 ということで、既存サイトの画像を遅延ロードっぽく表示させる方法を考えてみました。 １．「なんちゃって遅延ロード」と称する理由 「なんちゃって遅延ロード」と称する理由は、ページをスクロールしたときの表示は遅延ロードされたようにみえますが、最初から遅延ロードの設定をしていないimg要素はページロード時に画像が先に読み込まれてしまうためです。 下のスクリーンショットは、遅延ロードの設定有無によ
jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記
jQueryのイベント記述方法はいくつかあり、大雑把におさらいしたのが以下の3パターンです。 まず一番基本的なのが $("a").click(fn) や $("a").bind('click', fn) です。click(fn)はbind('click', fn)の省略形です。 次にjQuery1.3で $("a").live("click", fn) という機能が出来ました。liveの良いところはDOM操作で出たり消えたりするエレメントに対して再バインド無しでイベント定義ができる利便性と、内部的にはbind個所がdocumentの1か所になり複数個所へのbindが無くなることによるメモリ効率と実効速度の向上です。 更にjQuery1.4.2で $("#foo").delegate("a", "click", fn) という書き方が出来るようになりました。これは特定要素以下に限定するliv
one(type, [data], fn) - jQuery API 1.4.4 日本語リファレンス - StackTrace
解説 マッチした要素に、1度だけ実行されるイベントハンドラをバインドします。 1度だけ実行されるということ以外は、bind(type, [data], fn)と同じです。詳細は、bind(type, [data], fn)を参照してください。 引数 type String: バインドするイベントを表す文字列。標準では以下のイベントが定義されています。 "blur", "focus", "load", "resize", "scroll", "unload", "click", "dblclick", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout", "mouseenter", "mouseleave", "change", "select", "submit", "keydown", "keypress", "key
テーブルをグラフに変換してくれるjQueryプラグイン:phpspot開発日誌
jQuery HighchartsTable plugin, from PMSIpilot テーブルをグラフに変換してくれるjQueryプラグイン。 CSVをダウンロードしてExcelでグラフ化、といった事は仕事でよく行う人も多いかと思いますが、jQueryを使ってテーブルをグラフにしちゃおうというプラグインです グラフはSVGで表現されるので非対応ブラウザでは表示ができない点に注意したほうがよさそうですが、管理画面やツールなんかで利用すると便利そうです。 棒グラフ。１つのチャートを比較 線グラフ ミックスバージョン 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル jQuery＋HTML5でカッコいいアニメーションす
8bitキャラクターを描画できるjQueryプラグイン「EightBit.js」:phpspot開発日誌
Jquery Eight-Bit Plugin 8bitキャラクターを描画できるjQueryプラグイン「EightBit.js」。 サイト上の描画ツールを使ってドット絵を描いて、そのドット絵を描画できるというもの。画像ではなくCSSなため、拡大してもうまい具合に８ビット感が出せます。 ボタンを押すと、グラフィックをコード化したものが出力されるのでそちらをデータとして描画できます なかなか面白い仕組みですが、画像の変換ツールなんかが出てきたら実用的ですかね 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 クールなドアノブ風の％グラフを描画できるjQuery Knob XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」 faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon
クロスブラウザで動作するクリップボード操作用jQueryプラグイン「Clipboard plugin」:phpspot開発日誌
クロスブラウザで動作するクリップボード操作用jQueryプラグイン「Clipboard plugin」 2010年06月15日- Clipboard plugin for jQuery クロスブラウザで動作するクリップボード操作用jQueryプラグイン「Clipboard plugin」 IE以外用にFlashを使ってクリップボードを使う機能はよく知られていますが、jQueryベースのクロスブラウザ対応のライブラリのご紹介です。 使い方が超簡単で、次のように1行記述するだけでOKです。 $.clipboard( "You clicked on a link and copied this text!" ); swf の位置をオプションで指定することなんかも出来るみたい。 jQueryを標準導入しているサイトには簡単に組み込めて便利そうですね。 関連エントリ FirefoxやChromeでも
jQueryでどこのセルが押されたか判定する方法 - にっき
テーブルタグ無いのどこのセルが押されたかが知りたかったので、その方法を調べてみた こんなテーブルを用意して、その中の何番目のセルが押されたかを調べるには <table class="target_table"> <tr> <td> 1個目 </td> <td> 2個目 </td> <td> 3個目 </td> <td> 4個目 </td> </tr> </table> $().click(function(){}) の第1引数でイベントオブジェクトを取得できるので、そのオブジェクトのindex()を取得すれば大丈夫 $(function() { $('.target_table td').click(function(event){ // currentTarget のindex()を取得 alert( $(event.currentTarget).index() ); // target
これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」:phpspot開発日誌
これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」 2010年01月26日- jQuery.sheet これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」。 参照に対応していて、A1 に 2 が入っていたとして、A2に「=A1*2」とするとちゃんと4と表示されたり、色々なおなじみのExcel 関数(ABS, AVERAGE, CEILING, COUNT, IF, MAX, MIN, PI, ROUNDなど)をそのまま使うこともできてしまいます。 デモページ 単にソート機能がついたり、そのまま編集できるだけではなく、本当にExcel っぽいところがすごいですね。 デザインは上記固定ではなく、色々なデザインテーマを適用することもできるようです。 あと、実装もjQueryプラ
jQueryで動的にscriptタグを生成して実行させる方法
何かの判断をJSで行った後に、scriptタグで外部JSを読み込んだりする事がありました。jQueryをつかって、scriptタグを生成したときに変な挙動があったので回避するメモを残します。 JSのイメージは、 scriptタグの記述をStringで書いて、 それをjQueryの＄を使ってタグを生成、 bodyタグへappendする流れです。NGソースjavascript
[javascript][jQuery] jQueryの便利なmapの使い方答えを知りたい | 答えを知りたい
lispでmapに初めて触れた時は「何、このめんどくさい関数？」と感じ、正直な話あまり触れたくもなかったのですが慣れてくるとこいつはとても便利な賢いやつです。 さてjavascriptでもmapが使えるか調べてみたらjQueryで提供されてました。 mapを使えば配列全部に関数を適用させて、返り値を配列で受け取れます。for文なんて使わなくてもええんやっ！！ 使い方の例 定番の累乗を求めるサンプル。 arr = [1,2,3]; arr = $.map(arr, function(n,i){return n*n;}); for(i=0;i<arr.length;i++){ alert(arr[i]); }
[javascript][jQuery] $(window).width() と $(document).width() 違い答えを知りたい | 答えを知りたい
$(window).width() と $(document).width() や $(window).height() と $(document).height() がどういう時に違う値を返すかわからなかったので検索したら Stack Overflow に簡潔でわかりやすい説明がされてたので紹介します。 When you have a scrollbar on the webpage. (スクロールバーが表示されてる時) わかりやすいですね。一応念のために書いておくと window が「ブラウザの表示領域」で、document が「ページ全体」です。 参考 jquery – When can $(document).width() and $(window).width() show different values? – Stack Overflow http://stackoverf
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Garmoshka
1216彩票-官网平台