如何在xml的输出中分配到分支的链接,以便一旦我在html的输出中单击它就可以打开它

迈克·尤恩斯(Mike Younes)

此代码将xml文件转换为html可扩展树:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $.ajax({
        url: "stations10.xml",
        success: function(tree) {
          traverse($('#treeView li'), tree.firstChild)
            // this – is an &mdash;
          $('#treeView li:has(li)').addClass("Max").click(function(e) {
            $(this).toggleClass("Max Min");
            $(this).children().toggle();
            e.stopPropagation();
          })
          $('#treeView li').click(function(g) {

            var mytree2 = $(this);
            mytree2.children('li').toggle();

            g.stopPropagation();
          })

          $('<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.addClass(tree.nodeName).append(tree)
      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>')
      }
    }
  </script>
    <style type="text/css">
    #treeView li {
      list-style: none;
    }

    #treeView ul {
      padding-left: 1em;
    }

    #treeView b {
      padding-right: 1em;
    }

    .Min {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
      padding-left: 15px;
    }

    .Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat;
      padding-left: 15px;
    }

    li {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat;
      padding-left: 15px;
    }

    .MainStation.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/station_zpswxz6gpqe.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .Substation.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .Control.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .PushButton.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .ElectricStation.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
  </style>
    <title>treeView</title>
  </head>

  <body>
    <ul id="treeView">
      <li></li>
    </ul>
  </body>

</html>

这是XML文件:

<?xml version="1.0" encoding="UTF-8"?>
<MAIN xmlns:xlink="http://www.w3.org/1999/xlink"> MAIN
<MainStation 
        xlink:type="extended" 
        xlink:href="http://google.com"
        xlink:show="new"> Mainstation1
    <Substation> Substation1
        <Control>Control1</Control>
        <Control>Control2<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation2
        <Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <Control>Control2</Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation3
        <Control>Control1</Control>
        <Control>Control2</Control>
        <Control>Control3</Control>
        <Control>Control4</Control>
    </Substation>
    <Substation> Substation4
        <PushButton>PushButton1</PushButton>
        <PushButton>PushButton2</PushButton>
    </Substation>
</MainStation>  
<MainStation> Mainstation2
    <Substation> Substation1
        <Control>Control1</Control>
        <Control>Control2</Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation2
        <Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <Control>Control2</Control>
        <PushButton>PushButton1<MiniPushButton>MiniPushButton1</MiniPushButton><MiniPushButton>MiniPushButton2</MiniPushButton></PushButton>
    </Substation>
</MainStation>  
<ElectricStation> ElectricStation1
    <Substation> Substation1
        <Control>Control1</Control>
        <Control>Control2</Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation2
        <Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <Control>Control2</Control>
        <PushButton>PushButton1<MiniPushButton>MiniPushButton1</MiniPushButton><MiniPushButton>MiniPushButton2</MiniPushButton></PushButton>
    </Substation>
</ElectricStation>  
</MAIN>

如您所见,我尝试将主站节点链接到Google,这样当我在输出中单击它时,它将打开Goog​​le。但是,它不起作用。

高手

您可能需要更改脚本以进行扩展。

这是您可以做到的一种方法。我添加了一个span标签,这是为了显示图像。我添加了单击处理程序以折叠并扩展到此。因此,您必须精确地单击图像以展开或折叠列表。第二个处理程序用于带有href属性的标签。单击具有href属性的列表时,它将重定向到链接位置。

注意:我已经将XML中的xlink:href属性更改为href。

[编辑]

完整的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.ajax({
                    url: "stations10.xml",
                    success: function(tree) {
                        traverse($('#treeView li'), tree.firstChild)
                        $('<span><\/span>').addClass("Max").prependTo('#treeView li:has(li)')
                        $('.Max,.Min').click(function (e) {
                            $(this).toggleClass("Max Min")
                            $(this).siblings().next().toggle()
                        });
                        $("[href]").click(function(){
                            window.location.href = $(this).attr("href")
                        });
                    }
                })
            });

            function traverse(node, tree) {
                var children = $(tree).children()
                node.addClass(tree.nodeName).append(tree)
                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>')
                }
            }
        </script>
        <style type="text/css">
        #treeView li {
            list-style: none;
        }

        #treeView ul {
        padding-left: 1em;
        }

        #treeView b {
            padding-right: 1em;
        }

        .Min {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
            padding-left: 30px;
        }

        .Max {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat;
            padding-left: 30px;
        }

        li {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat;
            padding-left: 30px;
        }

        .MainStation.Max {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/station_zpswxz6gpqe.jpg") no-repeat;
            background-size: 15px 15px;
            cursor: pointer;
            padding-left: 30px;
        }
        .Substation.Max {
          background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        .Control.Max {
          background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        .PushButton.Max {
          background:     URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        .ElectricStation.Max {
          background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        </style>
        <title>treeView</title>
    </head>
    <body>
        <ul id="treeView">
          <li></li>
        </ul>
    </body>
    </html>

XML代码的变化

<MainStation 
        xlink:type="extended" 
        href="http://google.com"
        xlink:show="new"> Mainstation1
        ....

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

一旦选择了<option>标记的值,就可以抓取页面的HTML内容

我希望角色只要按住按钮就可以做某事,一旦放开按钮,就可以恢复正常

编写Web组件时如何处理“一旦不再连接元素就可以调用connectedCallback”

一旦安装了Ubuntu风格(例如lubuntu),就可以更改桌面环境吗?

该线程一旦结束就可以运行,该怎么办?

WPF Datagrid,一旦创建就可以选择还是关注行?

反应登录,一旦授权就可以移动到新视图

我正在尝试在 java 中读取文件,如果我刚刚创建了文件,它就可以工作,但过了一段时间它就无法工作了

一旦用户单击它,我如何确认此代码块是否可以验证电子邮件?

在 python 中制作语音助手并给它一个 while 循环,这样我就可以给它另一个命令,但是当它无法识别我的话时它就结束了

总是Verilog RTL文件中的模块不起作用,但是一旦包含在测试台中就可以工作

从/ etc / fstab挂载Windows共享失败,但是一旦系统启动,挂载-a就可以了

一旦安装了v4,就可以模仿PowerShell v3吗?

一旦用户单击它,如何在制表器中使单元格为空?

我如何在constraintlayout创建一个容器,这样我就可以设置背景?

一旦单击它或在android中重置项目颜色,如何捕捉箭头事件?

如何锁定输出单元格的结果,一旦它符合条件,从 Google 表格中输入单元格的后续值更改中锁定?

我有一个共同例程,一旦选定就可以播放。但是,如果我再次选择它,则不会发生任何事情。但是第一次确实有效

如何自动安装辅助的内部HDD,以便从启动就可以使用它的符号链接?

我如何通过/复制相同的选择?这样我就可以通过单击在同一选择上运行多个宏。

只需单击一下按钮,就可以将我的 db on rails 中的内容减一

一旦另一个窗口打开,标准输出就会停止在 QTextEdit 中显示

一旦单击,如何在javascript函数中获取onclick按钮的标题?

在mongoose .d.ts中分配自定义方法,这样我就可以在打字稿中的任何地方使用它们

在Excel VBA中命名对象,以便将其复制到另一个工作表/工作簿后就可以选择它

我怎样才能让我的应用程序获得的WebView点击一个链接的URL,就可以进行操作,然后加载它?

一旦将私有远程存储库克隆到本地计算机,就可以防止对其进行未经授权的使用

Fabric:处理异常,这样我就可以在try块中捕获它

如何制作它,以便仅通过在控制台中键入其名称就可以运行特定程序?