Блог

Главная - Вопросы по программированию - Диалоговое окно вкладок пользовательского интерфейса Jquery предотвращает дефолт

Диалоговое окно вкладок пользовательского интерфейса Jquery предотвращает дефолт

#jquery #jquery-ui #tabs #dialog #anchor

#jquery #jquery-пользовательский интерфейс #вкладки #диалоговое окно #привязка

Вопрос:

Я новичок в jquery и пытаюсь привязать диалоговое окно к вкладке в пользовательском интерфейсе jquery, вкладка имеет привязку, которая будет использоваться в диалоговом окне для создания данных из формы в диалоговом окне. Вкладки и диалоговое окно работают нормально, но, похоже, я не могу заставить e.preventDefault работать правильно. Он всегда переходит и пытается загрузить содержимое привязки в содержимое вкладки.

Цель диалогового окна — добавить новую вкладку, что-то похожее на то, что вы можете увидеть здесь http://freewebmentor.com/demo/addtabs.html

Это то, что у меня есть

 $(function() {
    $("a#add").on('click', function(e) {

        e.preventDefault();

        var $form = $('<form class="dialog-form">' '<p><label>' 'Name' '</label><span><input class="input-text" type="text" name="name" /></span></p>' '</form>');

        $form.dialog({
            width:     235,
            modal:     true,
            draggable: true,
            resizable: false,
            title:     'Create'
        });
    });

    $("#tabs").tabs();
});

и

 <ul>
    <?php foreach($data as $item): ?>
    <li><a href="#tabs-<?php echo $item->id;?>"><?php echo $item->name; ?></a></li>
    <?php endforeach; ?>
    <li><a id="add" href="<?php echo link('cp/create/item/'.$item->id); ?>" title="Add Item"> </a></li>
</ul>

<?php foreach($data as $item): ?>
<div id="tabs-<?php echo $item->id; ?>">
    <input type="hidden" name="item[<?php echo $item->id; ?>][name]" value="<?php echo $item->name; ?>" />
    <textarea name="item[<?php echo $item->id; ?>][content]"><?php echo htmlspecialchars($item->content); ?></textarea>
 </div>
 <?php endforeach; ?>

Я много искал, но ни одно из решений не работает для меня.

Редактировать:

Удается сделать это с помощью этого

 $("#tabs").tabs({
    beforeLoad: function (e, ui) {
        e.preventDefault();
    }
});

У кого-нибудь есть идея получше?

Комментарии:

1. Если у вас есть полный контроль над разметкой (как, кажется, предполагает ваш второй фрагмент кода), зачем вообще беспокоиться о <a> теге? Вы уже используете jQ для создания пользовательского обработчика кликов, поэтому создайте свой элемент с идентификатором add чего-то вроде <span> , и вам даже не придется беспокоиться о предотвращении поведения по умолчанию.

Ответ №1:

ДЕМОНСТРАЦИЯ

Я добавил ссылку, подобную:

 <a href="sdfds" id="add_tab_link">Add Tab (this is a link)</a>

и js-код для открытия модального окна при нажатии на ссылку является:

 $( "#add_tab_link" ).click(function(e) {
        e.preventDefault();
        //alert('clicked');
        dialog.dialog( "open" );
      });

Ответ №2:

Мне удалось найти небольшое решение моей проблемы с помощью этого фрагмента кода. Если у кого-то еще есть идея получше, я хотел бы узнать об этом.

 $("#tabs").tabs({
    beforeLoad: function (e, ui) {
        e.preventDefault();
    }
});