javascript
要素をクリックしたら、jsonを返して値をレンダリングする処理を書いてるんだけど、ieの一部のバージョンでjsonがそのまま表示されてしまう不具合が。preventDefaultが使えない場合はreturnValueにfalseをセットする方法で回避できた event.preventDefault ?…
業務用のアプリなどに使えそうJavaScript UI Library, HTML5 Widgets Framework for App Development - Webix
Card ― make your credit card better in one line of code 入力したカード情報が反映される。 ブランドも判別してロゴを表示 CVCの入力でフリップして裏面が表示される かっこいいけどクレカ入力フォームだけ浮きそう。 あとJCBはロゴなし。
Odometer ― Transition numbers with ease スピードメーターみたいにアニメーションして数字を表示できるライブラリ。 ちょっと触ってみて遊んでいた。 jQueryなど依存ライブラリ無し。 テーマがいくつか用意されていて、シンプルなやつから 使い所がなさそ…
jsonを返すようなAPIのテストフォームを作るときに便利かもjson.human.js - Json Formatting for Human Beings
favico.js - Make a use of your favicon 面白い。+1ボタンを押すと、faviconについたバッジの数値がアニメーション付きで上がっていく。 9を超えると9+になる。Play Videoを押すと、faviconが動画になる。音が鳴るので注意。safariだと動かなかない模様。
function greet (){ console.log('I am ' + this.name)} // 発行者を作成 var publisher = _.extend({name: 'publisher'}, Backbone.Events); // 購読者を作成 var observer = _.extend({name: 'observer'}, Backbone.Events); // 発行者にgreetイベントが発…
jsPDF - HTML5 PDF Generator | Parallaxたまたま見かけたので、ダウンロードして試してみた。 クライアントサイドでpdfを生成できる。このコードで var doc = new jsPDF(); var img = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgM…
Textillate.js リンク開くとだいたいどんなことができるのかわかります。 テキストを表示させる、消すときにいろいろなアニメーションをさせることができます。見てて面白い。ドキュメントみる限り結構自由にカスタマイズできそうです。
indexを指定して配列から値を削除したい場合、pythonだとdelで書けます。あまりやる機会ないけど。 array = ['a', 'b', 'c', 'd', 'e'] del array[1] print array # => ['a', 'c', 'd', 'e'] array = ['a', 'b', 'c', 'd', 'e'] del array[1:3] print array …
kickstrapのjsをなんとなく読んでたらこんなの見つけました。 // IE compatibility fallbacks, turned on when needed. // Thanks to http://stackoverflow.com/questions/2790001/fixing-javascript-array-functions-in-internet-explorer-indexof-foreach-…
var myArray = [1,2,3,4,5,5,3]; uniqueArray = myArray.filter(function(e, pos){ return myArray.indexOf(e) == pos; }) 参考: Remove Duplicates from JavaScript Array - Stack Overflow
カードをひっくり返すようなエフェクトを実現するライブラリを探していて、いくつか候補が見つかったのですが、なかでもとっつきやすそうだったFlip!を試してみました。 使い方は単純なのでオフィシャルのサイト見ればすぐに分かります。つくってみたのがこ…
こんな警告がでてて、どういうことなのかと思ってみてみたら、thisがglobal objectを指している場合は警告をだすようになっていた。 とくに問題はないと思うのでとりあえず、設定をoffにしておいた。 ちなみに上記のコードでは、thisを渡さなくても、即時関…
以下で、trueかfalseが得られる var is_disp = $('.selector').is(':visible'); セレクタに:visibleを含めると、表示状態の要素だけ取得できる var disp_elm = $('.selector:visible');
jQuery UIのdialogのヘッダ部分はデフォルトの表示だと結構存在感があります 場合によっては表示したくない場合もあるかもしれないので非表示にする方法を調べてみました。 いろいろ方法が考えられますが、ヘッダ部分はui-dialog-titlebarというclassがつい…
python s = "1" print s.zfill(3) # => 001 ruby s = "1" p s.rjust(3, '0') # => 001 javascript sliceを使って var s = "1" ("000" + s).slice(-3) # => 001
こちらのスライドで紹介されているjsの遅延描画についてのコードを読んで、自分がsetTimeoutの挙動について、よくわかってなさそうだったので調べてみました。 大規模なJavaScript開発の話 http://www.slideshare.net/terurou/javascript-13711976 以下が遅…
どこかで使えそうなのでメモコナミコマンド専用ってわけではなく、いろいろなキー操作にイベントを設定するためのライブラリです。 「command+shift+k」のような同時押し、gmailのキー操作風の（「g i」とか「* a」）キーの連続入力にも対応してます。 webサ…
jQueryを使って、type属性がfileのinputの入力値をクリアしたい、というケースがありまして $('input[type=file]').val('') 最初はとくに何も考えず、こんな感じで書いてて、chromeで動かしてる限りは問題なかったんですが、 IE8で動かしてみると入力値がク…
jQueryのセレクタで取得した要素をいったんgetで普通の配列にして、jsのreverseで逆順にした後、jQueryのオブジェクトに戻す <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function(){ $($("li").get().reverse()).each(function() { console.log($(this).text()); }); }); </script> </head> </html>
jQuery UIのProgressBarですが、valueの値によって色を変えたい場合どうするのかなと思って調べたら、そういうオプションってないみたいなのでhttp://jqueryui.com/demos/progressbar/ <script> $(function() { $( "#progressbar" ).progressbar({ value: 37 }); }); </script>…
jQuery使っていい場合。 サブミットの代わりに別の処理させたい場合はdo_somethingの位置に記述する $("form input").bind("keypress", function(e) { if (e.keyCode == 13) { e.preventDefault(); #do_something(); return false; } });
jQueryでcheckboxのチェック状態を取得しようとして、ミスったときのメモ 間違った例。チェック状態に関わらず"on"が返された $('input[type=checkbox]').val() // => "on" 正しいとおもわれる例。ベストかどうかは知らない。 チェック状態によってtrueかfal…
このあいだなんとなく描いてみたYoutubeをjsで連続再生するサンプルですが、埋め込みが不許可の動画が入っているとそこで再生がストップしてしまうので、その場合、処理を飛ばすようにしてみました。 <html> <body> <div id="player"></div> <script> var tag = document.createElement('script'); tag.s</body></html>…
子要素を探すのにはfind <p><span>Hello</span>, how are you?</p> <p>Me? I'm <span>good</span>.</p> $("p").find("span").css('color','red'); 親要素を探す場合はclosest <ul> <li><b>Click me!</b></li> <li>You can also <b>Click me!</b></li> </ul> $( document ).bind("click", function( e ) { $( e.target ).closest("li").toggleC…
javascriptでcookieに値を保存する場合はJQueryとjquery.cookie.jsを使うと便利です。https://github.com/carhartl/jquery-cookie // cookieを保存 $.cookie('the_cookie', 'the_value'); // cookieを取り出し $.cookie('the_cookie'); // 有効期限を指定し…
ドキュメントにあるGetting Startedのサンプルをちょっと変えて、連続再生をさせてみました。 onStateChangeで再生終了イベントを拾い、リストの次のidを再生させてます。 ドキュメント https://developers.google.com/youtube/iframe_api_reference index.h…
webページからjavascriptでメーラーを起動する方法を調べたのでメモ。 以下の通りで簡単でした。 location.hrefでmailtoに遷移させるだけ。 location.href = "mailto:xxxxxxxxxxx@xxxxxx.com"
backbone-boilerplate https://github.com/tbranyen/backbone-boilerplate クライアントサイドMVCフレームワークであるbackbone.jsを使用したアプリケーションのテンプレートですね なんかbackbone.jsってこういうの多いですね。 使ってみる 上記URLからzip…
