TakashiSasaki

Ehime University. Majoring in MANET and overlay network. Interests on Android, OSS and Southeast Asia. Being single again :-) ササキタカシ 佐々木隆志 JS3QBC局免失効中
Osaka/Matsuyama/Tokyo, Japan
http://slashdot.jp/~Livingdead/journal/

Works

Automate flows by Takashi SASAKI

  • 761
  • 0

Type inspection in JavaScript code

  • 1004
  • 0

Parse document.location.search string

#parseDocumentLocationSearchString クエリ文字列は一般的に `?a=b&c=d` のようなkey-valueペアとして解釈される。 しかし `?a` のようにkeyしか渡されなかったり、 `?a=` のように値が渡されなかったりすることもある。 これらを区別して処理するための関数 `parseDocumentLocationSearchString` を作成し、 デモページを用意した。 #2種類の動作モード ##一つ以上のkey-valueが`&`で区切られて渡された場合 ###引数(文字列) ?a=b&c=d&a=e&f&g= ###戻り値(連想記憶) { "a": [ "b", "e" ], "c": [ "d" ], "f": [ undefined ], "g": [ "" ] } 全てのkeyに対する値は、たとえその要素数が1であっても、リストになります。 `key`のみが与えられた場合、値は`undefined`となります。 `key=`の値は空文字列 `""`となります。 ###デモ `undefined`の値も`JSON.stringify`は`null`として扱います。 このモードで解釈された場合、 key-value pairのラジオボタンが選択されます。 [http://jsrun.it/TakashiSasaki/IleO?a=b&c=d&a=e&f&g=](http://jsrun.it/TakashiSasaki/IleO?a=b&c=d&a=e&f&g=) ##一つのkeyのみが渡された場合 そのキーそのものが`encodeURIComponent`などの方法でURLエンコードされた JSON文字列であると仮定して、デコード&パースする。 ###引数(文字列) ?%7B"a"%3A%5B"b"%5D%7D ###戻り値(連想記憶) { "a": [ "b" ] } ###デモ このモードで解釈された場合、 encoded JSON stringのラジオボタンが選択されます。 [http://jsrun.it/TakashiSasaki/IleO?%7B"a"%3A%5B"b"%5D%7D](http://jsrun.it/TakashiSasaki/IleO?%7B%22a%22%3A%5B%22b%22%5D%7D)

  • 330
  • 0

activate: 長いページの一部を折り畳んだり

#概要 HTML文書を折り畳みたいときにはbootstrapとか使ってタブやアコーディオンにすることが多いけど、 外部スクリプトを使いたくないこともあるので、onclickにactivateという関数を書くだけで簡易的に似たようなことをしてみた。 activateは二階層の文書構造を仮定する。ある親親要素の下に複数の親要素がある。親要素は見出しとコンテンツを含む。 ある見出しをクリックすると、その見出しを含む親要素は表示し、他の親要素のコンテンツは隠すというような動作をさせたい。 その際、他の親要素の見出しはクリックしたいので表示させたままにしたい。 親親要素(例えばbody) | |--親要素(例えばdiv) | |--見出し(例えばh1)onclick="activate(this)" を記述 | |--コンテンツ(例えばdiv) | |--コンテンツ(例えばdiv) | |--親要素(例えばsection) | |--見出し(例えばh1)onclick="activate(this)" を記述(optional) | |--コンテンツ(例えばdiv) | |--親要素(例えばdiv) |--見出し(例えばh1)onclick="activate(this)" を記述(optional) |--コンテンツ(例えばdiv) |--コンテンツ(例えばdiv) 柔軟性を持たせるために、隠すとか表示させるとか言った動作はdisplay属性を直接操作する代わりにクラスを足したり引いたりすることにした。 必要なクラスの種類は、「選択されている親の見出し」「選択されている親のコンテンツ」「選択されていない親の見出し」「選択されていない親のコンテンツ」の4つである。 これらを親親要素のdatasetとして記述する。それぞれのdataset名は次の通り。 どれか一つの見出しのonclickでactivate(this)が発動すれば、全ての見出しに自動的にaddEventListenerされます。 * 選択されている親の見出し : data-active-title-class * 選択されている親のコンテンツ : data-active-content-class * 選択されていない親の見出し : data-inactive-title-class * 選択されていない親のコンテンツ : data-inactive-title-class #使用例 ## HTML文書

項目1

内容1。本日は晴天なり。 内容1。本日は晴天なり。 内容1。本日は晴天なり。 内容1。本日は晴天なり。 内容1。本日は晴天なり。

項目2

内容2。昨日は雨天でした。 内容2。昨日は雨天でした。 内容2。昨日は雨天でした。 内容2。昨日は雨天でした。 内容2。昨日は雨天でした。 内容2。昨日は雨天でした。

項目3

内容3。明日も晴れるといいな。 内容3。明日も晴れるといいな。 内容3。明日も晴れるといいな。 内容3。明日も晴れるといいな。 内容3。明日も晴れるといいな。 内容3。明日も晴れるといいな。

##スタイルシート .active_title1 { display: block; } .inactive_title1 { display: block; } .active_content1 { display: block; } .inactive_content1 { display: none; } #最新のコードとデモ [http://jsdo.it/TakashiSasaki/iHhR](http://jsdo.it/TakashiSasaki/iHhR)

  • 576
  • 0

Skills

Hot tags

Categories

HTML / CSS / JavaScript