2013/02/14

jQuery UIのアコーディオンでハマる話

C++ばっかやってて久々にjavascriptとか触ると、すげーおっかなびっくりになる。
例えばC++に比べてjavascriptは型がユルいんで、「これ渡してちゃんと受け取ってくれるんやろか」とか不安になったりする、とか。そういうの。
言語の考え方が違うんで、その切り替えに一寸時間が掛かったりする。

jQuery UI。
因みに1.10.0。
一旦.accordion()で設定した後で要素を追加しても、そのままでは追加された要素のとこはaccordionにならないっぽい。
色々テストコード書いてみたりしたけど、うまくいかず、ビミョウにハマる。
うーん。どうしたものか。

他のjQueryパーツを寄せ集めて自分で組み立てた方が早いか・・・。
と思いつつ一寸調べてみたら、どうもイッペンdestroyしてから.accordion()で設定し直さなければならないっぽい。
てかちゃんとAPI Document読めっつー話。
オウケイ。

ほいじゃあつって、テストコードの頭に.accordion("destroy")をくっつけてみたんだけど、うまくいかない。
どうも.accordion()で設定されてない状態でdestroyするとイカンっぽい。
なので最初に一回.accordion()で設定してから、要素が追加される度にdestroyして再度設定し直す感じで。
これでOK。

解ってみれば簡単な話なんだけど、解るまでが疑心暗鬼な感じ。
まあこの辺がセンスの無さですな、という話。 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript">
//<h3>に番号振る用
var sum=0;
$(function(){
 //取り敢えずイッペンaccordion作っとく
 $("#chau").accordion();
 
 //ボタンクリックで要素追加、その後accordionの設定
 $("#button").bind("click", function(){
  var chau = "<h3>chau"+sum+"</h3>"
   +"<div>chau chau chau? chau chau,"
   +" chau chau chaun chau?</div>";
  $("#chau").append(chau);
  sum++;
  
  setAccordion();
 });
});

//アコーディオンの設定
//イッペンdestroyしてから設定する
function setAccordion(){
 $("#chau").accordion("destroy");
 $("#chau").accordion({
  header: "h3",
 });
}
</script>

</head>
<body>
 <button id="button">add</button>
 <div id="chau"></div>
</body>
</html>
こんな感じ。
何故かsyntaxhighlighterで<br />が使えない・・・。
Labels: