jQueryでフォームの入力チェック | kizukiウェブスクール川越校5階
ウェブ制作において、jQueryが最も使用される機会が多いのが、フォームのバリデーションチェック機能。 バリデーションチェックとは、メールアドレスなら「xxx@xx.xx」という入力形式になっているか？必須項目はちゃんと記入されているか？を確認し、もし誤りがあればそれを閲覧者に知らせる機能のこと。 jquery-form-validatorを使った入力チェック Position-absolute「jquery-form-validator」 フォームの入力事項をチェックするバリデーション用プラグインは数あれど、このjquery-form-validatorは多機能な上に、設定が非常にわかりやすいのでおすすめ。 ちなみに導入例のデモはこちら。 確認してもらえば分かるとおり、送信ボタンを押すタイミングだけではなく、項目を入力して（あるいは入力しないで）フォーカスが移るタイミングでもバリデーショ
ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」:phpspot開発日誌
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫：Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例１ 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例２ ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例３ ブラウザ幅に合わせる、がオ
画像ポップアウト・イメージギャラリー・スライドショー｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Lightweight Circle slideshow〔くるくる回して画像を切り替える円形のイメージギャラリー〕 Smooth Div Scroll〔水平方向に並べた画像をマウス操作でするするスクロール〕 Nivo Slider〔9種類のエフェクトがかけられるイメージスライダー〕 Galleriffic〔画像ギャラリーをリッチかつ高速にレンダリング〕 IMGPREVIEW〔マウスオーバーでリンク先の画像をプレビュー表示〕 jQuery largePhotoBox plugin〔大きな画像対応ポップアップ（マウス移動で画像全体を閲覧可能）〕 PIROBOX〔シンプルかっこいい画像ポップアップ〕 bxGallery〔シンプルな画像ギャラリー〕 A Simple jQuery Slideshow〔シンプルなスライドショー〕 Accessible News Slider〔全件表示や件数に応じて前
jCarousel | 設置サンプル | Staticタイプ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-eq
jQueryを使ってボックス要素をランダムに表示する方法 | Web Tips Blog
備忘録的に。今日ちょうどdiv要素をランダムで表示させたいと思って色々調べてて、良いプラグインがあったので、紹介＆まとめておきます。まぁphpで処理できるところではあるのですが、結構手軽だったので活用できるシーンは多いのではないでしょうか。 「ランダムに要素を選択・表示する」動きはjQueryで解決！ 元ネタはむらQさんのjQueryランダム表示プラグインと、jQueryプラグインの書き方。 jQureyとプラグイン、そしてhtmlソースに追記するだけで、特定の要素を任意の数だけランダムで表示できるようになります。 例を挙げると、10個の情報のうちう3個を表記順も含めてランダムに表示させてくれます。 なんて便利！！ ちょっとした情報ソースの追加などで使えます。画像や孫タグを内包した子タグなどにも活用できるので、色々と活用法を考えるとできることは広がりそうです。 javascript jQ
要素のスクロール｜jQuery plugin｜Ajax｜PHP & JavaScript Room
リスト要素の各アイテムに指定したメッセージをMarquee風に切替表示するjQueryプラグイン。 文字を流すスタイルは上から下、下から上、左から右など、垂直・水平共にオプションで指定することができます。 初期化時、メッセージ切替前／切替時、スクロール終了時に呼ばれるコールバック関数が用意されています。 長いメッセージを垂直方向に切り替える場合は、メッセージ切り替え表示後、更に表示されたメッセージを水平方向にスクロールさせることで、長いメッセージをすべて表示させることができます。 APIが用意されているので、動的にリスト要素にアイテムを追加したり、スクロールの一時停止や再開なども簡単に実装することができます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
スマートフォン向けサイトでよく見る「もっと見る」を押す度に延々と下にスクロールしていくアレをlyase_viewで楽に実装する - だるろぐ
twitterとかgmailとかでやってる、一番下までスクロールすると「もっと見る」みたいなリンクがあって、それをクリックすると下にもっと広がるアレ。 やってることは、クリックされるたびにjavascriptで データを用意する テンプレートを用意する テンプレートにデータを埋め込んで既存のDOMにappendする みたいな。いくらでも実装はあるけど、基本こんなの。 同じ事をしたいと思ったときに自分で0から実装するのがめんどかったので、javascriptでテンプレートエンジンいいの無いかなーと探してもどれもイマイチだったんだけど、lyase_viewというのがかなり良かった。 軽いし分かりやすいし、javascript何でも書けるし、ERBとタグ同じだし。 inforno :: 埋め込みjavascriptを実装してみました。 というわけでサンプル作った。 https://github.
jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル
自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは本家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで下さい。 [note]追記 もう少し増やして見やすくしたものをダウンロード出来るようにしました。 [/note] プラグイン読み込み<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script type="text/javascript" src="h
『PHPとAjaxを使って「もっと読む」ボタンをjQuery-Mobileページに簡単に実装。』
駆け出しWebエンジニア（２年目）の備忘録です。 興味のない人にはまったくよく分からない内容だと思いますが…。 EC-CUBEのカスタマイズとかやってます。 TwitterのつぶやきをPHPで取得してAjaxでDOMに追加していくってのをやってみたので、メモしておきます。 まずは、jQueryMobileで作ったHTMLソースを…。 ---- tweet.html ---- <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>My Tweet</title> <!-- jQuery-Mobile --> <link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/
jQueryでiPhone風スライドパネルを作ろう (2/5)
左右にスライドするパネルを作る jQueryを使ってスマートフォンサイトで活用できる実用的なスクリプトを作成します。最初に作るのは、iPhoneでおなじみの「左右にスライドするパネル」です。 iPhoneの設定画面で項目を選ぶと、画面が左方向にスライドして、代わりに次の画面が右から表示されます。このとき、画面の上部には左向きの矢印ボタンが表示され、矢印ボタンをタップすると逆には右方向にスライドして元の画面に戻ります。こうしたスライドの動きによって、直感的で分かりやすいUIを実現しています。 まず、目次部分のHTMLを用意します。 <div id="index" class="iPhoneBody panel active"> <div class="iPhoneHead"> <h1>スライドパネルを作る</h1> </div> <h2 class="iPhoneListTitle">実践！
jQueryのAjaxを使用して外部htmlを読み込む
Posted: 2011.04.04 / Category: javascript / Tag: Ajax, jQuery Ajaxとは画面遷移なしで、データを取得したり表示したりできるあれです。最近のWebアプリケーションでは必須な技術らしいです。 知識としては知っていたものの実際使ったことがなかったので、かなり今更感が高いですが挑戦してみます。 Ajaxはサーバー側のプログラムの方が重要な気がしますが、ここでは静的なhtmlファイルを使用します。 まずは読み込まれる側のhtmlファイルを作成します。 load.html <li>読み込めたかな？</li> 読み込まれる側は「li」だけです。「load.html」という名前で保存します。 次は読み込む側です。 index.html <ul id="sample01"></ul> <p><a href="#" id="button01">ボ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
設置サンプル
WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm（プラズム）