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)                         // – &mdash;                         $('<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

Popular posts from this blog

python - Healpy: From Data to Healpix map -

-
Image
i have data grid rows represent theta (0, pi) , columns represent phi (0, 2*pi) , f(theta,phi) density of dark matter @ location. wanted calculate power spectrum , have decided use healpy. what can not understand how format data healpy use. if provide code (in python obvious reasons) or point me tutorial, great! have tried hand @ doing following code: #grid dimensions nrows*ncols (subject change) theta = np.linspace(0, np.pi, num=grid.shape[0])[:, none] phi = np.linspace(0, 2*np.pi, num=grid.shape[1]) nside = 512 print "pixel area: %.2f square degrees" % hp.nside2pixarea(nside, degrees=true) pix = hp.ang2pix(nside, theta, phi) healpix_map = np.zeros(hp.nside2npix(nside), dtype=np.double) healpix_map[pix] = grid but, when try execute code power spectrum. specifically, : cl = hp.anafast(healpix_map[pix], lmax=1024) i error: typeerror: bad number of pixels if point me tutorial or edit code great. more specifications: data in 2d np array , can change numrows/...
Read more

c - Bitwise operation with (signed) enum value -

-
i using enumerator values flags: typedef enum { = 0x00, b = 0x01u, // u has no influence, expected c = 0x02u, // u has no influence, expected ... } enum_name; volatile unsigned char* reg = someaddress; *reg |= b; according misra-c:2004 bitwise operations shall not done signed type. unfortunately, compiler iar use signed int (or short or char) underlying type of enums, , option can find relates size, not signedness ("--enum-is-int"). according iar c/c++ development guide arm , pages 169 , 211, can define type of enum s if enable iar language extensions ( -e command-line option, or project > options > c/c++ compiler > language > allow iar extensions in ide). in particular, should define "sentinel" value, make sure compiler chooses correct type. prefers signed types, , uses smallest possible integer type, sentinel should largest positive integer corresponding unsigned integer type can describe. example, typedef enum ...
Read more

xslt - Unnest parent nodes by child node -

-
in xml there items 0-n attributes , item should copied each attribute new item 1 attribute. given xml this: <?xml version="1.0" encoding="utf-8" ?> <items> <item> <name>a</name> <attributes> <attribute> <key>attribute1</key> <value>1</value> </attribute> </attributes> </item> <item> <name>b</name> </item> <item> <name>c</name> <attributes> <attribute> <key>attribute1</key> <value>5</value> </attribute> <attribute> <key>attribute2</key> <value>2</value> </attribute> <attribute> <key>attri...
Read more