jquery-ui 대화 제목 내에서 드롭 다운 표시 문제

Question

jQuery UI 라이브러리의 Dialog 구성 요소를 사용하고 있습니다. 제목 표시 줄에 간단한 드롭 다운 (<select>)을 표시하고 싶습니다. 이 구성 요소는 HTML을 제목 표시 줄에 배치 할 수 있지만 문제가 있습니다. Opera에서 마우스를 움직이면 드롭 다운이 많이 깜박이고 다른 브라우저 (Chrome, IE9)에서는 드롭 다운을 열 수 없습니다.

이벤트 처리기를 생각하고 버블 링을 취소 할 수있는 많은 이벤트에 이벤트 처리기를 추가하려고했습니다. 보다 구체적으로, 나는 onclick, onmousedown, onmouseup, onmouseover, onmouseout, onmouseenter, onmouseleave와 같은 이벤트를 비활성화했습니다. 이것은 Chrome/IE9에서 더 나아졌지만 Opera는 여전히 많이 깜박이며, 그래서 뭔가 잘못되었다고 생각합니다. 또한, 어떻게 든 ... 잘못된 것 같습니다.

드롭 다운을 올바르게 수행하는 방법에 대한 아이디어가 있으십니까?

Answer 1

http://jsfiddle.net/a9ntp/13/

내가 지금 몇 분 동안 덤비는되었고, 나는 당신을위한 해결책이있을 수 있습니다 생각합니다. 내가 바이올린을 처음 사용했을 때 작동하지 않는다면 알려주세요. 내가 알 수있는 한, dialgo 팝업의 제목 표시 줄이 드래그 가능하기 때문에 문제가 발생합니다.

var popup = $('<div>Hello world!</div>'); 

$(popup).dialog({title: 'Text <select id="dropDown"><option>A</option><option>B</option><option>C</option><option>D</option></select>', draggable: false}); 

$('#dropDown').hover(
    function(){ 
     $(popup).dialog('option', 'draggable', true); 
    }, 
    function(){ 
     $(popup).dialog('option', 'draggable', false); 
    } 
); 

드롭 다운 목록에서 마우스를 움직이면 끌기가 비활성화되어 개체를 선택할 수 있습니다. 드롭 다운 목록을 떠날 때 드래그 기능을 다시 초기화해야합니다. 도움이되었거나 적어도 당신에게 일할 수있는 아이디어를주는 희망!

Answer 2

거의 2 년이 늦었지만 동일한 문제가있어서 간단한 솔루션으로 끝내기를 원했습니다.

jQuery UI 대화 상자는 드래그 할 때 기본적으로 .ui-dialog-content (대화 상자의 내용) 및 .ui-dialog-titlebar-close (제목 요소의 오른쪽 상단 닫기 버튼)를 무시합니다. 이는 다음 코드로 수행됩니다.

이것은 title 요소에 추가 된 것과 동일한 동작입니다. 나는 다음과 같은 코드를 사용하여 "목록을 취소"드래그 내 드롭 다운을 추가 할 수 있었다 : 나는이 취소 변경하기로 결정했습니다 왜 공개 방법, 내 드롭 다운을 추가 해요

$(dialog).appendTo('body').showDialog({ 
      ... 
      dialogClass: 'dialog-quick-select', 
      open: function(event, ui) { 
       var dropdownHtml = '<select id="market-set-dropdown"></select>'; 
       var $currentDialog = $('.dialog-quick-select'); 

       $('.ui-dialog-titlebar', $currentDialog).append(dropdownHtml); 

       //this is needed to allow the dropdown to be opened. 
       $currentDialog.draggable({ 
        cancel: '.ui-dialog-content, .ui-dialog-titlebar-close, #market-set-dropdown' 
       }); 
      } 
     }); 

. 또한 내 코드는 dialogClass 옵션으로 설정된 대화 상자에 할당 된 사용자 정의 클래스 이름에 의존합니다.

대화 상자에서 미리 정의 된 클래스 이름 (.ui-dialog-content 및 .ui-dialog-titlebar-close)이 더 이상 변경되지 않으면 해당 요소에서 취소가 더 이상 작동하지 않습니다. jQuery를 UI 대화에 대한

API : http://api.jqueryui.com/dialog/