Возникли проблемы с пользовательским интерфейсом Jquery 1.8.1 Dialog.js - PullRequest
0 голосов
/ 10 мая 2010

Я давно использую jquery ui. Впервые я использую 1.8, хотя я не уверен, почему, но мне кажется, что этот плагин сделал шаги назад.

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

Сначала документация устарела.

1008 * Зависимость *

* UI Core
* UI Draggable (Optional)
* UI Resizable (Optional)

После 20 минут попыток и получения ошибки после ошибки (например, диалог не является функцией), я понял, что вам нужен какой-то другой файл javascript с именем "widget.js"

Так что теперь у меня есть

Jquery 1.4.2.js 
 UI Core.js UI
 Widget.js 
 UI Dialog.js

все на моей странице.

Затем я сделал что-то подобное

  $('#Delete').click(function ()
    {
        var dialogId = "DeleteDialogBox";
        var createdDialog = MakeDialogBox(dialogId, "Delete Conformation");

        $('#tabConent').after(createdDialog);
        dialogId = String.format('#{0}', dialogId);

        $(dialogId).dialog({
            resizable: true,
            height: 500,
            width: 500,
            modal: true,
            buttons: {
                'Delete all items': function() {
                    $(this).dialog('close');
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        });
    });

      function MakeDialogBox(id, title)
    {
        var dialog = String.format('<div id="{0}" title="{1}"></div>', id, title);
        return dialog;
    }

Теперь, что это должно сделать, это сделать то, куда должно пойти диалоговое окно. После этого он должен поставить его сразу после моих вкладок.

Так что при просмотре с firebug он делает это. Однако однажды метод .dialog () переместит + весь материал, который он генерирует, и поместит его после моего нижнего колонтитула.

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

Так чего мне не хватает? Center.js (я не знаю, существует ли он, но похоже, что сейчас вам нужно 100 javascript-файлов, чтобы это работало правильно).

Ответы [ 2 ]

1 голос
/ 11 мая 2010

Я думаю, что проблема здесь отсутствует CSS. Тем не менее, вы можете сделать все это проще :) Все эти файлы сценариев объединяются и минимизируются при выпуске, например вот полная версия и вот минимизированная (версия 1.8 .1 на момент ответа). Таким образом, вы включаете 1 файл сценария, а не заботитесь о том, какие сценарии пользовательского интерфейса в каком порядке.

В целом, вы можете значительно упростить жизнь, загрузив пользовательский интерфейс jQuery с помощью предоставляемых ими механизмов, взгляните на страницу загрузки пользовательского интерфейса jQuery . Вы можете настроить все, что захотите, и загрузить zip-архив. Все, что вам нужно включить, - это 3 файла: jQuery , jQuery UI и jQuery UI CSS (который указывает на изображения, которые ему нужны). В качестве альтернативы вы можете использовать CDN для всех 3, например:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" type="text/css" />

Если вам удобна одна из встроенных тем, вы можете использовать CDN для всего, что указано выше, просто замените base на имя темы, , полный список вы можете найти здесь ( просто измените 1.7.2 на текущую версию в URL)

1 голос
/ 10 мая 2010

Попробуйте построить диалог "на лету".

$('<div>test</div>').dialog({/* your options here */});

Также получите несжатые версии исходных текстов jQ-UI и посмотрите на dialog.js - все зависимости написаны прямо в заголовке комментария.

...