Как отобразить диалоговое окно, когда пользователь нажимает на <img>? - PullRequest
Новая
       6

Как отобразить диалоговое окно, когда пользователь нажимает на <img>?

0 голосов
/ 27 января 2011

Вот что я сделал до сих пор: 

// somewhere in the page code...
<img alt="" src="images/frame.png" onclick="uploadImage()" />

Я создал скрипт jQuery: 

// in the head section of the page...
<script type="text/javascript">
    $('#uploadContactImage').dialog({
        title: 'Change contact image',
        buttons: {
            "Upload new image": function() {
                $(this).dialog("close");
            },
            "Remove current image": function() {
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
</script>

Наконец, у меня есть файл javascript с пустой функцией: 

function uploadImage() {
}

Вариант использования должен быть следующим: пользователь нажимает на изображение, появляется диалоговое окно. На основании кнопки, которую пользователь нажал, должны быть вызваны определенные функции.

Обратите внимание, что мой тег изображения генерируется с помощью AJAX, то есть скрипт jQuery не подключен к нему. Это первая проблема.

Вторая проблема заключается в том, что я не знаю, как вызвать скрипт jQuery для фактического отображения диалога.

Третья и последняя проблема заключается в том, что я не знаю, как справиться с выбором, который делает пользователь.

Как вы уже пришли к выводу, я полностью новичок, когда дело доходит до jQuery. Можете ли вы помочь мне начать? Благодарю.

Ответы [ 2 ]

2 голосов
/ 27 января 2011

Борис,

Это довольно просто сделать.Во-первых, я бы не использовал событие onClick, поскольку в jQuery есть гораздо лучшие способы управления этим.Вместо этого он должен выглядеть следующим образом:

HTML: 

<img alt="" src="images/frame.png" id="imageUpload" />

jQuery: 

$('img#imageUpload').dialog({
    title: 'Change contact image',
    buttons: {
        "Upload new image": function() {
            $(this).dialog("close");
        },
        "Remove current image": function() {
            $(this).dialog("close");
        },
        "Cancel": function() {
            $(this).dialog("close");
        }
    }
});
0 голосов
/ 27 января 2011

Сначала вам понадобится некоторый крюк или путь для выбора элемента изображения.Во-вторых, поскольку он добавляется на страницу после загрузки документа, вам необходимо прикрепить прослушиватель событий после ответа.

  • выберите элемент

Так что если у вас естьуправление html, возвращаемым через ajax, добавьте к нему идентификатор и тривиально выберите его с помощью jquery: 

<img alt="" src="images/frame.png" onclick="uploadImage()" id="pickME" />

...and someplace in the ajax callback...
$("#pickME").click(...

Если вы не можете добавить идентификатор, вам придется перейти к нему, начав с переносаэлемент и ищет потомка img.

  • прикрепить событие

вы не можете прикрепить событие click, когда документ «готов», потому что ajax не имеетвставил его в документ еще.Таким образом, здесь нужно добавить обработчик событий после , чтобы img был вставлен в документ.Так что вам нужно поймать это событие, чтобы вы знали, когда пора добавить ваше событие клика. 

ajax(... 
    success: function(data){
             ...stuff data into document...
             $("#pickME").click(function(){
                 ...attach the dialog to the element...

вы можете быть вне вашей глубины; -)

...