脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

JavaScript

tablesorterでpager機能を使う方法

以前のポストでtablesorterの基本機能であるsort機能とfilter機能を説明しましたが、今回はpager機能を利用する方法を説明します 基本機能(sort & filter機能の使い方) portaltan.hatenablog.com Pagerの使い方 1.まずはsortだけ可能な単純なtableを作成しま…

tablesoterをRailsで使う方法 + FilterとSort機能の使い方

jueryプラグインのtablesorterをRailsで使う方法です。tablesorterはtableをsortしたりfilteringするjQueryプラグインです。 ソースコード まずはじめに、tablesorterには本家とforkして他の人が開発しているPageの二つのドキュメントがあります 本家: http…

Reactのjsxをプリコンパイルする方法

Reactでjsxを使っている場合、JSXTransformerを使って描画時ブラウザ側でjsx⇒HTML5に変換することが出来ます。しかし、実際にはこれを使うと以下のような警告文が出ます。 You are using the in-browser JSX transformer. Be sure to precompile your JSX fo…

Javascritでデフォルト引数を設定するには

以下のように同じ名前で変数宣言して代入してやれば似たような処理になります function test(val) { var val = val || 777; . . } 仮引数に値が入っていればその値がそのまま新しいvalに再格納されます。 仮引数に値が入っていなければ、undefinedとなり、次…

Javascriptでヒアドキュメントを使う方法

Rubyなどで見られる一括して文字列を格納するヒアドキュメント(以下例)をJavascriptで使う方法です。 Rubyでのヒアドキュメントの例 str = <<EOS 1 line 2 line 3 line EOS # ==> #1 line #2 line #3 line JavaScriptでヒアドキュメント 構文 function heardoc() { var heredoc = (function () {</eos>…

ReactでDOMの要素を直接取得・変更する方法

構文 //取得 var test = React.findDOMNode(this.refs.${ref名}).${取得したい要素名}; //格納・変更 React.findDOMNode(this.refs.${ref名}).${変更したい要素名} = ''; Example render: function() { return ( <div> <input type="text" ref="command" /> </div> ); } 上記のinputタグの中身を、例えば空…

Reactでstateに上書きではなく追加する方法

現在Reactのstateの値を変更するメソッドとして、「setState」や「replaceState」は用意されていますが、「appendState」はありません。Component API | Reactfacebook.github.ioなので、既存のstateの値に新しい値を追加したい場合は以下のように書きます t…

ReactでEnterキーのpushイベントを取得する方法

ReactでEnter keyが押されたときにアクションを設定する方法です。 ソースコード var Test = React.createClass( { sendCommand(e) { # <== ① var ENTER = 13; # <== ② if (e.keyCode == ENTER) { # <== ③ // Enterが押されたときのアクション } }, render: …

Reactのstate(prop)内で改行文字を使いたい場合

JSX構文 ReactはJSXを採用しているので、構文の中で以下のようにhtmlタグを直接書くようににコーディングできます。 var Test = React.createClass( { // 処理とか }, render: function() { return( <div> {this.state.foobar} </div> ); } ); しかし、このhtmlタグライ…

ReactのJSX構文内でclass属性を設定する場合

render: function() { return ( <div class='foo'>Hello React!!</p> ); } 上記のように直接class属性を指定しようするとエラーが出て怒られます Warning: Unknown DOM property class. Did you mean className?これはclassという文字がReact側で予約後として他で使われているため…

JavaScriptでブラウザ側のsessionを使う方法

使用法 // セッションの格納 window.sessionStorage.setItem(['キー名'],['値']); // セッションの数の取得 window.sessionStorage.length // セッションの値の取得 window.sessionStorage.getItem(['キー名']); console.log(a); // => value1 // 指定したセ…

Reactで、jquery(ajax)内でsetStateしようとすると「this.setstate is not a function」って怒られて失敗する場合の対策

問題 Reactを使っていてstateにsetしようとして普通にthis.setStateとかやっていると、this.setstate is not a functionってエラーが出るときがあります。 JavaScript的にどういうかはわかりませんが、Ruby的に言うとスコープが切り替わってself(=this)が変…

ajaxと非ajax(jqueryだけ)でweb APIにクエリーを投げる方法

jQueryだけ $.${通信方式}(${URL}, { ${param名1}: ${value1}, ${param名2}: ${value2} }, function(res){ // 成功時の処理 }); // 例 $.get('http://hogehoge.html', { foo: 'bar', hoge: 'fuga' }, function(res){ alert(res); }); 簡潔に実装できる 失敗…

JavaScriptのSwitch文で正規表現を使う方法

タイトルの通りJavaScriptのSwitch文のcaseで正規表現を使う方法です。 var str = 'foo'; switch (true) { case /^(hoge|fuga)$/.test(str): alert(RegExp.$1); break; case /^(foo|bar)$/.test(str): alert(RegExp.$1); break; } 一度switch文をtrueで通し…

[Lightbox] 画像クリック時に拡大して表示するLightboxの使い方

Lightboxの使い方このPageでは以下のLightboxの使い方を説明します。 http://lokeshdhakar.com/projects/lightbox2/そもそもLightboxとは何か?上のサイトのTOPページを見て頂けば一発ですが、画像をクリックした際にその画像をブラウザサイズに拡大するため…