Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   не могу создать widjet (https://javascript.ru/forum/jquery/43893-ne-mogu-sozdat-widjet.html)

urivskay 25.12.2013 17:02

не могу создать widjet
 
используя jquery ui пытаюсь создать виджет. Вот мой код:
$.widget("interior.explorerCategory", $.ui.mouse, {

     lastListWithSelected: "",
     currentSelected: 0,

    _init: function () {
        alert("111");
        $(".link_hideShow").click(hideShow);
    },

    _create: function () {
        alert("222");
        $(".link_hideShow").click(hideShow);
    },

    destroy: function () {
        $.Widget.prototype.destroy.call(this);
    },

    hideShow: function () {
        if ($("#table_categories").is(':visible')) {
            $("#table_categories").hide();
            $("#link_hideShow").html("Показать");
        }
        else {
            $("#table_categories").show();
            $("#link_hideShow").html("Скрыть");
        }
    }
});


этот код у меня расположен в отдельном файле .js
В html файле я хочу чтобы мой виджет создался и выполнил функции _create и _init
Вызываю его следующим образом:
<script type="text/javascript">
    $.interior.explorerCategory();
</script>


но widjet не создается, так как ни один из методов не вызвался.
Причем я и метод hideShow не могу вызвать, происходит ошибка, что этого метода нет.
Подскажите пожалуйста в чём ошибка ? Как мне мой виджет вызвать? :help:

рони 25.12.2013 17:49

urivskay,
1 где искать hideShow?
2 две hideShow на одном элементе произведут нулевой результат - первая скроет вторая покажет - элемент никогда не станет невидимым
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>



</head>
<body>

<div class="link_hideShow" id="link_hideShow" >link_hideShow кликать тут</div>

<div id="table_categories">table_categories</div>

<div id="test">test</div>


<script>
$(function () {

     $.widget("interior.explorerCategory", $.ui.mouse, {
         options: {
             resizable: false,
             isCollapsed: false
         },
         lastListWithSelected: "",
         currentSelected: 0,

         _init: function () {
             alert("111");
             $(".link_hideShow").click(this.hideShow);
         },

         _create: function () {
             alert("222");
             // $(".link_hideShow").click(this.hideShow);
         },

         destroy: function () {
             $.widget.prototype.destroy.call(this);
         },

         hideShow: function () {
             if ($("#table_categories").is(':visible')) {
                 $("#table_categories").hide();
                 $("#link_hideShow").html("Показать");
             } else {
                 $("#table_categories").show();
                 $("#link_hideShow").html("Скрыть");
             }
         }
     });

     $.interior.explorerCategory();

 })
</script>
</body>
</html>

urivskay 25.12.2013 18:05

спасибо большое!!!


Часовой пояс GMT +3, время: 11:00.