Настроить IgTree (управление jQuery Infragistics) - PullRequest
Новая
       23

Настроить IgTree (управление jQuery Infragistics)

0 голосов
/ 16 января 2012

Я пытаюсь использовать Infragistics jquery igTree control. Мое требование заключается в следующем: когда пользователь наводит курсор на любой дочерний узел, мне нужно показать изображение и подсказку для этого узла. Изображение показывается, но не подсказка. Я пытался смоделировать код, указанный в 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>

Ответы [ 2 ]

3 голосов
/ 15 февраля 2012

Вы проверили онлайн-справку? Есть варианты для всплывающей подсказки и URL изображения. Пожалуйста, взгляните на следующую ссылку, содержащую все доступные на данный момент опции - ссылка

0 голосов
/ 15 февраля 2013

Прикрепите пролет к корпусу и установите его в абсолютное положение: 

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

Это должно решить проблему, связанную с тем, что у вас с диапазоном нет репозиции.

...