Гиперссылки в Дереве Додзё - PullRequest
Новая
       39

Гиперссылки в Дереве Додзё

2 голосов
/ 22 июля 2011

В кампусе додзё есть пример дерева с гиперссылками. Они не кликабельны. У кого-нибудь есть реализация dojo с кликабельными ссылками? Удалось ли вам определить, какой узел / ссылка была нажата? Я ищу пример кода, который делает это.

Вот пример кода из кампуса додзё. Как сделать эти ссылки кликабельными и как реализовать выбор узлов по щелчку изображения?

Спасибо. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">

    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require("dojo.data.ItemFileReadStore");
            dojo.require("dijit.Tree");
            var rawdata = [{
                label: 'Something <b>important</b>',
                id: '1',
                children: [{
                    label: 'Life',
                    id: '1.1'
                },
                {
                    label: 'Liberty',
                    id: '1.2'
                }]
            },
            {
                label: 'Some links (note: the link is <b>not</b> clickable)',
                id: '2',
                children: [{
                    id: '2.1',
                    label: '<a href="http://dojotoolkit.org">Dojo Toolkit</a>'
                },
                {
                    id: '2.2',
                    label: '<img src="http://dojofoundation.org/media/img/dojo.logo.png" alt="greatest ever" height="32px" />'
                },
                {
                    id: '2.3',
                    label: '<a href="http://blog.nqzero.com">my blog</a>'
                }]
            }];
            function prepare() {
                var store = new dojo.data.ItemFileReadStore({
                    data: {
                        identifier: 'id',
                        label: 'label',
                        items: rawdata
                    }
                });
                var treeModel = new dijit.tree.ForestStoreModel({
                    store: store
                });
                var treeControl = new dijit.Tree({
                    model: treeModel,
                    showRoot: false,
                    _createTreeNode: function(
                    /*Object*/
                    args) {
                        var tnode = new dijit._TreeNode(args);
                        tnode.labelNode.innerHTML = args.label;
                        return tnode;
                    }
                },
                "treeOne");
            }
            dojo.addOnLoad(prepare);
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
        />
    </head>

    <body class=" claro ">
        <div id="treeOne">
        </div>
        <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>

</html>

1 Ответ

0 голосов
/ 27 июля 2011

Вы можете подключиться к событию onClick в Дереве. При создании дерева добавьте в конструктор дополнительный параметр onClick, указывающий на функцию со следующей подписью: 

function myOnClickHandler(item, tree, evt){
    //item is the node's DataStore item
    //I forgot if tree is the whole tree or just the currtent node
    //evt is the usual event object, with things like mouse position, etc...

    console.log('clicked a tree');
}

var treeControl = new dijit.Tree({
    model: treeModel,
    showRoot: false,
    _createTreeNode: function( /*Object*/ args) {
        var tnode = new dijit._TreeNode(args);
        tnode.labelNode.innerHTML = args.label;
        return tnode;
    },
    onClick: myOnclickHandler // THIS LINE //
},
"treeOne");
...