jQueryを使ってフォトライブラリを作ろう | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座
いまさら聞けない、jQuery。jQueryを使ってフォトライブラリを作ろう これから主流になっていくであろうHTML5は、JavaScript無しでは語れません。 当講座でも、これからHTML5+CSS3の作例を紹介するにあたっては、jQueryを使うシーンが多くなるでしょう。 そこで、第一回目となる今回は、jQueryプラグインに頼らず、jQueryだけを使ってフォトライブラリを作って、改めてjQueryの仕組みをおさらいしましょう。 セレクタを理解する。 jQueryを使うと、ブラウザに依存することなく、CSSライクなセレクタで、とても簡単にDOM要素を検索することができます。 具体的には、$("CSS文字列")と入力すると、CSSで指定した要素を検索してjQueryオブジェクトを返してくれます。 いくつかサンプルを見ながら、セレクタの使い方をおさらいしてみましょう。 ※DO
Selectors - jQuery 1.3.2 日本語リファレンス
Selectors/API/jQuery 基本 #id 指定されたidを持つ要素を選択する。 element 指定されたタグ名の要素を選択する。 .class 指定されたクラスを持つ要素を選択する。 * 全ての要素を選択する。 selector1, selector2, ..., selectorN 複数のセレクターを指定して集合要素を選択する。 階層 ancestor descendant ancestorを先祖に持つdescendantを選択する。 parent > child 親子関係を指定して要素を選択する。 prev + next 前後関係を指定して要素を選択する。 prev ~ siblings prev以降の兄弟関係にある要素を選択する。 基本フィルタ :first 先頭の要素を選択する。 :last 末尾の要素を選択する。 :not(selector) 指定したセレクターを
Prefix free: Break free from CSS vendor prefix hell!
-prefix-free Break free from CSS prefix hell! Only 2KB gzipped -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. “[-prefix-free is] fantastic, top-notch work! Thank you for creating and sharing it.” — Eric Meyer Features Processes every stylesheet in <link> or <style> elements
フォーム内容が正規表現にマッチしなかったらヒント表示ができるjQueryプラグイン「InputNotes」:phpspot開発日誌
フォーム内容が正規表現にマッチしなかったらヒント表示ができるjQueryプラグイン「InputNotes」 2012年07月12日- InputNotes jQuery Plugin フォーム内容が正規表現にマッチしなかったらヒント表示ができるjQueryプラグイン「InputNotes」 文字をタイプしていて、エラーがある場合はその場で表示してくれるプラグインです。正規表現によって入力ルールを定義出来るのが特徴 数字は禁止のtextarea。数字を入れると「Do not type numbers!」となります 数字だけを入力するルールの場合。 数字なら色を変えてOK、みたいな表示にできる フォームのバリデーションの１選択肢として使えそうですね 関連エントリ クレジットカード番号をバリデートできるjQueryプラグイン「Smart Validate」 お絵かきでCAPTCHAできるようにす
jQuery Mobileでスマホサイトを作ろう！国内外で制作されているサイトやjQuery Mobileについて | jQeryMobileでサイトをつくろう
jQuery Mobileとは？ jQuery Mobileは、jQueryをベースとした、「スマートフォン向けフレームワーク」です。 もっと簡単に言うと、「スマートフォン向けコンテンツ制作の土台を作ってくれるソフトウェア」です。 スマートフォン向けの直観的かつ使いやすい、ネイティブアプリケーションさながらのページやUI※1が、瞬時にしてできあがります。開発者はわずかなHTMLやJavascriptを書くだけです。 「UI」 ※1ユーザーインターフェースの略。jQuery MobileはわずかなHTMLの記述のみで、リストやボタン、ナビゲーションバーなどのスマホ向けUIを自動構築してくれる。 2010 年10 月にアルファ版がリリースされ、2011 年11 月ついにjQuery Mobile 1.0正式版が公開されました。現在も、jQuery の開発者であるJohn Resig 氏（@je
jQuery Mobileページの基本構造を理解しよう（1/3） - ＠IT
これらのフレームワーク／ライブラリを利用することで、デバイスの違いを（全くでないにせよ）あまり開発者に意識させることなく、標準的な枠組みでスマートフォン対応のアプリケーションを開発できるようになる。 スマートフォン対応のフレームワークは歴史も浅く、まだまだデファクト・スタンダードといえるものはないものの、現時点で最有力候補の一角と目されるのが、本連載のテーマでもある「jQuery Mobile」だ。 ■jQuery Mobileとは？ jQueryそのものについては本稿の読者諸氏であれば、すでに既にご存じであろう――JavaScriptライブラリのデファクト・スタンダードだ。「Write Less, Do More（よりシンプルなコードで、より多くの処理を）」をモットーに、シンプルな構文でありながら機能性も高いことから、近年急速にユーザー数を増やしている。何千、何万にも及ぶプラグインによっ
jQuery MobileでJavaScriptプログラミング ― グローバル設定とイベント ―（1/2） - ＠IT
連載：jQuery Mobile入門 第5回 jQuery MobileでJavaScriptプログラミング ― グローバル設定とイベント ― 山田 祥寛 2012/05/17 前回までの内容で、マークアップだけで賄えるjQuery Mobileの主な機能をおおよそ解説した。jQuery Mobileを利用することで、JavaScriptのコードすら記述することなく、ネイティブ・アプリ・ライクなサイトを作成できることを実感いただけたと思う。 もっとも、jQuery Mobileの魅力は、その手軽さばかりではない。JavaScriptのAPIも充実しており、独自の機能をごく手軽に実装できる。連載第5回となる本稿では、それらJavaScript APIの中でも、「グローバル設定」と「イベント」について解説していく。 ■jQuery Mobileの動作をカスタマイズしよう ― グローバル設定 j
［4］写真表示、アップロード、評価パネルのプラグインを使う
SliderKitは、さまざまな画像スライダーを実装するためのプラグインです。簡単な前後スライダーはもちろん、フォトギャラリー、スライドショー、カルーセル、タブメニューなど、さまざまな用途に対応しています。スライダー操作をマウスホイールやキーボードでできてしまうので、使い勝手も優れています。リッチなだけあってマークアップやスタイル規則はやや複雑ですが、それも標準で提供されているサンプルをもとに修正していけば、かなりのことを簡単に実現できてしまいます。ただし、Chrome環境ではキーボードによる操作はできないようです。 リスト1は、SliderKitで実装したフォトギャラリーです。改変する場合も、タグの構造や部品単位でclass属性は決まっていますので、不用意に変更しないように気を付けてください。 正確には、自分で一からスタイルシートを用意する場合、photosgallery-caption
［2］メソッドチェーンとイベント処理
ポイント4 繰り返し処理は不要 jQueryオブジェクトでは繰り返し処理を意識する必要がありません。 $()関数は条件によっては複数の要素を返すことがあります。例えば、図2の例でも$()関数は複数の＜img＞要素を取り出しています。うれしいことに、jQueryオブジェクトはこれら要素のすべてに対して、「.」以降のメソッド部分の処理を実行してくれるのです。 一般的なJavaScriptであれば、要素のセットから一つずつ要素を取り出し、処理していく必要があります。JavaScriptを理解している人であれば、まずはfor命令の利用を思い浮かべるでしょう。しかしjQueryではこのような手間をかける必要がありません。この性質もまた、jQueryがシンプルにコードを書ける理由となっています。 ポイント5 メソッドは連結して呼び出せる 図3のリストに、ちょっとだけコードを追加してみましょう（リスト1
［1］JavaScriptライブラリの本命
「jQuery」（ジェイ・クエリー）は、John Resig氏が開発したJavaScriptの軽量ライブラリです。「Write Less, Do More（もっとシンプルに、もっとたくさんのことを）」がモットーで、これまで複雑なJavaScriptを使わないとできなかったリッチな効果を簡単に生み出せます。本特集は、前半でまずjQueryの基本を解説した後、後半でリッチな効果を生み出すプラグインを紹介します。 jQueryはその手軽さから、JavaScriptライブラリとしては後発であったものの、急速にユーザー数を伸ばしました。世界の上位100万サイトの実に過半数＊1がjQueryを利用しています。今やJavaScriptでの開発にjQueryは欠かせなくなったといえるでしょう。表1は人気の要因を挙げたものです。特に最後のプラグインは大事です。世界中のいたるところでプラグインが提供され、目的
フォーム入力に役立つjQueryプラグイン
本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQuery UIとプラグインを取り上げます。今回は、Input Hint Overlay、Text input field filter、jQuery Validation、Password Strength、Simplest Twitter-like dynamic character countについて説明します。 はじめに 第2回「jQuery UIのウィジェットを使ってみよう」では、jQueryのユーザーインターフェースを拡張するjQuery UIのインストールから、jQuery UIのDialog、Datepicker、AutoComplete、ProgressBarの使い方を取り上げました。第3回では、第1回「jQuery UIのインタラクションを使ってみよう」でも簡単に触れたjQuery Pluginのフ
jQuery UIのウィジェットを使ってみよう
対象読者 jQuery UIに興味があり、使ってみたいと思っている方 必要な環境と準備 jQuery UIのダウンロード 執筆時点のjQuery UIの最新版は、1.8.2です。第1回を参考にダウンロードしましょう。 Dialog Dialogは、ユーザのアクションに対して、警告、問い合わせなどのダイアログを表示させたいときに利用します。例えば、ユーザ登録時に「登録します。よろしいですか？」といったメッセージや、データを削除させる時に「削除しますが、よろしいですか？」などのメッセージを表示させることができます。 今回は、ボタンをクリックすると、［OK］と［キャンセル］ボタンが配置されたダイアログが表示されるサンプルを取り上げます。 リスト1にDialogプラグインの使用例を、図1、図2に実行結果を示します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
ASCII.jp：jQueryのダウンロードとインストールのチュートリアル｜Web制作の現場で使えるjQuery UIデザイン入門
※この記事は「Web制作の現場で使えるjQuery UIデザイン入門」の第2回です。これまでの記事（連載インデックス）も合わせてご覧ください。 jQueryは、MITとGPL licensesのデュアルライセンスで公開されているので、ライブラリー中の著作権表示さえ消さなければ、商用・非商用を問わず誰でも自由に利用できます。今回はjQueryを利用するための準備として、ライブラリーのダウンロードと設置方法を紹介しましょう。 jQueryをダウンロードする jQueryをWebサイトに導入する方法はいくつかありますが、最もポピュラーなのは、公式サイトからライブラリー本体（JSファイル）をダウンロードし、サーバーにアップロードして利用する方法です。 jQueryをダウンロードするには、公式サイトのトップページにある「Download(jQuery);」ボタンからGoogle Codeに移動し、「
jQuery
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 API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQueryプラグインで世界に1つの右クリックメニュー (1/2)
Windowsアプリケーション上でテキストや画像を選択して右クリックすると、選択した対象に応じたメニュー（コンテキストメニュー）が表示されます。必要な機能をすぐに選択できるので、メニューバーに並んだ膨大なメニューの中から選ぶのに比べて効率的です。Webサイトでも同じように、ページ上のそれぞれの項目に応じたコンテキストメニューが表示されれば、ユーザーにとって便利ではないでしょうか。 実はこのコンテキストメニュー、JavaScriptライブラリを使えば意外に簡単にできます。今回は、jQueryの「Context Menu Plugin」を使ってコンテキストメニューを表示する方法を紹介します。 「Context Menu Plugin」を使ってみよう 「Context Menu Plugin」は、Cory LaViska氏が開発したjQueryプラグインです。以下のページで配布されています。 h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テーブルを操作するjQueryプラグイン
手軽に扱えるjQueryプラグインを使ってみよう
jQuery UIのインタラクションを使ってみよう
Site Under Maintenance
