Pluploadはオープンソースのファイルアップローダーで、jQueryを使用してファイルのアップロードやリサイズ処理を行う事が可能になっています。 アップロードには複数のプラットフォームから選択可能で、FlashやSilverlightを使用する事も可能。 作者はTinyMCEの開発者の方だそうです。これは期待できますね。 詳しくは以下 機能 各テクノロジーについて何ができるかは、表にまとめられています。HTML5はJavaScriptだけで画像のリサイズなんかもできちゃうんですね。 以下のような機能があるようです。 複数ファイルのアップロード アップロード進捗状況の表示 最大ファイルサイズの制限 画像のサイズを変更する ユニークなファイル名の指定 複数ファイルのアップロード処理はCMSでは必須なので、こういったライブラリがオープンソースで公開されるのは開発者には嬉しいですね。 ソースも
昨日『jQueryで選択したセレクタをハンドラ内で確認』というエントリーを書いたのですが、これを使えば独自メソッド内でliveのイベントを付けたい時にセレクタを簡単に使えると思ったので、昨日に続きメモエントリー。 .live(function(){})は$(document).on('Event','Selector',function(){}) jQuery 1.7での.live()は.on()に統合されています。同じように書くには、 $(document).on('Event','Selector',function(){ //何か処理 }); この様に書く必要があります。 $.fn.◯◯～のようなプラグインを作成して、プラグイン内部で.live()を使わずに.on()で同様の機能を得るためには、選択しているセレクタを書き入れる必要があります。そのため、利用しているセレクタの文字列が必
iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 2011年02月17日- Skinkers Labs : TouchSwipe iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」。 タッチパネルを触って左にスライド、右にスライドといった操作をスワイプといいますが、このイベントを取得するjQueryプラグインのご紹介です。 1本指だけではなく、2本指でスワイプした際のイベントを取ることも出来ます（それぞれ区別可能） ブラウザ上でiPhoneアプリっぽい動作を簡単に実現できますね。 demoをiPhone等で見てみましょう(違和感なくスワイプできるはずです） 1本指スワイプのデモ 2本指スワイプのデモ スワイプを使った画像ギャラリー 実装はjQueryベースということでや
ページをリロードしたときに、jQueryでページの先頭にスクロールさせる方法を紹介します。 リンクをクリックしてページの先頭にスクロールさせる方法はネット色々出てきますが、リロードのタイミングでスクロール（＝要はページの先頭を表示）させる手段がみつかりませんでした。 別の実験を行っていてこのような動作を行いたいケースが発生したため、少し調べてみました。認識誤りな点がありましたらご指摘ください。 １．JavaScriptのscrollTo()を使ったスクロール まず、JavaScriptのscrollTo()を使って次のようなコードを記述してみましたが、正常に動作しませんでした。 window.onload = function(){ window.scrollTo(0,0); } 動作結果は次の通りです。 Firefox：ページトップに移動するが、スクロールバーは戻らない Chrome：ペ
2013/6/26 本問題は解消しました。今後はjQuery利用のサイトでZenbackを設置いただき、IEで閲覧しても問題なくウィジェットが表示されます。 zenbackは、スムーズな読み込みを実現するエフェクトのためなどにjQuery 1.4.2を利用しています。 そのため、ブログ側で違うバージョンのjQueryを利用しているサイトでは、IEのみjQueryのコンフリクトが発生し、zenbackが表示されないことがございます。※大手ブログサービスをご利用で、ご自身でjQuery設置を含むカスタマイズを行っていなければ、本件は対応不要ですのでご安心ください。 この事象を回避するには、お手数ですが、ブログ側で利用している jQuery で以下のようなご対応をお願いいたします。 （１）jQuery の関数名を '$' で利用するのではなく、 'jQuery' で開始するようにする。 （２）j
jQueryをより小さく、軽量に、モジュラー化することを目指し、「jquip」というプロジェクトが立ち上がった。コア部分である「xjquip.js」ファイルのサイズはミニファイ・圧縮後で4.28KBと小さく、これはjQueryの13％というコンパクトさだという。サイズは小さいもののjQueryの持つ機能の90％を実装、さらにプラグインを追加することでそれ以外の機能も利用できる。 jquipは「jQuery in parts」の略で、「必要なものだけを取り入れる」というコンセプトを持つ。米国在住の開発者、Demis Bellot氏とJey Balachandran氏が始めたプロジェクトとなる。肥大化するjQueryに対し、コードベースの再構成やよりいっそうのモジュラー化のためのフィードバックを送ることを目的にしているとのこと。ライセンスはMIT License。 jquipは$()セレクタや
モバイルアプリケーション開発のためのJavaScriptによるフレームワーク「jQuery Mobile 1.0」のFinal Releaseが、今週前半に予告された通り、ついに公開されました（日本時間18日午前3時頃）。 jQuery Mobileはオープンソースとして開発されており、「Download」ページからだれでも無料でダウンロード可能です。jQueryのWebサイトやマイクロソフトのCDN（コンテンツデリバリネットワーク）などでの配布もはじまっています。 HTML5のタグだけでモバイルアプリケーションが作れる jQuery Mobileの大きな特徴は次の3つです。 1）HTMLのタグだけで、プログラミングせずにモバイルアプリケーションができてしまう 2）モバイルのユーザーインターフェイス対応の部品が多く揃っている 3）iOS、Android、WebOS、Windows Mobl
jQueryでテーブル（table要素）に行を追加する方法を紹介します。 テーブル操作は、テーブル系のjQueryプラグインで色々なことが実現できると思いますが、業務で使っているツールでこの機能がピンポイントで必要になったため自力で作りました。 単に追加するだけであれば後述するappend()とprepend()で大丈夫です。ただアニメーション表示する方法についてはネットで色々探しましたが同様の情報がなかったので試行錯誤して作りました。テーブルを操作する場合の参考になれば幸いです。 １．サンプル まずはサンプルで動作をご確認ください。 jQueryでtableに行を追加するサンプル サンプルでは行の追加・削除・全削除が行えます。 ２．テーブルの先頭に行を追加する 行をtable要素の先頭に追加するには次のように記述します。 $('tbody').prepend('<tr><td>～</td
昨日jQuery1.6が公開されたので、その内容をまとめてみました。 jQuery: » jQuery 1.6 Released だいたい原文にそってますが、翻訳ではありません。 追記 : data()の扱いが誤っていたので修正しました。キーをキャメルケースにする必要があるとしていましたが、引数を与えずにマップを得た場合の話で、引数にキーを与えて個別に取得する場合は過去のコードと互換性があります。thanks @GeckoTang !（23:11） 変更点 既存コードに影響がある変更がいくつかあります。 data属性の自動マッピング ハイフン “-” を含む名前のとき、$element.data()に引数を与えずに得たマップのキーはキャメルケースに変換されるようになりました。 var $div = $('<div data-abc-xyz="123" />'); var data = $d
こんにちは。さすがに見ないだろうと昔撮ったVHSビデオを、捨てるにあたってじっくり見てしまったminamiです。 小ネタです。HTMLファイルにちょっとした文言を読み込みたいときに重宝するjQuery.load()ですが、Chromeでうまく動かない場合があります。ちょっと引っ掛かってしまったので回避方法を調べました。 サンプルを作ってみた ものすごく簡単に以下のようなスクリプトを書きました。data.txtから読み込んだテキストを、div#txtPlaceに読み込みます。これをローカルでチェックしてみます。 function loadText() { var dataPath = "data.txt"; $("#txtPlace").load(dataPath); } firefox IE8 出ました。 出ません。なぜ！？参考ページを見ると、 Chrome: ローカルWebページからのア
HTML5のウェブフォームの機能「プレースホルダーテキスト」をHTML5に対応していないブラウザにも実装する旧式の方法、ModernizrとjQueryを使った今時の方法、の二つを紹介します。 HTML5対応ブラウザでは、「placeholder」の値がテキストフィールドに表示されます。 <form class="form"> <p><input type="text" placeholder="Your name please"></p> <p><input type="text" placeholder="Enter your email"></p> <p><input type="search" placeholder="Search"></p> <p><textarea placeholder="Write your comments here"></textarea></p> <
はじめに jQueryの機能を大きく分けると、DOM操作、アニメーション、イベント処理、Ajax、その他のユーティリティ関数といった分類ができます。DOM操作は前回の記事で解説したような、HTMLの要素を追加したり書き換えたりといった操作です。今回はその中の1つ、アニメーションについて解説します。アニメーションも正確にはDOM操作に分類されますが、アニメーションだけでかなり大きな比重を占めるので今回は通常のDOM操作とわけて考えます。イベント処理やAjax、ユーティリティ関数についても連載の後のほうで解説する予定です。 JavaScriptでアニメーションの基本 まず始めに、jQueryを使わないでアニメーションをする方法を紹介します。jQueryのアニメーションが実際に内部でどのような処理が行われているかを知ることでその後の理解度が増すと思います。JavaScriptでアニメーションは基
Webパフォーマンスを考える上で重要なことのひとつにHTTPリクエストを減らすというのがありますが・・・ HTTPリクエストを減らすために、画像の遅延読み込みをすると噂のLazy Loadっていうプラグインがあって、結構色んなサイトで使われているのを見るので、一言言っとくか的な感じで書こうとしたらいつからかプラグインページに以下の注意書きが追加されてた。 Lazy Load is currently not usable. It does not work with the latest browsers as expected. I have currently no time updating the code myself. Patches are always welcome. If you find a solution just fork and send a pull req
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
