HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき）
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
jQuery の $().each() で個別処理(ループ) | バシャログ。
こんにちは、やっと地上デジタル放送がうちのテレビに映るようになりました。tanakaです。液晶テレビはもう1年前に買っていたので、ついにフルパワーを発揮しているんですが、新品みたいです。 今日はjQuery の each の使い方についてとりあげます。 jQuery はループ処理を意識しなくても使える jQuery がよく使われるJavaScriptライブラリである理由のひとつに、CSSライクに、宣言的な記述ができる、ということをあげることができます。複数の要素に同じスタイルを適用したいとき、CSSではループ処理を書く必要がありませんが、jQuery も基礎的な使い方ではループを意識しなくても書くことができます。 $('p').css('background-color', 'yellow'); // すべての p 要素の背景色を黄色にする $('p').prepend('Oh! ');
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
jQueryベースのWebフォームライブラリ「jFormer」
WEBサイトには欠かせないフォーム。様々な情報のやりとりに利用されていて、多くのWEBサイトで利用されていますが、今回紹介するのは一般的なコンタクトフォームから、ログインフォーム、EC用のフォームまで、様々なフォームに対応したjQueryベースのWebフォームライブラリ「jFormer」です。 「jFormer」はバリデーション機能も備えたフォームのフレームワークで、AJAXを使ったページ遷移や、入力データのレジュームなど、細かな機能も標準で備わっており、フォームの開発の時間を短縮してくれます。 詳しくは以下 基本的にフォームの部分はphpで作られており、デザインをCSSで、動きなどはjavascriptを利用しています。 多彩なデモは「Demos – jFormer」からご覧いただけます。またベーシックなコンタクトフォームのつくり方は「Installation and Documenta
新しくて、素晴らしいjQueryプラグイン「30 Fantastic New jQuery Plugins」
TOP > WebDesign > 新しくて、素晴らしいjQueryプラグイン「30 Fantastic New jQuery Plugins」 高機能なjavascriptライブラリjQuery。サイト制作には欠かせないライブラリのひとつと言っても過言ではないほど、世界中で利用されているライブラリの一つです。多く利用されているだけあって、様々なプラグインが日夜開発されリリースされています。今日は最近リリースされたjQueryプラグインをまとめたエントリー「30 Fantastic New jQuery Plugins」を紹介したいと思います。 jMenu – Horizontal Navigation with Unlimited Sub-Menus 様々なタイプのjQueryプラグインがまとめられていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思い
jQueryでバリデーション付きメールフォームを作ろう (1/3)
今回はjQueryを使って、「問い合わせフォーム」にバリデーション（検証）機能を付ける方法を解説します。入力漏れや入力ミスがないか、サーバーへ送信する前に、クライアント側であらかじめ簡易的な検証を済ませることで、フォームのユーザビリティを高められます。今回のサンプルでは特に、入力漏れやミスのあった項目を分かりやすくユーザーに示すように工夫しています。 バリデーションルールをclass属性で設定 「問い合わせフォーム」のサンプルとして、以下のようなWebページを作成します。バリデーション機能としては、必須項目の「お名前」「性別」「どこでこのサイトを知りましたか？」「お問い合わせ内容」が入力されているか、「郵便番号」が数値で入力されているか、「メールアドレス」がメールアドレスの書式になっているか、「メールアドレス」と「メールアドレス（確認）」に入力されたテキストが同じか――をチェックします。
CakePHP 1.3 JsHelperを使ってみる - 駄記
CakePHPの1.3rc版がリリースされたので、ぼちぼち試しています。 1.2→1.3のマイグレーションガイドなどを見ながらやってみたら、いろいろと変更しなきゃならない点はありましたが、とりあえずエラーが出なくなるところまでは移行できてきました。 今回は、新しく追加になったJs Helperをちょっと使ってみました。 今までのCakePHPでは、AjaxヘルパーなどでPrototype.jsを使っていましたが、今回のアップデートで新しくなったJs Helperは、使うJavascriptライブラリを選ぶことができます。現時点で標準で対応しているのは jQuery、Prototype/Scriptaculous、Mootoolsで、コントローラからエンジンを選ぶことでどのライブラリを使うかを選択できます。 var $helpes = array('Js'=>array('Prototype
Cakephp+jquery
Cakephp+jquery - Presentation Transcript CakePHP jQuery • twitter @nano_eight • github nano-eight • AmazonEC2 • CakePHP • Twitter • Cake 100 LT CakePHP (; ∀ ) jQuery jQuery CakePHP • jQuery CakePHP • jQuery UI • jQuery plugin • jQuery CakePHP JsHelper • effect() ‣ ‣ slideIn fadeOut • submit() ‣ Ajax POST • echo $js->writeBuffer(); • options array('buffer' => false) writeBuffer() JsHelper jQuery UI
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
AppleっぽいUIが秀逸なイメージスライドショー実装jQueryプラグイン「AviaSlider」:phpspot開発日誌
AviaSlider - a unique jQuery Image slideshow plugin AppleっぽいUIが秀逸なイメージスライドショー実装jQueryプラグイン「AviaSlider」 WEBブラウザ上でスライドショーというとリッチなものからシンプルなものまで色々と存在しますが、これはかなりリッチで置くだけでおしゃれなUIを演出できます。 デフォルトのUIもなかなかカッコいいのですが、画像の切り替わり効果が色々と選べていい感じです。 ８種類もの切り替えエフェクトが確認できます。 カッコよく切り替わります。 更にIE6も対応してくれているので、レガシーなブラウザでも見れるようにしたいケースにおいても問題なく使えます。 関連エントリ 超カッコいいApple風スライドショーギャラリー作成チュートリアル シンプルだけどとってもクールなスライドショー実装jQueryプラグイン「s
サイトをかっこよくするためのjQueryプラグイン25+ – creamu
サイトにかっこいいUIを実装したい。 そんなときにおすすめなのが、『25+ Best jQuery Plugins To Beautify Your Website』。サイトをかっこよくするためのjQueryプラグイン集です。 初めて見るものもあっていい感じです。 YoxView lightbox系の画像オーバーレイスクリプト。ナビゲーションとキャプションがフェードアウトしたりとディテールが気持ちいいです Fade In and Out Tooltips for Prototype and Scriptaculous フェードイン&アウトで表示されるツールチップ Sweet Titles Transparent and Fading Tooltips ページロード時に、画像をフェードインして表示させるスクリプト Captify Displays Pretty Image Captions
[JS]jQueryのプラグイン33+1選 -2010年3・4月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 YoxView 画像をスタイリッシュに拡大表示するスライドショー。 Roundabout Shapes 複数のオブジェクトをさまざま
GoogleMap上で道案内をするjQueryプラグイン「jQuery GPS」 | Web活メモ帳
サイトにはデモがあるのでそちらを見てもらって方が早いかもしれません。 詳しい道案内を表示 例えば出発地に「Tokyo」、到着地に「Kanagawa」と入力すると移動方法を案内してくれます。 まだ出発、到着地置の日本語入力には対応していないようです。これからが楽しみなプラグインですね。
ASCII.jp：Googleマップ＋jQueryで作るAjaxなデザイン｜29分でできる！ あのサイトの“技”を盗め
今やさまざまなWebサイトで使われ、すっかり地図の定番となったGoogleマップ。 コーポレートサイトや飲食店のサイトなどで、純粋に案内図としてページに埋め込むのが一般的ですが、中にはもっとおもしろい使い方で、ユーザーを楽しませているサイトもあります。 一例として、「hitotoki」というWebマガジンを紹介しましょう。hitotokiは、ある特定の場所に関するショートストーリーを地図と絡めて紹介するWebマガジンです。Googleマップをまるで独自に描いた絵地図のようにうまくサイトになじませ、「地理と文学を結びつけた町の文学地図」というコンセプトに合わせて効果的に活用しています。 今回は、このhitotokiのGoogleマップ活用法をお手本としましょう。 今回のお手本サイト： 『hitotoki―町の文学地図』 「場所」にまつわる読者の思い出を募り、地図と写真とともに紹介する投稿型の
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
