以前 ColdFusionのタグ<cfinput>タグを使ったサンプルを紹介しましたが、今回はColdFusionのsubmitFormを使わないでプルダウンのsuggest機能を実現するサンプルを作ってみました。参考サイトではサーバ側はPHPで処理していたのでCFMLに置き換えてます。 使用したjsライブラリ、郵便番号データ complete.js initcompletion.js ecl.js 全国一括データ 郵便番号(全国一括データ)のデータベース登録についてはimport.cfmを作成して、SQLServerに12万レコード登録しました。 ※CFMLについてはファイル保存時の文字コードをUTF-8にして保存してください。SHIFT-JISで保存すると日本語が文字化けしてしまいます。 以下はメインとなるHTMLページのサンプルです。(suggest.html) <!DOCTYPE
Spry framework for Ajax(以下、Spry)は、アドビが提唱しているデザイナー向けの JavaScript ライブ ラリです。無償で配布されているこのライブラリを利用することで、サーバサイドで特別なプログラムを用意したり、ユーザの Web ブラウザへ新たなプラグインをインストールすることなく、今話題の Ajax を利用した動的でリッチなインタフェースやコンテンツを HTML の中に作り出すことができます。 “デザイナー向け”というのが Spry の大きな特長であり、他の Ajax ライブラリと比べてもユニークな点です。Spry そのものは JavaScript ライブラリ群ですが、難解な JavaScript のプログラミング知識はそれほど必要ではありません。HTML コーディングのスキルがあれば、XML からのデータを取得し、加工し、ダイナミックな形で Web ページ
ALAJAX - a jQuery plugin for ajax auto form sending | Freelancer ID 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」 フォームなんかを作る場合はAjax前提で作ったりしますが、このプラグインで $('#form').alajax(); のように初期化すれば一瞬でajax化が完了します。 もちろん、サーバ側のプログラムの調整は必要ですが、簡単にajax化できるというのはよいかもしれませんね。 やっぱりajaxフォームの速度ってはやくて利用者としては速いほうがいいわけなので、こういう風にマークアップの作り手側は簡単に対応できると作り手としては嬉しいですね。 関連エントリ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ 画面遷移なしのAjaxでファイルアップロードするjQuer
こんにちは、JavaScript担当の(株)アークウェブの竹村です。 前回はAdobe AIRの制作環境構築と、ユーザに配布するまでの流れを説明しました。 Adobe AIRでAjax!HTMLとJavaScriptでそのままAIRに移行できるサンプル 今回もマッシュアップサービスを利用しつつ、AIR APIをいくつか使ったサンプルを用意しました。 ホットペッパーのマッシュアップサンプル『オヒルダ!』 ホットペッパーのAPIに「ランチ」というフラグがあるのに着目し、ランチを提供しているショップリストを表示するサンプルです。ショップ検索をする際に、予め自分の住所や 指定した緯度経度などを設定できるようにしています。 オヒルダ!の構成は↓このようになります。 最初にWeb版を作ります。Web版には下記の機能を盛り込みます。 w-1. ホットペッパーAPIを通して検索結果一覧を表示する w-2.
これからはjQueryだろーって雰囲気なのでjQuery+楽天ウェブサービスを練習してみます。 これまでjQueryのライブラリは使ったことはあっても自分でスクリプトを組んだことがないのでここらで練習しておきます。今回の目標&やりたいことはこれ! 楽天商品検索APIを使用(version:2009-02-03) jQueryでAjax JSONP 検索機能はなし 用意するファイル・・・index.htmlとjQuery.js 最初なのでシンプルなサンプルからいきます!。これをベースに機能を追加していく感じで・・・。まずはjQueryの本体をダウンロードしてindex.htmlに読み込みます。 公式サイトからダウンロード:jQuery <script type="text/javascript" src="jquery.js"></script> ページの読込み時に実行す
JSが少しできる人ならうじうじ考えるほどのこともでもない! 何も難しいことはない!ぶっとんぢまいなよ!ヒャッパー!!! というノリでAjaxを学んでみました。醜いです。 Ajax入門 Ajaxはいろいろできるんだぜ! 以上入門終り!キミは完璧だ!次いけ! Ajaxは非同期通信だかなんだかそんなもんはどうでもいいんだ! どうでもいい!そんなことよりもXMLHttpRequestオブジェクト生成! var request = false; if(window.XMLHttpRequest) { request = new XMLHttpRequest(); //frefox ie7,8 safai opera } else if(window.ActiveXObject) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); // ie6
Tutorial9で、Webデザイナーのための美しいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » jQuery.popeye – an inline lightbox alternative lightboxをギャラリーのようなインターフェースに代替したjQuery.popeye » jPlayer – jQuery mp3 player plugin jQueryで作るmp3ミュージックプレーヤー » jQuery form plugin jQueryで非同期通信のフォームを実装 » easyDrag jQuery plugin 簡単にコンテンツをドラッグ&ドロップできるようにするプラグイン » jQuery accordion plugin – vertical 垂直方向のアコーディオンメニュー » Switch stylesheets with jQuery
最近発見した、JavaScriptコーディングに関するテクニックやパフォーマンス等の参考になりそうなエントリをリファレンスをまとめてみました。 Avoiding Problems With JavaScript’s getElementById Method in Internet Explorer 7 | Impressive Webs IE7のgetElementByIdで起こる問題を避けるためのTIPS集。 How to add a CSS Link programmatically using JavaScript <link>タグをJavaScriptによって動的に作成してCSSを動的に設定するコード例 JavaScript CSS Selector Benchmarks CSSセレクタでDOMにアクセスする際の各フレームワークでの速度ベンチマーク比較 6 Ways To Wor
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jQuery Gallery Slider Plugin ダイナミックにスライドする画像ギャラリー。 prettyPhoto a j
phpied.com Blog Archive Simultaneuos HTTP requests in PHP with cURL The basic idea of a Web 2.0-style "mashup" is that you consume data from several services, often from different providers and combine them in interesting ways. マッシュアップに必須!PHPで複数APIを同時に叩いて超高速化するサンプル。 通常、PHPでAPIにアクセスする場合、例えば、Yahoo!検索APIとはてなブックマークのRSSを取得してマッシュアップする場合は次の図のようになります。 ただ、この方式だと、Yahoo!検索APIにリクエストし、その結果を待ちます。 そして、そこからはてなブック
IBMにAJAXとPHPとMySQLを使ったRSSリーダーの作り方が掲載されています。 いわゆるサーバインストール型のRSSリーダーについて、個人で使うだけではなくその結果を閲覧者に見せるためのモードも搭載するという非常に凝ったものになっています。 ソースコードもダウンロードでき、実際のスクリーンショットなども使って解説されているのでRSSリーダーを作りたいと思っている人にはかなり有益な情報になるのではないかと。 作り方とコードのダウンロードは以下から。 Ajax RSS reader そのほかにも日本語で書いてあるのは以下のようなページ。 「Ajax + PHP」でRSSリーダーを作る : きまぐれ日記2『オンとオフの狭間』 http://sakipapa.sakura.ne.jp/blog/2006/03/002534.php Ajaxを使おう RSSリーダーを作る - [JavaSc
Q - なぜ、全国地図にしないのですか? 4つほど理由があります。 ポップアップが場所をとりすぎるから 現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。 キーボード操作時の押下回数を減らすため jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。 多言語対応のため 日本は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。 認知的限界のため これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。 ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。 Q - 地図はもっと詳細化/単純化しないのですか? 詳細
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く