書式
"cssSelector" : function(el){ 〜 }
cssSelector : CSSセレクタ
el : エレメント
説明
複数条件で動作を定義するにはCSSセレクタと同様の書式で指定し直後に処理する関数を指定します。この関数には条件に対応したエレメントが渡されます。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="behaviour.js"></script>
<script type="text/javascript" src="style.js"></script>
</head>
<body>
<h1>Behaviourサンプル</h1>
<ul>
<li class="list">項目その1(マウスを乗せてください)</li>
<li class="list">項目その2(マウスを乗せてください)</li>
<li class="list">項目その3(マウスを乗せてください)</li>
</ul>
<p>
<a href="#" class="list">リンク1(ここは変化なし)</a><br>
<a href="#" class="list">リンク2(ここは変化なし)</a><br>
<a href="#" class="list">リンク3(ここは変化なし)</a><br>
</p>
</body>
</html>
var myRules = {
"li.list" : function(el) {
el.onmouseover = function(){
this.style.backgroundColor = "#fa0";
};
el.onmouseout = function(){
this.style.backgroundColor = "#fff";
}
}
}
Behaviour.register(myRules);