сделать диалог скрытым - PullRequest
       7

сделать диалог скрытым

1 голос
/ 11 февраля 2010

All

Как диалоговое окно скрыто и вызывается при наведении мыши и на событии onmouseout (например, как элементы управления медиаплеера)

ссылка

<div class="bar" style="padding:0px;" id="bar"></div>
<script>
bar = $(".bar", "#view").dialog({ 
             height: 30, 
             width: '100%',
             textAlign : "justify",  
             marginLeft : "auto",
             marginRight:"auto"
     })
</script>

спасибо ........

Ответы [ 5 ]

1 голос
/ 11 февраля 2010

Выясните, на что вы хотите навести курсор мыши, и используйте указатель мыши:

  $('#myselect').hover(
        function()
        {
            $(".bar", "#view").dialog("open");
        },
        function()
        {
            $(".bar", "#view").dialog("close");

        }
    );

РЕДАКТИРОВАТЬ: Я снова посмотрел на ваш вопрос, и делаю ОГРОМНОЕ предположение, что вы ранее не использовали диалог, так что вотдополнительная информация:

Предположим, у вас есть элемент, для которого вы хотите создать диалоговое окно:

<div id="view">
    <div class="bar ui-dialog" style="padding:0px;" id="bar"></div>
</div>

Предположим, у вас есть еще один элемент, на который вы хотите навести указатель мыши, чтобы показать / скрыть этот диалог:

<div id="myselect"></div> 

ваш сценарий диалога должен быть только:

  $(document).ready(function()
    {
     $(".bar", "#view").dialog({
            autoOpen: false,
            height: 30,  
            width: '100%', 
            textAlign : "justify",   
            marginLeft : "auto", 
            marginRight:"auto" 
      });
  });

Обратите внимание на добавленный autoOpen: false;, который изначально закрывает его.

1 голос
/ 11 февраля 2010

добавить:

autoOpen: false,

При наведении курсора:

$(".bar", "#view").dialog('open')

При наведении мышки:

$(".bar", "#view").dialog( 'close' )

http://jqueryui.com/demos/dialog/#method-close

0 голосов
/ 11 февраля 2010

Если вы хотите, чтобы он находился рядом с мышью, сделайте диалог position:absolute и display:none. Затем вы добавляете указатель мыши к любому элементу

, например

$('#theElement').mouseover(e){function(){
  $("#dialog").css({"top":e.pageY,"left":e.pageX,"display":"block"});
});

e.pageY и e.pageX определяют положение мыши. Затем вы можете поиграть с этим, добавив, например, 10, чтобы немного сместить его.

Как и приведенный выше css, вам нужно сделать элемент видимым. Затем вы добавляете событие мышки, в котором вы просто делаете свой диалог невидимым.

Я предпочитаю нам событие hover , которое имеет 2 вызова функций, один для наведения мыши и один для наведения мыши.

0 голосов
/ 11 февраля 2010

Ну, я думаю, что если диалог скрыт, вы не можете "навести его" и отобразить его.
Но для «ручного» открытия и закрытия диалога используйте методы open и close.

0 голосов
/ 11 февраля 2010

Эмм добавить отображение: нет, для стиля attrbute.

...