0

我正在尝试使用 Infragistics jquery igTree 控件。我的要求是：当用户将鼠标悬停在任何子节点上时，我需要显示该节点的图像和工具提示。图像显示，但没有工具提示。我试图模拟 http://jsfiddle.net/haFMn/17/中给出的代码

但这对我不起作用。div 正在显示 [在其原始位置]，但不在节​​点级别。任何人都可以帮我解决这个问题。我正在粘贴 TreeView.cshtml 页面供您参考。[要正确查看，需要更改图像路径]

// * ** * ** * ****开始代码** * ** * ** * ** * ** * ** * ** * ** * 

@{
   ViewBag.Title = "TreeView";
  }

  <h2>TreeView</h2>



  <script type="text/javascript">

   $(document).ready(function () {

       var offsetX = 20,
            offsetY = 20;

    $(".desc_hover").live('mouseenter', function (evt) {
        var par = $(this).parent();
        // if text is Tokyo Traders add image after node
        //if ($(this).text() == "Tokyo Traders")
        // if there is alredy added image do not add image again
        if (par.find(">img").length < 2) {
            var html = "<img class='favsport' src='../../Content/images/Football.png' title='Folder' style='border:none;width=20px;height=20px' id='imgdiv'></img>";
            par.append(html);
        }


        var o = {
            left: evt.pageX,
            top: evt.pageY
        };
        $("#test").show().offset(o);

    });
    $(".desc_hover").live('mouseleave', function (evt, ui) {
        var par = $(this).parent();
        par.find($('#imgdiv')).remove();

        $("#test").hide(2000);

    });
    var url = 'http://services.odata.org/OData/OData.svc/Categories?$format=json&$callback=?';
    //creates new JSONP data source for OData
    var jsonp = new $.ig.JSONPDataSource({ dataSource: url, responseDataKey: "d" });
    //Load on demand happens automatically using OData, the loadOnDemand option,
    //and properly configured bindings  ><img class='favsport' src='../../Content/images/folder.png' alt='football' style='display: none;'></img>
    $("#tree1").igTree({
        dataSource: jsonp,
        dataSourceType: 'jsonp',
        responseDataKey: 'd',
        loadOnDemand: true,
        bindings: {
            textKey: 'Name',
            valueKey: 'ID',
            primaryKey: 'ID',
            nodeContentTemplate: "<img class='favsport' src='../../Content/images/folder.png' title='Folder' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
            childDataProperty: 'Products',
            bindings: {
                textKey: 'Name',
                valueKey: 'ID',
                primaryKey: 'ID',
                nodeContentTemplate: "<img class='favsport' src='../../Content/images/folder.png' alt='football' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
                childDataProperty: 'Supplier',
                bindings: {
                    textKey: 'Name',
                    valueKey: 'ID',
                    nodeContentTemplate: "<span  data-tag><img class='favsport' src='../../Content/images/file.png'alt='football' style='border:none;width=20px;height=20px'></img><label class='desc_hover'>${Name}</label></span>"
                }
            }
        }
    });
});




</script>

          <div class="content clearfix">
            <!-- side nav begins here -->

            <div id = "test1" class="side-nav">
                <div id="tree1">
                    <p>Anirban</p>
                    </div>
            </div>

            <!-- side nav ends here -->
            <section class="main-box">
                <hgroup>
                    <h1>
                        Infragistics TreeView Control</h1>
                    <h2>
                        Load on demand </h2>
                    <p>
                        The other grid will go here</p>
                </hgroup>
                <div class="sampleContainer">
                    <!--igTree target element-->
                    <div id="sampleContent">

                    </div>

                </div>
            </section>
             <span id="test" style="display:none;">This is a test</span>
        </div>
4

2 回答 2

3

你检查过在线帮助吗？有工具提示和图像 url 选项。请查看以下链接，其中包含当前所有可用选项 -链接

于 2012-02-14T20:57:15.787 回答
0

将跨度附加到身体并使其位置绝对：

<body>
    <!-- Your other markup -->
    <span id="test" style="position: absolute; display: none;">This is a test</span>
</body>

这应该可以解决跨度未重新定位的问题。

于 2013-02-15T13:33:09.197 回答