input type=”file”で複数選択した画像をアップロード前にプレビュー表示(jQuery)(html5)
multipleを使わない(1つだけ)であれば、input type=”file”で画像アップロード前にプレビュー表示(jQuery)の方法で、プレビューが可能ですが、multipleを指定した場合に、複数画像をプレビュー表示する必要があったのでメモ。 複数選択できるhtmlを用意 用意するhtml…
jQuery
jQueryUIのDatepickerで複数の日付を選択する(簡易版)
タイトルには簡易版って書きましたけど、どっちかといえば安易版？ｗ ユーザー側で使うのは重いんで、管理画面とかならまぁ使ってもいいかなーくらいの感じです。 まずはhtmlから。 <head> <link rel="stylesheet" href="//…
jQuery($.ajax)で、ファイルをアップロードしてみる。
最近は、ページを遷移しないサイトが増えてるようなので、画像のアップロードもAjaxで。 <form id="form"> <input type="file" name="img_file"> <input t…
jQueryから送信($.ajax)した配列をAmon2(Perl)で受け取る。
jQueryからpostされた配列をAmon2で受け取ります。 ま、タイトルのまんまですね。 jsの方はざっくりですが、下記のような感じ。 var hoge = ; $.ajax({ type: "POST", url: "/myapp/test", data…
jQueryUIのDatepickerでカレンダーを表示してみる。
日付を選択するようなサービスだと使ってるとこ多い気がする。 (って事ですごい今更な感じもする) <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/…
Featherlight.jsにイベントを設定
Featherlight.jsで、イベントを指定できるようなので試してみました。 (Featherlight.jsについては以前書いたエントリーにでも -> Featherlight.jsでhtmlを読み込んでみる。) 開く前(.beforeOpen) $.featherlight.defaults…
colspanを指定した時のdisplay変更時は、table-rowを指定。(CSS)
jsからCSSを変更するのとかよくある処理ですが。 まず2つのtrを用意。 (1つはdisplay:none;で、tdにcolspanが指定されている) <table> <tr> <td>Title</td> <td><a href=…
jQueryでlocation.hashが変わった時にイベントを発生させるプラグイン(hashchange)
ちょいと古いプラグインで更新もされてないようですが、修正すればIEでも動くようだったので試してみた。 Ben Alman » jQuery hashchange event プラグインの読み込み <script src="//ajax.googleapis.com/ajax/libs…
Featherlight.jsでhtmlを読み込んでみる。
軽めなlightbox系プラグインを探してたら、Featherlight.jsってのがあったんで試してみました。 Featherlight – The ultra slim jQuery lightbox. <html> <head> <link href="…
jQueryでradioにチェックを入れる(.prop)
あんまやらないですが、たまにやる時にいつもググるのもあれなんで。 <input type="radio" name="user" value="1"> <input type="radio" name=…
faviconを動的に変更する(html5-canvas)
たまに見かける新着があった時にfaviconに1とか2とかでるやつを実装する時のメモ。 更新通知以外の使い道はパッと思い浮かびませんが、他にも何か使える場面があるかも。。 まずhtml側から。 headにid="favicon"なlinkタグを入れておきます。 <!DOCTYPE html&g…
jQueryでcheckboxを反転させる
反転って言葉が妥当かはおいといて、、 チェック入ってる場合は外して、外れてる場合はチェックする。 $('input').prop('checked', function( index, prop ){ return !prop; }); prop使うとお手軽ですねー。…
ドラッグ＆ドロップで順番変更(並べ替え)実装するならjQueryUI(Sortable)で。
もはや実装するっていうか、jQueryUIを読み込むだけなんですが・・。 <html> <head> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui…
leanModal.jsをAjax対応にしてみる(Ajaxで取得したhtmlを表示)
モーダルウィンドウを表示するのに良さげなPluginを探してたら軽量なjsとして紹介されていたのがleanModal.js ただ、これAjaxに対応してないようですね。 (元々html内に用意されたものしか表示できない) でも別のクリックイベント発生時に、Ajaxで取得してhtmlを生成、その後le…
jQueryでn番目の要素
カウントしながらeachで回したろうかと思ったら、:eqってのがあるんですね。 <from> <input type="checkbox" name="hobby" value="1">サッカー <input …