ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
Great News! We’re reinventing FooTable to bring you a responsive table that’s better than ever! FooTable will be a WordPress Table Plugin, which will allow you to add responsive tables to your pages and posts. We want to create the tables that you need, like pricing and comparison table, or data tables. We want to include features that will make your life simpler. This might be versatile styling o
Overview Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.veloci
jScrollPaneの使用方法をご紹介しています。 jScrollPaneはCSSでデザイン可能なオリジナルスクロールバーのjQueryライブラリです。 公式サイト ※ このライブラリは、jQueryが別途必要です。 目次 デモ ダウンロードと設置 JavaScriptの読み込み 適用方法 スクロールバーのスタイル オプション デモ 次のデモは、CSSでbackground-colorとpadding、borderを指定しています。 スクロールはデフォルトのものです。 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text te
レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr
twitter facebook hatena google pocket 最近のサイトではメインビジュアルにもよく画像の切り替えが利用されています。 これをjQueryプラグインbox-sliderでぐりんぐりん切り替えてしまいましょう。 頭を悩ませるIE6も3Dエフェクト以外は対応しています。 sponsors 使用方法 box-sliderからファイル一式をダウンロード。 切り替えたい画像を下記の通り記述します。 <div class="slider-viewport"> <div id="id名"> <figure> <amp-img src="画像パス1"> </figure> <figure> <amp-img src="画像パス2"> </figure> <figure> <amp-img src="画像パス3"> </figure> </div> </div> あとはJav
追記:続編書きました。 リンクは一番下に 最近jQueryにはまっているひつじです。こんにちは。 jQueryに限らず、JavascriptでDOMをいじっていると var name = 'bsheep'; $('<div>').addClass('name').text(name).appendTo('#profile'); // // <div id="profile"></div> // ↓ // <div id="profile"><div class="name">bsheep</div></div> // こんな感じでDOMをその場で生成して埋め込みとかいう操作が結構あります。 でも、こういうの書いているとHTMLとscriptとを分離したくなってきますよね! この書き方のまま複雑なものとか作ってると、できあがりのHTMLの構造を読み取るための思考コストがかなり必
pjax - jquery plugin 10 pjaxはデータの読み込みと描画の冗長部分を省略することで非常に高速かつ低コストなページ移動を実現する、HTML5で実装される次期標準ブラウジング機能です。 pjaxはこのプラグインを使用することでサーバーに手を加えることなく簡単に導入できます。 最新版のダウンロード プラグインの最新版はGitHubで公開していますのでそちらからダウンロードしてください。 GitHub:https://github.com/falsandtru/jquery.pjax.js ファイル:https://raw.github.com/falsandtru/jquery.pjax.js/master/jquery.pjax.js 概要 サイト内のページ移動において指定したHTML要素(異なるコンテンツを持つ領域)のみ更新することでページ移動を高速化します。ajax
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 pjaxとは pjaxはpushStateとajaxを組み合わせた造語(pushState + ajax = pjax)となります。 pushStateはhtml5に新実装されたHistory APIのひとつで、javascriptからブラウザの履歴に直接挿し込む為に用意されているメソッドとなります。 詳しい詳細はこちらの記事を参考によろしくお願い致します。 HTML5 History APIについて 再びPjaxに関してなんですが、ajaxを用いて表示内容を書き換え、さらにpushStateを用いてそれに対応するURLへと置き換えhistoryも辿れるようにする技術のことです。 ajaxによるパフォーマンス向上が期待できる他、よく使用されている#!(hashbang)を
2012年6月4日 – jQuery Rain | jquery-handsontable @ GitHub 一見普通のテーブルだけどExcel風に 使えるjQueryプラグイン「Handsontable」。 Excelのテーブル風ウィジェットは色々 ありますがリッチすぎて重いようなものは使いづらかったりします。 2013年1月10日 – ParamQuery jQuery Grid Plugin 普通のテーブルをExcel風に超カッコよくしてくれる jQueryプラグイン「ParamQuery」 ありきたりなカッコいい、とはいえないような以下の テーブルがあったとします プラグインで初期化すれば、ソータブル、 ..
HTMLで作成した普通のテーブルでも、Microsoft OfficeのエクセルやGoogleのスプレッドシートのように美しく機能的なテーブルにする軽量のjQueryのプラグインを紹介します。 ParamQuery grid ソート、セルサイズの変更、インライン編集などもできます。 ParamQuery gridの特徴 ParamQuery gridのデモ ParamQuery gridの使い方 ParamQuery gridの特徴 商用利用可のオープンソース。 データのフォーマットはHTML, Array, XML, JSONなど。 ソート、ページング、カラムのリサイズに対応。 デザインはテーマでカスタマイズ可能。 バーチャルスクロール・レンダリング。 セルのインライン編集。 対応ブラウザはIE6/7/8をはじめ、主要な全てのブラウザ。 サーバーサイドのフレームワークはASP.NET,
【Sidr】Facebookアプリのようなメニュ... / 【jPanelMenu】横から出てくるサイドメニ... / 【Snap.js】フリック動作で出し入れが可能な...他...全4件
WEBアプリケーションを作っていると、インターフェースはWEBアプリがいいんだけど、操作性はEXCELなんかの方が使いやすい!ってよくありますよね。 たとえば、フォームで格子状に「input type=”text”」を配置しても、すぐ下のテキストボックスに移動したいのに、タブキーだと何回も押さなければならなかったり、下矢印キーでは移動できなかったり・・・ そんな時に使えるのが「Handsontable」です。 紹介されているサイトはいくつかあったのですが、使い方が説明されているサイトが見当たらなかったので苦労しました・・・ なので、簡単な使い方をメモ代わりに書いておきたいと思います。 まず、Githubから「Handsontable」をDLします。ちなみに、公式サイトはこちら。 単純に使うだけなら結構カンタンで、公式サイトにもあります。 DLしたファイルから「jquery.handsont
jQuery Vortex エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 製品画像などを動きをつけて回転させるなどの用途に使えそうです。 スピードの調整ができたり、奥行きなんかもパラメータで自由に調整できるので、平面的に回転させることもできるっぽい 関連エントリ スプライトアニメーション作成用jQueryプラグイン「Phantascope」 3Dのキューブのアニメーションで迫力あるエフェクトを付けられるjQueryプラグイン「HexaFlip」 アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」 CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」
問題 $(document).ready() と $(window).load() は何か違うの? 答え 違う。 readyはDOMが構築されたら実行される。 $(document).ready(function() { // Handler for .ready() called. }); これは次のよく見かける省略形と同じ。 $(function() { // Handler for .ready() called. }); loadは、使用される画像など含めて、ページが完全に読み込まれたら関数が実行される。 $(window).load(function () { // run code }); そのため $(document).ready(function() { // 画面にある画像の大きさを取得したいよ → できません× }); $(window).load(function(
The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blog http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/ jQueryの.bind(), .live(), .delegate()違いや仕組みの理解、また.delegate()の方が.live()より優れている理由について書かれています。 内容を簡単に書き出すと以下のようなことについて書かれています。 $('a').bind('click', function() { alert("That tickles!") }); .bind()は$(‘a’)に対してイベントを設定してる。 $('a').live('clic
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く