ドットインストール代表のライフハックブログ
JavaScipt libraries have made huge leaps and bounds in helping developers write code and develop products more quickly. jQuery is one of the most popular JavaScript frameworks, with powerful tools that improve the user’s interaction with Web applications. jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax. To help you take it up a not
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを5つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
jQueryのコードを良くする5つのTIPS 5 Tips for Better jQuery CodeでjQueryのコードを良くする5つのTIPSが紹介されています。 DOM中にデータを保存できるdataメソッドを使おう $('selector').attr('alt', 'this is the data that I am storing'); // then later getting that data with $('selector').attr('alt'); 「alt」などのHTMLにデータを保存しておくと後で取り出せなくなってしまうことがあるから良くない。 $('selector').data('meaningfllname', 'this is the data I am storing'); // then later getting the data with
はてブだと埋もれるのでこちらに書き足してきます。 jQuery 基本機能 本家 jQuery.com リファレンス jQuery 日本語リファレンス jQuery 開発者向けメモ jQuery リファレンス- openspc2 jQuery 1.2.6 リファレンス - StackTrace チートシート HTML/CSS, jQuery, WordPressなどウェブ制作者のためのチートシート集 - coliss スライド・関連情報 はじめての jQuery jQueryのプレゼンVIDEO - JAM LOG 第1回 Silverlight vs. jQuery+ASP.NET AJAX - @IT チュートリアル jQuery 入門 - openspc2 jQuery を使って Ajax 開発を単純化する - IBM jQueryの魔法 - All About jQuery ではじめ
はじめに 第4回はサイト(ページ)には必ず用意されているメニュー、それに関するプラグインについて紹介していきます。 プラグインを使うことで、サイトを差別化するための機能的/デザイン的なメニューをシンプルなHTMLから簡単に作成することができます。 お薦めメニュー系プラグイン メニューに関するjQueryプラグインもLightbox系のもの同様、様々なものが多数存在しています。今回も特徴的なもの3点をピックアップし、今回と次回、2回にわたり解説していきます。 Kwicks Kwicksはメニューの領域を、マウスオーバー/マウスアウトなどのイベントで収縮させるプラグインです。横方向のメニューだけでなく、縦方向のメニューにも利用することができ、収縮アニメーションのイージングや時間間隔も調整することができます(デモはこちらで確認できます)。 図1 Kwicks jQuery Multi Lev
フォルダ構成(サンプル) 初期設定 ファイルが用意できたところでHTMLに初期設定のJavascriptを記述していきます。読み込むJSファイルはjsフォルダ下のjquery.js、shadowbox-jquery.js、shadowbox.jsとなります。 初期設定コード <!-- jQuery本体 --> <script type="text/javascript" src="js/jquery.js"></script> <!-- jQueryアダプタ --> <script type="text/javascript" src="js/shadowbox-jquery.js"></script> <!-- プラグイン自身 --> <script type="text/javascript" src="js/shadowbox.js"></script> <script type="
It’s really amazing to see what one can create using jQuery. Developers just don't stop making incredibly interactive web applications every now and then. This post just demonstrates excellent examples of some of the best jQuery plugins out there. You can also take a look at the other jQuery Plugins in this series : 45+ Fresh Out of the oven jQuery Plugins 50+ Amazing Jquery Examples- Part1 So let
jQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavaScriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連、メニュー関連、フォーム関連、テキスト/リンク関連、その他、日本語未解説のjQueryプラグインを分類して紹介しています。 初心者でもすぐにリッチなサイトを作成可能ですので、ぜひjQueryプラグインをご利用ください Image Menu Form Text/Link Other W/O_JP
Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している
jGlycyを使えば、スクリプトを記述する必要は一切ありません。 <div jg="cycle"> <img src="/jglycy/img/muuu_01.gif" width="200" height="200" /> <img src="/jglycy/img/muuu_02.gif" width="200" height="200" /> <img src="/jglycy/img/muuu_03.gif" width="200" height="200" /> </div> これだけ。 「コードを1行も書かずに、リッチなページを」 が、jGlycyの目指すところです。 バリエーションも自在。
Ajaxを使った開発において、Prototype.jsなどのAjaxではレスポンスを全て指定したID内に入れてしまうことでごく簡単に複雑なレンダリング結果を表示できるようにしている。Ajaxというと、結果のXMLを操作して複雑にJavaScriptを操作しなければならないというイメージに比べてずいぶん単純になり、身近になった。 サンプル だがそれでは通信量が増えてしまうのも事実だ。ごくシンプルなデータを複雑なレンダリングにつなげる、こちらを使ってみよう。 今回紹介するオープンソース・ソフトウェアはPURE、JavaScript向けのHTMLレンダリングエンジンだ。 PUREはjQueryプラグインとして動作するソフトウェアで、複雑なレンダリングを実現しようと思うとなかなか難しいJavaScriptによるHTMLレンダリングを容易にしてくれるソフトウェアだ。 クリックするとデータを追加するサ
Thousands of free tutorials and online courses to help you learn software development from mobile devices to web applications and everything in between. Join our community to improve your coding skills and workflow. What would you like to learn? Our extensive learning guides provide a deep dive into various types of software development. Improve your WordPress knowledge, learn Ruby or PHP, get sta
Thousands of free tutorials and online courses to help you learn software development from mobile devices to web applications and everything in between. Join our community to improve your coding skills and workflow. What would you like to learn? Our extensive learning guides provide a deep dive into various types of software development. Improve your WordPress knowledge, learn Ruby or PHP, get sta
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く