Earlier I found that treepluginview,
http://groups.google.com/group/jquery-en/browse_thread/thread/773d6c6307eff840/ec8062b88f745e60?lnk=gst&q=treeview+collaspse#ec8062b88f745e60,
didn't work well with IE7 or rather IE8 with IE7 mode. I traced it
thru and the problem lies with animate(...) function and not so much
to do treepluginview. I found setting the selector to the outer <ul
id="tree"> rather than the <ul id="subtree"> block, the animation
works for opening and closing the menu otherwise the menu closing
action will be abrupt. How can I work around this for IE7? Or did I do
something wrong here?
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<link rel="stylesheet" href="Work_files/jquery.treeview.css"
type="text/css" media="screen" />
<SCRIPT type=text/javascript src="Work_files/jquery-1.3.2.min.js"></
SCRIPT>
<style type="text/css">
#browser {
font-family: Verdana, helvetica, arial, sans-serif;
font-size: 68.75%;
}
#tree
{
background-image: url('work_files/bg.jpg');
background-repeat:repeat-y;
height: 100px;
}
</style>
<script>
$(document).ready(function()
{
heightToggle = function(animated, callback) {
this.animate({ height: "toggle" }, animated, callback);
}
$('.openclose').bind("click", function(e)
{
/* if the selector is set to "#tree" and not "#subtree"
then the tree will not collasped immediately */
$('#subtree').heightToggle(true);
});
});
</script>
</head>
<body>
<span class="openclose"><strong>Top</strong></span>
<ul class="treeview" id="tree">
<li ><span ><strong>Home</strong></span>
<ul id="subtree">
<li>Item X</li>
<li><span>header</span>
<ul>
<li><a href="?y">Item Y</a> </li>
</ul>
</li>
<li class="last"><a href="?z">Item Z</a></li>
</ul>
</li>
</ul>
</body>
</html>
No comments:
Post a Comment