09-显示选择序列中的事件发生顺序

11.5.1　显示选择序列中的事件发生顺序

此例的目的在于展示前面描述过的事件的顺序（如图11-6所示）。要实现这一点，我们先显示5个可选段落及一个包含事件名称的 <span> 元素。代码中的 start 事件以粗体标示，指明了一个新的选择序列的起始：

<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
　　　 href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<style type=text/css>
　p.ui-selecting {
　　color : red;
　}
　p.ui-selected {
　　 background-color : gainsboro; }
　</style>
<div id=div1>
　<p> Paragraph 1 </p>
　<p> Paragraph 2 </p>
　<p> Paragraph 3 </p>
　<p> Paragraph 4 </p>
　<p> Paragraph 5 </p>
</div>
<hr />
<span id=result></span>
<script>
$("#div1").selectable ({
　start : function (event) 
　{
　　$("span#result").html ($("span#result").html () + " <b>start</b>");
　},
　stop : function (event) 
　{
　　$("span#result").html ($("span#result").html () + ", stop");
　},
　selecting : function (event, ui) 
　{
　　$("span#result").html ($("span#result").html () + ", selecting");
　},
　unselecting : function (event, ui) 
　{
　　$("span#result").html ($("span#result").html () + ", unselecting");
　},
　selected : function (event, ui) 
　{
　　$("span#result").html ($("span#result").html () + ", selected");
　},
　unselected : function (event, ui) 
　{
　　$("span#result").html ($("span#result").html () + ", unselected");
　}
});
</script>

每一次事件发生时，都会在 <span> 元素原有内容的基础上添加本次事件调用的方法的名称。