jQueryを使ってクロスドメインのAjax·jQuery CrossDomain MOONGIFT
JavaScriptを使えば画面遷移の少ない、スムーズな操作性を提供できる。いわゆるAjaxなどがそれに相当するが、ドメインを越えて通信できないのが問題だった。幾つかの打開案はあるが、例えばJSONPを使う方法やサーバサイドで取得する方法などがメインになっていた。 検索結果のXMLを並べるテスト これではどちらかのサーバで対応が必要になってしまう。そんな中、殆どをクライアントサイドだけで解決してしまうのがjQuery CrossDomainだ。 今回紹介するオープンソース・ソフトウェアはjQuery CrossDomain、jQueryによるクロスドメインAjaxライブラリだ。 jQuery CrossDomainが使うのはFlashだ。Flashを使って外部ドメインにあるXMLを取得し、それをJavaScriptに返すようになっている。その仕組みをjQueryプラグイン化することで容易に
PHPとjQueryで動く軽快で使いやすいTODOアプリ「myTinyTodo」:phpspot開発日誌
myTinyTodo homepage PHPとjQueryで動く軽快で使いやすいTODOアプリ「myTinyTodo」。 次のようなＵＩで、「Add」ボタンを押せばajaxで画面遷移なしにＴＯＤＯを追加できます。 ちょっとした自分用のTODOリストを構築したい場合にサクッと設置できて便利そうです。 チェックボックスにチェックを入れると、線が引かれ、終わったことが分かりやすくなっています。 更に、上図で「はやくおわらせる」と書いてあるような、TODOに対するノート機能なんかもついています。 関連エントリ 1ファイルのみでDB不要のTODO管理ツール「Todo.php」 RememberTheMilkと同期するiPhoneアプリ「Appigo Todo」 PHP+Ajaxな快速TODOツール ターミナルでTODO管理する:todo.sh タイマーで時間を計れるTODOツール『SlimTime
PHPとjQueryを使ったアニメーションするディレクトリツリー実装:phpspot開発日誌
Directory Trees With PHP And jQuery PHPとjQueryを使ったアニメーションするディレクトリツリー実装。 ディレクトリの中身を表示する際に使えそうな一風変わったUIを提供してくれます。 デモページ 一般に公開する場合は、opendir で開くパスのチェックはセキュリティ的にやった方がよさそうです。 CSSやアニメーションの仕方を変えれば、いろいろと独自のUIが作れそうですね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 伸縮する全画面背景を設定できるjQueryプラグイン「Supersized」 便利なjQueryプラグインいろいろ
jQueryでtableの偶数行や奇数行に背景色を設定する方法 | バシャログ。
ishidaです。 tableで価格一覧や製品一覧などを表示する場合に、行数が長くなるとかなりメリハリのない印象になります。 行ごとにclassを設定すれば見やすくなりますが個別に設定するのも面倒なので、最近のishidaはjQueryを使って背景色を設定しています。 サンプルは以下です。 jQueryでtableの偶数行や奇数行に背景色を設定する方法サンプル 設置方法 設定方法は以下です。 htmlのhead要素に以下の処理を読み込みます。またjqueryはサイトからダウンロードしてください。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("table").each(function(){ jQ
JavaScriptを活用した軽快なポータルを作るためのフレームワーク「jPolite」:phpspot開発日誌
Lightweight jQuery Portal JavaScriptを活用した軽快なポータルを作るためのフレームワーク「jPolite」. iGoogleみたいなポータルを作るようなjQueryベースのフレームワークです。 デモページ タブをクリックで画面が軽快にアニメーションでいい感じに切り替わります。 ページ内には小窓がコンポーネントとして登録できて中身に自由にHTMLが記述できます。 各ページは、１ページあたり１枚のHTMLモジュールとしてJavaScriptで定義できて、非常に簡単かつシンプルにポータルが作れるフレームワークになっています。 JSでモジュール定義の例 var _modules={ m101:{l:"m101.html", t:"Motivation", c:"red"}, m102:{l:"m102.html", t:"Philisophy", c:"yello
JavaScriptベストプラクティス: Unobtrusive DOMプログラミングのススメ | エンタープライズ | マイコミジャーナル
Alex Holt氏がSmashing MagazineにおいてjQuery and JavaScript Coding: Examples and Best PracticesのタイトルのもとJavaScriptプログラミングのベストプラクティスを紹介している。Alex Holt氏は「Unobtrusive DOM Scripting」と呼ばれるプログラミング手法がWebサイトに適用するにあたり優れているとし、Unobtrusive DOM Scriptingの実現にはjQueryが実にいい具合で活用できることを説明している。 同氏はDOMを経由してWebページの各種データにアクセスしてなんらかの動作をさせるプログラミング方法をDOM Scriptingと呼び、DOM Scriptingのなかでも必要な機能を必要な要素に対して適用するものといったニュアンスを強める場合にUnobtrusi
ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル:phpspot開発日誌
Using jQuery for Background Image Animations - Snook.ca ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル。 デモページ デモページを見ればわかりますが、カーソルをあわせると滑らかに背景がアニメーションされます。 アニメーションの仕方がなかなか良くて、左→右や、上→下のように方向を指定できます。 当然ですが、Flashを使わなくてもJSでこうしたことが出来て、今までありそうでしたが、そんなに多く見かけることがなかったテクニックではないでしょうか。 覚えておくとふとしたときに使えそうです。
jQueryでホットペッパーのAPIをリクエストしてGoogle ストリートビューを表示するまで - F.Ko-Jiの「一秒後は未来」
梅酒.inの「梅酒がウリな飲食店」にてLightBoxを実現していることを前回説明しました。今回はさらに、jQueryでホットペッパーのAPIをリクエストしてGoogle ストリートビューを表示させる方法を説明をします。 ↑ こんな感じ。(昼間の写真なのがちょっとあれですが) ここではjQueryを用いているので、レスポンスのフォーマットとしてJSONPが利用できるホットペッパーのAPIを利用しています。 なお、jQueryのリファレンスは「jQuery 1.2.6 日本語リファレンス」が詳しいです。また、jQueryでJSONPを使う方法は「jQuery で JSONP ２通り – てっく煮ブログ」にて紹介されていたので、そちらを参考にやってみました。 また、ストリートビューをGoogle Maps APIから使う方法は「Google Maps API – Google Code (日本
[JS]テキストのサイズをスライダーで変更するスクリプト
Nettutsのエントリーから、テキストのサイズをスライダーで変更できるスクリプトのチュートリアルを紹介します。 Use the jQuery UI to Control the Size of Your Text デモ テキストのサイズは、スライダーのマイナスからプラスの間で変更することが可能です。 変更したサイズはクッキーに保存されるため、次にアクセスした際にもそのサイズで表示されます。 オプションでは、テキストの初期サイズ、最小値・最大値などがカスタマイズ可能で、日本語フォントでも最適なサイズに変更することができます。 スクリプトのフレームワークには、jQuery UIが使用されています。
[JS]jQueryのプラグイン33+1選 -2008年9月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 MopSlider オート・マニュアルに対応したコンテンツスライダー。 MopBox スライド機能付きの移動可能なボックスを表示。
簡単にテーブルをカッコよくするjQueryプラグイン「Flexigrid」を使ってみた
こんばんは。松田です。 ほんのちょっと手を入れるだけで、ただのテーブルレイアウトがかっこよくなってしまうjQueryプラグイン「Flexigrid」を使ってみました。 「Flexigrid」を使うと、カラムの表示/非表示機能、色分け、配置換え、リサイズなどいろんな機能を自動的に付けてくれます。 まずは普通にテーブルを作ってみます。 ソース とてもシンプルでかっこわるいですね！ これをFlexigridを使ってかっこよくしてみます。 やることは３つ。 ・headタグ内でスクリプトとCSSの読み込み ・テーブルにID（ここでは'flexigrid_table'）を指定 ・スクリプト $('#flexigrid_table').flexigrid(); の呼び出し これだけです。 そして、Flexigrid化したテーブルが下のものになります。 ソース すごくオサレになりましたね！ ※IE7ではt
フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」:phpspot開発日誌
Autotab: jQuery auto-tabbing and filter plugin | Matthew Miller フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」。 電話番号入力欄や、郵便番号入力欄で、フィールドが複数に分かれている場合、桁数が決まっているのであれば、次のフィールドに自動で移ってくれた方が使い勝手はよくなります。 Tabで移動することは出来ますが、その処理を知らない場合はマウスで移動する人なんかもいそうですし、打つキー数も多くなります。 そこで、オンラインバンキングなどではよくある、規定の桁を入力した後は次のフィールドに自動で移ってくれるＪＳライブラリがjQueryベースで開発され、公開されています。 実装は簡単で、まず必要なＪＳを読み込みます。 <script type="text/javascript" src="jquery
jQueryでゲームを作成するためのライブラリ「gameQuery」:phpspot開発日誌
gameQuery jQueryでゲームを作成するためのライブラリ「gameQuery」 ライブラリを使って作られたゲームも公開されています。 どういう仕組みかは詳しくみていませんが、サウンドをならしたり、アニメーションさせたりといった機能が組み込まれているみたい。 関連エントリ JavaScriptでリズムゲーム「JavaScript Rock Star」 JavaScriptで作られたボンバーマン JavaScriptでマリオカート JavaScriptマリオ JavaScriptで書かれたテトリスゲーム JavaScriptで出来たシューティングゲーム「Spacius!」
jQueryでアニメーションするソート可能なデータグリッド実装ライブラリ:phpspot開発日誌
com.overset.dev Blog Archive Animated Sortable Datagrid jQuery plugin - jTPS jQueryでアニメーションするソート可能なデータグリッド実装ライブラリ。 次のような、美しいＵＩでかつ、ページング・ソート機能付きなグリッドが実装できます。 ページ移動時のアイテムの移動がアニメーションします。 グリッド自体は、スタイルシートを切ると単なるテーブルで、JavaScriptによって初期化されているのがいいですね。 関連エントリ jQueryでリッチなグリッドを実装「jqGrid」 Extばりのリッチなタブ等のＵＩを実現「dhtmlxTabbar」 手軽に使えるExcel風グリッドＵＩ「Flexigrid for jQuery」
[JS]jQueryのプラグイン33+1選 -2008年5月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Kwicks スムーズに伸び縮み。 Horizontal Accordion 水平方向のアコーディオン。 Accordion Con
jQueryサンプル公開後の反省会。みなさんからのアドバイスを5本サンプル化
前回公開したｊQueryの自作サンプルエントリー。 これはほんと有意義なコメントを方々から受けることができて、公開してよかったなと思いました。 今回は指摘を受けた箇所の再勉強をかねて、ブログにコードを書いていただいた方々のサンプルを作成いたしました。（コード勝手に使ってんじゃないよという人が万が一いるならご連絡ください） 学んだ部分を全て活用し、一本のサンプルも一番下においておきましたので、興味があったらご自由にもってっちゃってください。 また、前回利用したjQueryはバージョンが低いものを使ってましたので、最新版にしておきました。 IE7のローディング問題 これは、IE7はAjaxローディング出来ないと言う方もいらっしゃいましたが、そうではありませんでした。 Apache側にてAddDefaultCharsetがnoneになっていると、正常に動作しないようです。 色々検索すると、non
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リッチインターネットアプリケーションの実装時に検討したい30のUI
[JS]画像をダイナミックにズームイン・ズームアウトするスクリプト -danceFloor.js | コリス
jQueryを使ったブラウザ上で動作するLeopardデスクトップの構築:phpspot開発日誌
超クールなタブインタフェースをjQueryで作成するチュートリアル:phpspot開発日誌