自定義IgTree（Infragistics jQuery控件）

我想使用Infragistics jQuery的igTree控件。我的要求是：當用戶懸停在任何子節點上時，我需要顯示該節點的圖像和工具提示。圖像顯示，但不是工具提示。我試圖嘲笑在http://jsfiddle.net/haFMn/17/自定義IgTree（Infragistics jQuery控件）

給出的代碼但它不適用於我。 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>

來源

2012-01-16 Anirban

你檢查了在線幫助？有工具提示和圖片網址的選項。請看一看包含所有在此刻選擇可用下面的鏈接 - link

來源

2012-02-14 20:57:15 NT88

附加跨度的身體，使其定位絕對：

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

這應該解決您與遇到的問題跨度不重新定位。

來源

2013-02-15 13:33:09

自定義IgTree（Infragistics jQuery控件）

回答

相關問題