画像ポップアップ_Galleriffic
A jQuery plugin for rendering fast-performing photo galleries Galleriffic was inspired by Mike Alsup's Cycle plugin, but with performance in mind for delivering a high volume of photos. This is my first experiment with jQuery, so I would love feedback on how to improve this plugin. Features Smart Image Preloading after the page is loaded Thumbnail Navigation (with pagination) Bookmark-friendly URL
jQueryでバリデーション付きメールフォームを作ろう (1/3)
今回はjQueryを使って、「問い合わせフォーム」にバリデーション（検証）機能を付ける方法を解説します。入力漏れや入力ミスがないか、サーバーへ送信する前に、クライアント側であらかじめ簡易的な検証を済ませることで、フォームのユーザビリティを高められます。今回のサンプルでは特に、入力漏れやミスのあった項目を分かりやすくユーザーに示すように工夫しています。 バリデーションルールをclass属性で設定 「問い合わせフォーム」のサンプルとして、以下のようなWebページを作成します。バリデーション機能としては、必須項目の「お名前」「性別」「どこでこのサイトを知りましたか？」「お問い合わせ内容」が入力されているか、「郵便番号」が数値で入力されているか、「メールアドレス」がメールアドレスの書式になっているか、「メールアドレス」と「メールアドレス（確認）」に入力されたテキストが同じか――をチェックします。
表示されているマーカーのリストを表示する[jQuery]+[GoogleMapsAPIVersion3] | 気ままにWeb
前回までは以下の通り。 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3] マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3] XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3] Googleさんと先人のおかげで、マーカーと情報ウィンドウまでサクサクと出来ました。 残る仕様は二つ。 現在表示されている地点データの名前を、地図の外にリストとして表示します リストに表示された名前をクリックしたら、該当地点のマーカーのふきだしが表示されます 今回は「現在表示されている地点データの名前を、地図の外にリストとして表示します」の方をかたづけます。 これもjQueryを使えばすごく簡単。 まず、リストが表示される場所を確保します。 <body onload="initialize()"> <div i
![表示されているマーカーのリストを表示する[jQuery]+[GoogleMapsAPIVersion3] | 気ままにWeb](https://cdn-ak-scissors.b.st-hatena.com/image/square/86d552826dee98216f573709616610139f1686fc/height=288;version=1;width=512/http%3A%2F%2Fmspec.jp%2Fblog%2Fwp-content%2Fplugins%2Fall-in-one-seo-pack%2Fimages%2Fdefault-user-image.png)
JQueryMobileでらくらくアプリ開発をはじめよう(2)
前回JQueryMobileのサンプルプログラムとしてToDo管理アプリのUIを作るところまで説明しました。 今回は、JavaScript(JQuery)とHTML5のWebStorageを使って実際にToDoを入力し、保存できるところまで つくりアプリを完成させます。 まずサンプルコードを書く前に、WebStorageについて少し説明します。 HTML5のWebStorageについて WebStorageはHTML5から新たに搭載された規格で、 Cookieのような働きをします。ローカルストレージという端末ごとの データ保存領域に（キー、バリュー）の組み合わせを保存できます。 しかし、Cookieと違う点としては、 ・CookieはHTTPリクエストを使ってサーバに値を送信するのに対して、 WebStorageはサーバ通信は必要とせず、ローカルで完結している。 ・サイズ制限が無い ・有効
jQuery API 1.4.4 日本語リファレンス - StackTrace
add(expr) 要素集合に、条件式にマッチした要素集合を追加します。 add(expr, context) 要素集合に、指定されたコンテキストの条件式にマッチした要素集合を追加します。 addClass(class) 要素のクラスに、指定した CSS クラスを追加します。 addClass(fn) 要素のクラス属性に、指定した関数が返す CSS クラスを追加します。 after(content) マッチした要素の後（弟要素）に、指定した内容を追加します。 after(fn) マッチした要素の後（弟要素）に、指定した関数の内容を追加します。 jQuery.ajax(settings) HTTPリクエストを使用してデータを取得します。 ajaxComplete(handler) Ajaxリクエストが完了した時に実行するコールバック関数を登録します。 ajaxError(handler) A
jQuery Mobileのオリジナルテーマカラーを簡単に追加できるCSSジェネレーター・jQuery Mobile Themerollerと、オリジナルテーマカラーの追加方法
この手のWebサービスは初見だったので ちょっとメモ的に。JQMのデザインを簡単 に変更できるcssジェネレーターです。JQM でそろそろ脱CDNしたい、という方は試しに テストしてみてはいかがでしょう。直感で 変更できるのでわりとオススメです。 さて、ちょっといいかも的なサービスです。JQMを使いたいけどデザインで困っているという方はチャレンジして頂きたいCSSジェネレーターですね。好みのテーマカラーを追加し、簡単に追加できるようにしてくれています。 JQMのテーマ変更の仕組み まず最初にちょっとした仕組みから。jQuery Mobileのデザインは現在CDNに5つ用意されています。青、グレー、白、黒、黄色があります。詳しくは以前書いたマークアップ記事をご覧下さい。 div要素とかにdata-theme=”a”などを追加することで、上記のように別のカラーに変更できるようになっています。
HTML5とjQuery Mobileを使い、わずか1週間でできたモバイル版Publickey
昨日、Publickeyのモバイル対応版「Publickey Smart Edition」を発表しました。Publickeyのモバイル対応はずっと課題だったのですが、jQuery Mobileが登場したとき「これで簡単にモバイル対応ができる」と思い、jQuery Mobileが安定するタイミングを待っていました。 8月に「そろそろ大丈夫だろう」と思って開発を始めたところわずか1週間程度でモバイル対応ができあがってしまい、今週jQuery Mobileのβ3が出てフィーチャーフリーズになったのに合わせて試験運用を開始しました。 Publikceyのモバイル版の開発は、おおむね3つのステップ「モバイル用HTMLの生成」「jQuery Mobileによるタッチインターフェイスの構築」「小さな画面に合わせた画像縮小」から構成されています。ここではその裏側を少し紹介しましょう。 CMSでモバイル用H
AjaxZip 2.0
Kawa.netxp AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版） AjaxZip2は、昨年公開した 『ajaxな住所入力フォーム』 の新バージョンです。 郵便番号を入力すると、該当する都道府県名・住所が自動的に入力されます。 Ajaxと JSON フォーマットを利用するJavaScriptライブラリとして公開しました。 JavaScript のみで稼動するため、サーバサイドで稼動するCGIプログラムは不要です。 郵便番号→住所変換処理は全てクライアントサイドのJavaScriptで行います。 既存 HTML の住所入力フォームをたった3行書き換えるだけで利用できます。 簡単に設置できるため、プログラムに詳しくない方でも導入していただけると思います。 以下の住所入力フォームに、7桁の郵便番号を入力してみてください。 【2007/12/09 追記】 jQ
WordPress 3.2が出るまでに確認すること - understandard
本日5月27日は WordPress の8歳の誕生日ということで、時期バージョンの WordPress 3.2のことを。 必要要件の変更 6月30日のリリースを目指し開発がされている WordPress 3.2では、PHP 5.2 以上、MySQL 5.0.15以上でないと動作および3.1系からのアップデートができません。 現在の環境が3.2に対応しているかどうかは、WordPress.org 公式の Health Check というプラグインで簡単にチェックできます。 WordPress › Health Check « WordPress Plugins 同梱 jQuery のバージョン PHP、MySQL 以外では、同梱される jQuery のバージョンが1.4.4から1.6.1に変更になるようです。 これにより、テーマやプラグインが不具合を起こす可能性があるので、こちらもチェックし
jQuery Mobile
jQuery Mobile is no longer supported To read more about the status of the jQuery Mobile project, see the announcement blog post. A Touch-Optimized Web Framework jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Seriously cross-platform with HTML5 jQuery Mobile framework takes the "w
Yahoo! のキーフレーズ抽出 API の使い道を軽く考えてみた
先日ですが Yahoo!デベロッパーネットワーク - テキスト解析 - キーフレーズ抽出 なる API が公開されました。 この API を駆使すれば個人でも Google AdSense のようなコンテンツマッチ広告すらできちゃいそうなシロモノです。この手の技術に興味がある僕からすれば、コンテンツマッチ技術の根幹の技術を、よくもまぁ無料の API で公開したものだなぁ〜 Yahoo! って太っ腹だなぁ〜と唯々感心するばかりです。 さて、どうせなので、コンテンツマッチの技術についてもう少ししゃべってみます。 基本的に”とあるページ”にコンテンツマッチの”何か”を表示するロジックはこんな感じ。 ”とあるページ"（解析対象）”の html を取得 html 全体から本文抽出 特徴語抽出（キーフレーズ抽出） 特徴語をベースに”表示する何か”を類似度順にソート（例えばコサイン距離とか） ”とあるペ
啓文社 - 2010.05.15 jQuery.autopager スクロールでどんどん表示
Bingの画像検索などで、検索結果をスクロールすると、次々と検索結果があらわれてくるものがあるのですが、今回は、jQuery.autopager を使って似たようなことが実現できるのを試してみました。 サンプルでは、Amazon の「本」のトップセラーを取得し表示させています。 当サイトの設置サンプル ヘッダ部 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1");</script> <script type="text/javascript" src="jquery.autopager.js"></script> <script type="text/javascript"> $(function() { $.autopag
Amazonと楽天のアフィリエイトを効率化するjQuery技 (1/5)
書評サイトやDVDレビューサイトなど、特定の商品を紹介するWebサイトを運営しているなら一度は検討したいのが、アフィリエイト広告の掲載です。個別の商品を紹介しているページからショッピングサイトに当該商品ページへアフィリエイトリンクを張れば、ユーザー（読者）は商品をすぐに購入できるようになり、サイト運営者はその分の報酬（紹介手数料）を手にできます。 たとえば、多くの映画ファンが集うコミュニティサイト「映画生活」では、すでにDVDになっている映画作品のページにAmazon.co.jpと楽天ブックスへのアフィリエイトリンクを設置しています。今回は、この映画生活のサイトと同様に、サンプルの書評サイトにアフィリエイトリンクを付けてみます。 今回のお手本サイト：『映画生活』 ユーザーによるレビュー、掲示板などのコミュニティ機能に強みを持つ総合映画情報サイト。1999年に個人サイトからスタートし、200
http://lagoscript.org/jquery/autopager/demo
See related links to what you are looking for.
IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」:phpspot開発日誌
IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック２５ 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す
jQueryとTopsy APIを使ってそのページを言及したツイートを表示するスクリプトを作った - F.Ko-Jiの「一秒後は未来」
(重要な追記: 2012-01-25) Topsy の API を利用するために API Key が必要となりました。さらに30日間は1日あたり7,000コールまで無料、それ以降は1日500コールまでなら無料で使えるそうです。 APIキーの取得はこちらから。 → http://manage.topsy.com/app そのページが何回ツイートされたかを表示してくれるカウンターといえばTweetmemeとTopsyが有名ですが、TopsyのAPIを利用すると「そのページのURLが投稿されたツイート」を取得できるみたいなので、jQueryを使って各記事の下に表示してみることにしました。 たとえばこの記事の場合はこんな風に表示されます。 ↑ リスト表示 ↑ アイコン表示 APIの解説 TopsyのAPIで用意されているメソッドのうち「trackbacks」を使うと、そのURLを言及したツイートの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Mobile 1.1.0 日本語リファレンス
はてなブログ | 無料ブログを作成しよう
Loading...
サービス終了のお知らせ