Grid-A-Liciousは、レスポンシブに対応したグリッドを敷き詰めるjQueryプラグインです。 PC、iPadの縦横、スマートフォンの縦横それぞれのリンクがついており、レスポンシブレイアウトを試すことができます。 Grid-A-Licious
クライアントサイドのJavaScriptライブラリであるjQueryのリファレンスをコンパクトな形式にまとめた書籍です。JavaScriptによるプログラミングを理解した読者に向けて、jQueryの概要、要素の操作、ドキュメント構造の変更、イベント、アニメーション、Ajaxといったトピックについて解説します。巻末にはクイックリファレンスを同梱。jQueryを使うプログラマであれば手元に置いておきたい書籍です。なお本書は『JavaScript 第6版』の一部を、独立したEbookとして再編集したもので、Ebookのみの販売となります。 はじめに 1章 jQueryの概要 jQueryの基本 jQuery()関数 クエリとクエリ結果 2章 要素のゲッタとセッタ HTML属性の取得と設定 CSS属性の取得と設定 CSSクラスの取得と設定 HTMLフォーム値の取得と設定 要素コンテンツの取得と設定
Lightweight Footprint Only 30kB minified and gzipped. Can also be included as an AMD module CSS3 Compliant Supports CSS3 selectors to find elements as well as in style property manipulation What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る/進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
JavaScript Advent Calendar 2010 : ATNDのネタ jQuery とは何か ( 1分 ) オープンソース(MITライセンスとGPLのデュアルライセンス)のJavaScriptライブラリ。 JavaScriptで「AJAXでとってきたデータを挿入したい。終わったらアニメーションでメッセージ出して」みたいなことをCSSセレクタなどを活用しつつ割とラクに実現する。 jQuery のインストールとか ( 1分 ) http://scriptsrc.net/ 一番左上のコピーを押せ。 押したらHTML内のに入れろ。 jQuery の基本的な使い方(セレクタ編) ( 1.5分 ) $('#title').css('color','red');上記の内容で「id属性に'title' と指定された要素の style属性 に color: red; を指定」することになる。
2010年08月19日01:00 カテゴリ書評/画評/品評Lightweight Languages $(DHTMLcoders).read(this) || throw your.job - 書評 - jQueryクックブック オライリー矢野様より献本御礼。 jQueryクックブック jQuery Community Experts / 株式会社クイープ訳 [原著:jQuery Cookbook] これでなくなった。 jQueryを使わない理由が。 DHTMLを利用する全ての人、必携。 特にHTMLやCSSを書いても、JavaScriptはそれほど書かない人。これであなたにも書けるようになります。 本書「jQueryクックブック」は、今や最重要のJavaScript Libraryといっても過言ではないjQueryの手引書。 目次 まえがき - John Resig はじめに jQuer
jQueryのレシピをベストプラクティスとともに幅広く収録しています。jQueryコミュニティの第一線で活動する著者陣が、必要な情報とテクニックを網羅して提供。 日々のプロジェクトにjQueryを使う一流のフロントエンド開発者たちのパターンやプラクティスが盛り込まれており、jQuery入門とその基礎的なベストプラクティスの解説からはじまり、実際的な課題に対するレシピをトピックごとに取り上げます。読者は、jQueryの基礎的なテクニックをふまえながら、画期的な問題解決のためのテクニックやアイデアを吸収することができるでしょう。jQueryを使って作業を行う、またはjQueryを使いたいと考えている開発者が探し求めていた書籍です。 まえがき はじめに 1章 jQueryの基礎 レシピ1.1 HTMLページでjQueryライブラリコードをインクルードする レシピ1.2 ページの読み込みが完了する
個人的にjQuery関連のブクマ が分かりにくくなってきたので 整理も兼ねてシェア。プラグ インを探す時にだいたい巡回 しているサイトをまとめます。 かなり情報が多くなってきたjQuery。使いやすいし、知識の無い僕でも簡単に使えるので重宝してます。そんなjQueryですが、多すぎて探すのも大変ですね。以前ご紹介したサイトも兼ねて、ブックマークの整頓がてら、順回しているサイトをご紹介します。 codrops jQueryと言えば個人的にここを思い浮かべます。情報も新しく早い。英語OKならRSS購読推奨です。 codrops css-tricks こちらはWebデザイナー目線で情報を配信しています。有益jQuery情報多数ですが、タグやカテゴリが無い(あるかもだけど、見当たらない)のがおしいところ。/tag/等も404なんですよね・・最新記事はサイドバーに表示されます。 css-tricks
ページ内リンクでスクロールをスムースにするスクリプトは良くありますが、アレってもっとスムーズにスクロール出来ないのかなーとか思いますよね。僕は思います。 もっとスムーズにするのは僕には難しいので、普通のスムーススクロールがスムーズに感じられるように、スムーズにスクロールしないjQueryプラグインを作りました。 ダウンロードとデモ jdtscroll.js デモを見る 導入方法 1. jQueryとjDTScrollを読み込む <script src="jquery.js"></script> <script src="jdtscroll.js"></script> 2. 実行する $() で対象にする要素を指定します。ページ内リンクなのでフラグメント識別子が付いてるっぽいアンカーを指定するのがいいですね。 jQuery(function($) { $('a[href^="#"]').jd
シックス・アパート株式会社は4月1日、恋人と過ごすよりはるかに多くの時間をMovable Typeの管理画面と過ごしているWeb開発者・デザイナーのために、なんだか懐かしい気持ちになれるJavaScriptライブラリ「web-old-days.js」を、GPLv2ライセンスで公開した。 このJavaScriptライブラリは、期間限定で開設されたMoveble Type 5最新テーマ機能デモンストレーションページ「しっくす・アパートの部屋」で利用されている。「テーマについて」のロゴをクリックすると、インストール方法や使い方を詳しく見ることができる。 「web-old-days.js」では、ソーシャルウェブコミュニケーションのオピニオン・カンパニーであるSix Apart社が誇る最新のJavaScriptテクノロジーにより、マウスカーソルの後ろを任意の画像が追いかけるjQuery.cursor
最近、社内で PHP Spidermonkey が流行って(?)いるようです><! Cybozu Inside Out: SpiderMonkeyを使ってPHPでサーバーサイドJavaScript id:ama-ch さすがです>< というわけで 僕も、 PHP の Spidermonkey でどのくらいのことが出来るのか試してみました>< まず、 Hello, world! <?php // new して $js = new JSContext(); // print 関数作って $js->registerFunction(function($v) { print $v; }, 'print'); // こんにちはこんにちは! $js->evaluateScript('print("Hello, world!!")'); Hello, world!おおお、簡単! 次は、 id:m-hiy
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
昨日に引き続いて、今日も作成中の Google App Engine アプリ用のUI部品の作成。HTMLの一部に記述された(もしくは別途JSONで取得した)ワード・リストの入力を autocomplete を使って簡単にしようという試み(Google Suggestのようにダイナミックにリストを取得する必要はない)。 そこで、まずは既存のライブラリ・プラグインの調査から。必要とする人も多いようで、少し調べただけで20個ぐらい見つかる。デモを見て5つに絞ってからそれぞれのソースコードを解析。例によってどうしようもない品質のコードもあるので、結局のところたどり着いたのは、比較的コードがきれいなこの二つ。 jQuery Autocomplete Mod JQuery Plugins by Dylan Verheul - autocomplete どちらかをそのまま使っても良かったのだが、どちらも
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
こんにちは、中川です。 アシアルブログの検索でも利用している、suggest(入力補完)機能、便利ですよね。 以前「jQuery用プラグイン「jquery.suggest」を使って入力補完機能を実装してみる」という記事で松田がライブラリ紹介しています。 しかし、「jquery.suggest」ですが、表示が味気なかったり、カスタマイズ面で、若干モノ足りない部分が出てきました。。。 で、補完機能を実装する為のJavaScriptですが、いろいろ探せば結構たくさんでてきまして、その中でも使いやすく、機能も豊富でカスタマイズもしやすいjQueryプラグインの「Autocomplete」というものを見つけましたので紹介したいと思います。 ■ダウンロード先 http://plugins.jquery.com/project/autocompletex ■デモ ※適当にアルファベットを2文字くらい入力
Web上で見やすいグラフを作成する手法としては、画像で生成する、Flashで生成するかのどちらかが多かった。稀にJavaScriptで生成するタイプもあったが、Canvasタグを使う関係上、IE6では表示できず業務アプリなどでの利用は難しかった。 JavaScriptのみでグラフを表示する だが、例えCanvasを使っていたとしてもライブラリが対応していれば問題ない。そこで試したいのがjqPlotsだ。 今回紹介するオープンソース・ソフトウェアはjqPlots、jQueryベースのグラフ描画ライブラリだ。 jqPlotsはCanvasタグを使っているが、対応ブラウザはIE6〜IE8、Firefox、Safari、Operaとなっている。筆者環境では試していないが、IE6でも恐らく大丈夫なのだろう(ぜひ試していただきたい)。これだけ多数のブラウザに対応していれば一般向けWebサービスでも使え
※ 画像は公式サイトより ファミコン世代ではお馴染みのコナミコマンド。いわゆる「↑↑↓↓←→←→BA」を打つと何らかのチート(大抵は最強装備)がおきる。グラディウスが有名だが、他にも魂斗羅、サイレントヒル、Dance Dance Revolution、メタルギアソリッドなどでもできるようだ(via Wikipedia)。 見た目は普通のページ コナミのゲームだからこそのコナミコマンドではあるが、それを自分のWebサイトでも実現しようというのがCheat Codeだ。 今回紹介するフリーウェアはCheat Code、jQueryでコナミコマンドを実装するライブラリだ。ソースコードは公開されているがライセンスは明記されていなかったのでご注意いただきたい。 Cheat Codeを読み込むと、Webサイト上でコナミコマンドを入力した際に指定した処理を呼び出せるようになる。Gmail調にデザインを変
目的を持ってAjaxを使うためにjQueryの文法を知ろう:jQueryで学ぶ簡単で効果的なAjaxの使い方(2)(1/3 ページ) いま話題の「jQuery」を使って、目的を持ったAjax開発の効率化や使いどころ・注意点などについてサンプルを見ながら解説していきます。Webデザイナ/プロデューサーも必見! 連載第1回の「Aptanaで始めるJavaScriptライブラリ『jQuery』超入門」では、Ajaxを使うためのJavaScriptライブラリとしてjQueryの使い方を紹介しました。実際にAjaxを使ったシステムを作るときに、Ajaxを使うことが目的になってしまっている場合があります。残念ながら、このようなプロジェクトは失敗することの方が多いのが現実です。本来の目的というものは、Ajaxを使ったシステムによる業務の効率化であったり、ユーザビリティの改善によるリピータの確保であったり
JavaScriptは手軽で、実用的なプログラミング言語 どのくらい手軽かといえばJavaScriptを始めるのに(HTMLとCSSは出来た方が良いけど)予備知識はほとんど必要なくて、ブラウザとエディタさえあればすぐにJavaScriptを動かすことができる(FirefoxにFirebugを入れればコンソールでその場実行できるのでエディタも(リロードも)不要)。 その上実用性も十分で、最近のウェブサービスのバックエンドはPerlやPHP、JavaにRuby、Pythonなどなど様々だけど、フロントエンドは必ずといっていいほどJavaScriptが使われている(FlashもあるけどフルFlashサイトでない限りJavaScriptも使われているし、そもそもFlashを表示するのにJavaScriptが使われていたり)。とにかくJavaScriptが必要とされる場面はすごく多い。 と、こんな理
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ?'); }, function(){ $(this).text('ヌー'); } );
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く