htmledit_views">
功能:
点击列表中的对象时,为选中对象加上边框(高亮显示)。
实现过程:
1.为每个对象指定html" title=css>css名称:myhtml" title=css>css
2.定义两个html" title=css>css,一个overhtml" title=css>css,一个outhtml" title=css>css
3.通过myhtml" title=css>css为每个对象绑定mouseover,mouseout,click三个事件的处理,在处理中操作html" title=css>css从而实现选中对象时的高亮显示。
注:本文使用了jquery用于方便定位对象。
以下是sample:
点击列表中的对象时,为选中对象加上边框(高亮显示)。
实现过程:
1.为每个对象指定html" title=css>css名称:myhtml" title=css>css
2.定义两个html" title=css>css,一个overhtml" title=css>css,一个outhtml" title=css>css
3.通过myhtml" title=css>css为每个对象绑定mouseover,mouseout,click三个事件的处理,在处理中操作html" title=css>css从而实现选中对象时的高亮显示。
注:本文使用了jquery用于方便定位对象。
以下是sample:
$(".myclip-item-link").mouseover(function() {
// 鼠标移到超链接上时,加上边框
$(this).addClass("myclip-item-over");
}).mouseout(function() {
// 鼠标移出超链接时,去掉边框
$(this).removeClass("myclip-item-over");
}).click(function(){
// 点击超链接后,加上高亮边框(同时去掉其它超链接的高亮边框)
$(".myclip-item-link").removeClass("myclip-item-highlight");
$(this).addClass("myclip-item-highlight");
});
html">
<style>
.myclip-item-link {
display: block;
height: 105px;
outline-style: solid;
outline-color: #AAAAF0;
outline-width: 1px;
}
.myclip-item-over {
outline-style: solid;
outline-color: #FFAAA0;
outline-width: 2px;
}
.myclip-item-highlight {
outline-style: solid;
outline-color: #FFAAA0;
outline-width: 3px;
}
</style>
html">
...
...
...
<ul>
<li>
<div class="myclip-item">
<a href="javascript:void(0);" class="myclip-item-link">
<div>
<img src="img/1.gif" alt="" width="75" height="75">
</div>
<div class="myclip-item-desc">
2012/08/22 17:42:30
</div>
</a>
</div>
</li>
<li>
<div class="myclip-item">
<a href="javascript:void(0);" class="myclip-item-link">
<div>
<img src="img/2.jpg" alt="" width="75" height="75">
</div>
<div class="myclip-item-desc">
2012/08/22 17:42:30
</div>
</a>
</div>
</li>
</ul>
...
...
...