HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
TwitterやFacebookのURLには、なぜ#!が含まれるのか (SEOとAjaxのおいしい関係) - kazuhoのメモ置き場
Ajaxを使うためにはページ内リンク (hash fragment=URLの#以降) を使うのが一般的*1 hash fragmentはサーバに送信されないから、JavaScript非対応のブラウザだと動作しない 特にサーチエンジンのクローラ等で問題になる*2 そこで Google は、#! が含まれる URL を hash を含まないものに読み替える仕組みを提唱している。例えば「www.example.com/ajax.html#!key=value」のサーチエンジン用URLは「www.example.com/ajax.html?_escaped_fragment_=key=value」になる。 TwitterやFacebookはこの仕様に従うことで、Ajax な UI と SEO を同時に実現している、というわけ。ということを調べたなう。 参照: Getting Started |
マルチファイルのアップロードを可能にするクールなjQueryプラグイン「uploadify」:phpspot開発日誌
JQuery File Upload Plugin Script - Demo - Uploadify マルチファイルのアップロードを可能にするクールなjQueryプラグイン「uploadify」。 「BROWSE」ボタンを押すと、ファイル選択ダイアログが立ち上がり、次のようにファイルが追加されていきます。 Upload Files を押下すれば、アップロードがリアルタイムで開始されます。 実装コードなのですが、次のようにシンプルで分かりやすいものになっています。 <body> <input type="file" name="fileInput" id="fileInput" /> <script type="text/javascript"> $(document).ready(function() { $('#fileInput').fileUpload ({ 'uploader'
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
&lt;script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&amp;pid=877160106″&gt;&lt;/script&gt;&lt;noscript&gt;&lt;a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&amp;pid=877160106″ target=”_blank” &gt;&lt;img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&amp;pid
フリーのグラフスクリプト１０個:phpspot開発日誌
10 Free Chart Scripts | WebTecker the latest Web Tech, Resources and News. This week I’ve been working on a project that required data to be shown visually. フリーのグラフスクリプト１０個が特集されてました。 JavaScriptやFlash製のグラフを使う際の選択肢として使えます。 Flot Open Flash Chart AmCharts Emprise JavaScript Charts PlotKit Flotr PHP/SWF Charts Visifire FusionCharts JFreeChart グラフを作る際にはこうしたツールを使えば一瞬ですね。 その他、グラフ関連エントリは以下 ピュアCSSでクールなグラフサン
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
【レビュー】Googleからの贈り物 - Google AJAX Language APIでカンタンに翻訳サイトを (1) 超シンプルなAPIながらスゴイ実力 | エンタープライズ | マイコミジャーナル
20日に発表されたGoogleの新しいWeb API、Google AJAX Language APIは、誰でも簡単に言語の翻訳を行えるようにするJavaScript APIだ。同APIを使うと、JavaScript文字列に対して「日本語←→英語」や「中国語←→英語」と言った変換を簡単に行えるのみならず、文字列が何語で書かれているかを自動判別することもできる。 同APIのパワーがどれほどのものかというと、以下のような翻訳サイトを10分足らずで作れてしまったほどだ(ソースコードは次ページで解説)。 非常にシンプルなAPI(メソッド2つしかない!)にも関わらず、そのパワーがあまりに凄まじすぎる。この興奮をぜひ皆さんにもお伝えしたいと思う。 ということで、さっそくLanguage APIの使い方を学んでいこう。
Geekなぺーじ : Google MAPS APIプログラミング
ここでは、Google Maps JavaScript API(version 3)を使って遊ぶ方法を説明したいと思います。 Google Maps JavaScript APIを使うと、グーグル社が提供する衛星写真や地図を使ってホームページ上で色々なものを作れます。 対象とする読者は初心者もしくは入門者です。 Google Maps APIはJavaScriptを使って書いてあるので、JavaScriptの知識があった方がわかりやすいと思いますが、Java Scriptがわからなくても何と無くわかるような説明を目指したいと思っています。 基本編 Google Maps APIの単純な例 地図の種類を切り替える 地図の中心を移動する 地図上にふきだしを表示 地図がクリックされたときの処理 マップタイプコントロールを無効にする 緯度経度取得ツール 要望が多いので緯度経度情報を取得するツールを
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法（1） 基本／おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック ＜ リッチクライアント 2009/12/8 今回は「jQuery UI」のより進んだ活用例 ■ jQueryのプラグイン「jQuery UI」とは？ 今回紹介するjQuery UIは、JavaScript（Ajax）フレームワークjQueryのプロジェクトがjQuery用に開発している、以下の機能を提供するプラグインです。 ドラッグ＆ドロップなどのマウス操作の機能拡張 ユーザーインターフェイスを改善するウィジェット（アコーディオン、日付入力、ダイアログ、スライダー、タブなど） 今回は、jQuery UIのドラッグ＆ドロップ機能
YUI2.5.0の新機能、Flickr風の複数ファイルアップローダをPHPで実装してみる:phpspot開発日誌
YUI2.5.0の新機能、Flickr風の複数ファイルアップローダをPHPで実装してみる 2008年02月25日- YUI 2.5.0 Released ? Big upgrades to DataTable, new Layout Manager, Flickr-style multi-file Uploader, and more Yahoo! User Interface Blog The YUI Team just released version 2.5.0 of the library. We’ve added six new components ? Layout Manager, Uploader (multi-file upload engine combining Flash and JavaScript), Resize Utility, ImageCropper,
[JS]jQueryのプラグイン33+1選 -2008年1月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jqzoom 画像の一部をズーム。 Shadowbox 複数のJavaScriptライブラリに対応したLightbox。 Faceb
Deneme Bonusu Veren Bahis Siteleri - En iyi Bonus Veren Siteler Nelerdir?
Ücretsiz verilen bonusların free bet ve deneme bonusu adı altında sitelerde verildiği bilinmekte. Bu tür bonuslar küçük miktar olsa da, bazı oyuncular için önemli. Onlar risk almayı istemediklerinden bu bedava bonuslarla para kazanma şansı yakalıyorlar. Çoğu bahis sitesinde güncel deneme bonusları var. Fakat büyük sitelerde bu bonuslar daha büyük miktarlarda verilmekte. Deneme bonusu veren bahis s
ウノウラボ Unoh Labs: 簡単Ajaxライブラリ「jQuery」と便利なプラグインたち
こんにちわ、hideです。 最近は、jQueryというJavaScriptライブラリを使ってAjax関連の処理を書くことが多いです。なんといっても軽量で高速、XPathによる要素の指定がとても便利です。今回は、その便利なjQueryをもっと便利にするプラグインをいくつか紹介します。 ThickBox LightBoxのようなもので、画像の他にHTMLの表示も可能です。難点は、$()を使って書かれているので、他のライブラリと混ぜて使えないこと。僕はソース内の$()をすべてjQuery()に書き換えて使っています。 JSON for jQuery AjaxでJSONを取得して、処理できるようにするプラグイン。これは必須とも言っていいと思います。CallBack関数を指定してのJSONPも簡単。 BlockUI Plugin 画面の一部や全体を半透明のレイヤーで覆って操作できなくするものです
Ajax機能をオブジェクト化してAjax機能のみ単体で使える「Ajax Object」:phpspot開発日誌
The Ultimate Ajax Object Ajax 機能をオブジェクト化してAjax機能のみ単体で使える「Ajax Object」。 prototype.jsなどを使えば、Ajaxは簡単に使えるけど、Ajaxのみの機能を使いたいのに、要らない機能までもブラウザに読み込ませるのは無駄な場合も多いことと思います。 そんな際に使える、ajaxObjectの紹介。ほんの４５行程度のライブラリですが、クラス化されていて再利用が容易です。 使い方は次のように簡単です。 myRequest = new ajaxObject('http://somedomain.com/ad.html'); // オブジェクト初期化 myRequest.callback = function(responseText) { // ajax成功時のコールバック document.getElementById('so
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://moto-mono.net/2009/07/07/jqueryplugins-i-have-used.html
IDEA * IDEA
Google Maps API リファレンス