jquery - putting an image tag into html expandable tree -
i converting xml tree expandable html tree. code working. however, want replace - , + signs jpeg images such
http://i1341.photobucket.com/albums/o747/mike_younes/bullet_zpsblghj3ip.gif
i trying place link href @ place of <b>-</b> not working. use style of
background: transparent url(http://i1341.photobucket.com/albums/o747/mike_younes/bullet_zpsblghj3ip.gif) no-repeat top left; but wont work here. do? working code:
<!doctype html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $.ajax({ url: "cd_catalog2.xml", success: function (tree) { traverse($('#treeview li'), tree.firstchild) // – — $('<b>–<\/b>').prependto('#treeview li:has(li)').click(function () { var sign = $(this).text() if (sign == "–") $(this).text('+').next().children().hide() else $(this).text('–').next().children().show() }) } }) }); function traverse(node, tree) { var children = $(tree).children() node.append(tree.nodename) if (children.length) { var ul = $("<ul>").appendto(node) children.each(function () { var li = $('<li>').appendto(ul) traverse(li, this) }) } else { $('<ul><li>' + $(tree).text() + '<\/li><\/ul>').appendto(node) } } </script> <style type="text/css"> #treeview li{list-style: none;} #treeview ul { padding-left: 1em; } #treeview b { padding-right: 1em; } </style> <title>treeview</title> </head> <body> <ul id="treeview"> <li></li> </ul> </body> </html>
try below code. have not fetched list file static example.
$('#treeview li:has(li)').addclass("max").click(function (e) { $(this).toggleclass("max min") $(this).children().toggle() e.stoppropagation(); }) the css
.min{ background: url("http://i1341.photobucket.com/albums/o747/mike_younes/plus_zps8o4adn0e.gif") no-repeat; padding-left : 20px; } .max{ background: url("http://i1341.photobucket.com/albums/o747/mike_younes/minus_zpsk0jlvbaa.gif") no-repeat ; padding-left : 20px; } here similar example jsfiddle
[edit]
updated script match requirement.
$(document).ready(function () { $.ajax({ url: "cd_catalog.xml", success: function (tree) { traverse($('#treeview li'), tree.firstchild) $('#treeview li:has(li)').click(function (e) { var cls = this.classname.replace("max","").replace("min","") $(this).toggleclass(cls+"max "+cls+"min") $(this).children().toggle() e.stoppropagation(); }) } }) }); function traverse(node, tree) { var children = $(tree).children() node.addclass(tree.nodename+"max") node.append(tree.nodename) if (children.length) { var ul = $("<ul>").appendto(node) children.each(function () { var li = $('<li>').appendto(ul) traverse(li, this) }) } else { $('<ul><li>' + $(tree).text() + '<\/li><\/ul>').appendto(node) } } the css few of tags
.cdmin{ background: url("http://i1341.photobucket.com/albums/o747/mike_younes/plus_zps8o4adn0e.gif") no-repeat; padding-left : 20px; } .cdmax{ background: url("http://i1341.photobucket.com/albums/o747/mike_younes/minus_zpsk0jlvbaa.gif") no-repeat ; padding-left : 20px; } .catalogmin{ background: url("http://i1341.photobucket.com/albums/o747/mike_younes/plus_zps8o4adn0e.gif") no-repeat; padding-left : 20px; } .catalogmax{ background: url("http://i1341.photobucket.com/albums/o747/mike_younes/minus_zpsk0jlvbaa.gif") no-repeat ; padding-left : 20px; } .artistmin{ background: url("http://i1341.photobucket.com/albums/o747/mike_younes/plus_zps8o4adn0e.gif") no-repeat; padding-left : 20px; } .artistmax{ background: url("http://i1341.photobucket.com/albums/o747/mike_younes/minus_zpsk0jlvbaa.gif") no-repeat ; padding-left : 20px; } i hope helps
sample example without ajax jsfiddle
Comments
Post a Comment