読者です 読者をやめる 読者になる 読者になる

event.preventDefault()がIEの一部のバージョンで効かない

要素をクリックしたら、jsonを返して値をレンダリングする処理を書いてるんだけど、ieの一部のバージョンでjsonがそのまま表示されてしまう不具合が。preventDefaultが使えない場合はreturnValueにfalseをセットする方法で回避できた event.preventDefault ?…

Javascript UI ライブラリ「Webix」

業務用のアプリなどに使えそうJavaScript UI Library, HTML5 Widgets Framework for App Development - Webix

クレカ入力インターフェースをリッチにするライブラリ

Card ― make your credit card better in one line of code 入力したカード情報が反映される。 ブランドも判別してロゴを表示 CVCの入力でフリップして裏面が表示される かっこいいけどクレカ入力フォームだけ浮きそう。 あとJCBはロゴなし。

スピードメーターのように数字を表示するライブラリ「odometer」

Odometer ― Transition numbers with ease スピードメーターみたいにアニメーションして数字を表示できるライブラリ。 ちょっと触ってみて遊んでいた。 jQueryなど依存ライブラリ無し。 テーマがいくつか用意されていて、シンプルなやつから 使い所がなさそ…

jsonをHTMLに変換して見やすくしてくれる「json.human.js」

jsonを返すようなAPIのテストフォームを作るときに便利かもjson.human.js - Json Formatting for Human Beings

faviconにバッジをつけるfavico.js

favico.js - Make a use of your favicon 面白い。+1ボタンを押すと、faviconについたバッジの数値がアニメーション付きで上がっていく。 9を超えると9+になる。Play Videoを押すと、faviconが動画になる。音が鳴るので注意。safariだと動かなかない模様。

Backbone.Eventsのメモ

function greet (){ console.log('I am ' + this.name)} // 発行者を作成 var publisher = _.extend({name: 'publisher'}, Backbone.Events); // 購読者を作成 var observer = _.extend({name: 'observer'}, Backbone.Events); // 発行者にgreetイベントが発…

クライアントでpdfを生成するjsPDF

jsPDF - HTML5 PDF Generator | Parallaxたまたま見かけたので、ダウンロードして試してみた。 クライアントサイドでpdfを生成できる。このコードで var doc = new jsPDF(); var img = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgM…

テキストをアニメーションさせるライブラリ Textillate.js

Textillate.js リンク開くとだいたいどんなことができるのかわかります。 テキストを表示させる、消すときにいろいろなアニメーションをさせることができます。見てて面白い。ドキュメントみる限り結構自由にカスタマイズできそうです。

javascriptでindexを指定して配列から値を削除する

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-…

javascriptでリストから重複を省く

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!を試してみた

カードをひっくり返すようなエフェクトを実現するライブラリを探していて、いくつか候補が見つかったのですが、なかでもとっつきやすそうだったFlip!を試してみました。 使い方は単純なのでオフィシャルのサイト見ればすぐに分かります。つくってみたのがこ…

Pycharmのjavascriptエディタでthisがglobal objectを指している場合は警告がでる

こんな警告がでてて、どういうことなのかと思ってみてみたら、thisがglobal objectを指している場合は警告をだすようになっていた。 とくに問題はないと思うのでとりあえず、設定をoffにしておいた。 ちなみに上記のコードでは、thisを渡さなくても、即時関…

jQueryで要素の表示・非表示を判別する

以下で、trueかfalseが得られる var is_disp = $('.selector').is(':visible'); セレクタに:visibleを含めると、表示状態の要素だけ取得できる var disp_elm = $('.selector:visible');

jQueryUIのdialogでヘッダ部分を表示しない

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

「大規模なJavaScript開発の話」のsetTimeoutを使った遅延描画について

こちらのスライドで紹介されているjsの遅延描画についてのコードを読んで、自分がsetTimeoutの挙動について、よくわかってなさそうだったので調べてみました。 大規模なJavaScript開発の話 http://www.slideshare.net/terurou/javascript-13711976 以下が遅…

webページにコナミコマンドを仕込めるライブラリMouseTrap

どこかで使えそうなのでメモコナミコマンド専用ってわけではなく、いろいろなキー操作にイベントを設定するためのライブラリです。 「command+shift+k」のような同時押し、gmailのキー操作風の(「g i」とか「* a」)キーの連続入力にも対応してます。 webサ…

IE8でのクリアをしたい

jQueryを使って、type属性がfileのinputの入力値をクリアしたい、というケースがありまして $('input[type=file]').val('') 最初はとくに何も考えず、こんな感じで書いてて、chromeで動かしてる限りは問題なかったんですが、 IE8で動かしてみると入力値がク…

jQueryのeachを逆順に処理

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によって変える

jQuery UIのProgressBarですが、valueの値によって色を変えたい場合どうするのかなと思って調べたら、そういうオプションってないみたいなのでhttp://jqueryui.com/demos/progressbar/ <script> $(function() { $( "#progressbar" ).progressbar({ value: 37 }); }); </script>…

Enterキーでformをサブミットさせない

jQuery使っていい場合。 サブミットの代わりに別の処理させたい場合はdo_somethingの位置に記述する $("form input").bind("keypress", function(e) { if (e.keyCode == 13) { e.preventDefault(); #do_something(); return false; } });

jQueryとcheckbox

jQueryでcheckboxのチェック状態を取得しようとして、ミスったときのメモ 間違った例。チェック状態に関わらず"on"が返された $('input[type=checkbox]').val() // => "on" 正しいとおもわれる例。ベストかどうかは知らない。 チェック状態によってtrueかfal…

Youtubeを連続再生するサンプル2

このあいだなんとなく描いてみたYoutubeをjsで連続再生するサンプルですが、埋め込みが不許可の動画が入っているとそこで再生がストップしてしまうので、その場合、処理を飛ばすようにしてみました。 <html> <body> <div id="player"></div> <script> var tag = document.createElement('script'); tag.s</body></html>…

jQueryで親要素を探す

子要素を探すのには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…

jquery.cookie.jsでcookieにオブジェクトを保存

javascriptでcookieに値を保存する場合はJQueryとjquery.cookie.jsを使うと便利です。https://github.com/carhartl/jquery-cookie // cookieを保存 $.cookie('the_cookie', 'the_value'); // cookieを取り出し $.cookie('the_cookie'); // 有効期限を指定し…

youtubeの動画を連続再生するサンプル

ドキュメントにあるGetting Startedのサンプルをちょっと変えて、連続再生をさせてみました。 onStateChangeで再生終了イベントを拾い、リストの次のidを再生させてます。 ドキュメント https://developers.google.com/youtube/iframe_api_reference index.h…

JavaScriptからメーラーを起動する方法

webページからjavascriptでメーラーを起動する方法を調べたのでメモ。 以下の通りで簡単でした。 location.hrefでmailtoに遷移させるだけ。 location.href = "mailto:xxxxxxxxxxx@xxxxxx.com"

backbone-boilerplateを触ってみる

backbone-boilerplate https://github.com/tbranyen/backbone-boilerplate クライアントサイドMVCフレームワークであるbackbone.jsを使用したアプリケーションのテンプレートですね なんかbackbone.jsってこういうの多いですね。 使ってみる 上記URLからzip…

node.js + backbone.js + mongodb + coffeescriptのコードサンプルとUI駆動開発

node.js、backbone.js、mongodb、coffeescriptなどを使用したシンプルなCRUDアプリのサンプルがgithubで公開されていましたので、動かして遊んでました フレームワークはexpressを使用しています。https://github.com/gelnior/ponyoちゃんと動きます そもそ…

Google App Engine + Backbone.js + Require.js で作成されたwebappサンプル

webapp-boilerplate https://github.com/ronreiter/webapp-boilerplate Google App Engine、Backbone.js、Require.jsを使用して作成されたTodo listのサンプルコードがgithubで公開されてました。コードには丁寧にコメントが付けられているので勉強になりま…

backbone-railsを触ってみた

backbone-railsを触ってみたのでメモです。https://github.com/codebrew/backbone-rails インストール bakcbone-railsはrailsの3.1系で使えます。 railsのプロジェクトを作り、Gemfileに以下を記述します。 gem rails-backbone あとはbundle install bundle …

html5アプリ作成のためのフレームワーク brunch

brunchというhtml5アプリを作るためのフレームワークがあります。 http://brunch.io/以下の言語、ライブラリ、ツールを使用してます。 CoffeeScript http://jashkenas.github.com/coffee-script/ Backbone.js http://documentcloud.github.com/backbone/ Und…

backbone.jsでフラグメントがない場合は#homeに遷移させる

先日作成したRouterのサンプルで、フラグメントがない場合、#homeを表示するようにしてみました。 http://dl.dropbox.com/u/494487/backbone-sample/routing/index.html $(function(){ App.router = new App.Router; if(Backbone.history.getFragment() === …

backbone.jsとjQueryでオートコンプリート

backbone.jsを使用するjQueryのプラグインBackbone-Widgetsで、フォームのオートコンプリートができるということなので試して見ました https://github.com/martindrapeau/Backbone-Widgetsサンプルはこちら http://dl.dropbox.com/u/494487/backbone-sample/…

backbone.jsのRouterを触ってみる

backbone.jsのRouterについて調べつつ、サンプルを書いて見ました。 http://dl.dropbox.com/u/494487/backbone-sample/routing/index.htmlタブをクリックすると、Backbone.Routeのroutesで、URLパターンに対して指定したfunctionが呼ばれ、コンテンツが切り…

backbone.jsのCollectionのフィルタリング

backbone.jsに慣れようと思って、ちょこちょこサンプルを書いているわけですが、 今日はインクリメンタルサーチっぽいUIを書いて見ました。サンプルはこちら http://dl.dropbox.com/u/494487/backbone-sample/filtering/index.htmlデータは静的にもってるだ…

backbone.jsでtooltipを表示する

backbone.jsのサンプルプログラムでtooltipを表示していたので、どういう処理になっているのか読んでみました。 せっかく読んだので、わかりやすいように関連する箇所だけのサンプルにしてみました。 $(function(){ var AppView = Backbone.View.extend({ el…

jQuery、underscore.js、backbone.jsのbindメソッドについて

backbone.jsのサンプルコードを読んでいると、bindという名前のメソッドがよく使われてます。そして、bindという名前のメソッドはbackbone.jsにも、underscore.jsにも、jQueryにも定義されています。慣れている人は問題ないのでしょうが、私は読んでいて混乱…

js2-modeを使う - インデントとフォールディング

インデント emacsでjavascriptの読み書きといえば、js2-modeが有名ですが、デフォルトではインデントがちょっとおかしいです。 以下はbackbone.jsのモデルのサンプルですが、例えば以下の様にインデントされてしまいます。 横に長いです。 var Note = Backbo…

underscore.jsのbindとカリー化

underscore.jsのbindについてのメモです。 underscore.jsのbind 第1引数の関数を実行する「関数」を返す 第1引数の関数内の「this」は第2引数の値が使われる コメントにある通り、第3引数以降を渡すとカリー化ができます。 定義は以下の通りです。 // Create…