Использование вкладок jQuery UI и меню выбора jQuery UI

У меня есть две вкладки, и внутри каждой из них я хочу иметь несколько форм. Я добавляю selectmenu, а также из пользовательского интерфейса jQuery внутри каждой вкладки. Проблема в том, что меню выбора на второй вкладке не отображается. Я считаю, что это как-то связано с тем, как загружаются вкладки, но я не совсем уверен, как это решить.

Вот html-код и скрипт http://jsfiddle.net/us8xbyyo/

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI tabs</title>
<link rel="stylesheet" href="./jQuery/jquery-ui.css">
<script src="./jQuery/external/jquery/jquery.js"></script>
<script src="./jQuery/jquery-ui.js"></script>
<script>
$(function() {
    $( "#tabs" ).tabs();
    $( ".mySelect" ).selectmenu();
});
</script>
</head>
<body>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Company</a></li>
        <li><a href="#tabs-2">Depto</a></li>
    </ul>
    <div id="tabs-2">
        <label for="company">Company </label>
        <select class="mySelect" id ="company">
            <option value="-1">Chose a company</option>
            <option value="1">Company 1</option>
            <option value="2">Company 2</option>
            <option value="3">Company 3</option>
        </select>   
    </div>
    <div id="tabs-1">
        <label for="depto">Depto</label>
        <select class="mySelect" id="depto" name="depto">
            <option value="-1">Chose a dpto</option>
            <option value="1">Dpto 1 </option>
            <option value="2">Dpto 2</option>
            <option value="3">Dpto 3</option>
        </select>   
    </div>
</div>
</body>
</html>

Большое спасибо


jquery jquery-ui jquery-ui-tabs jquery-ui-selectmenu
person Annatar    schedule 26.01.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Кажется, вы могли бы решить эту проблему, проверив, где находится ваше имя идентификатора для каждого раскрывающегося div.

Ваш первый div имеет id="tabs-2", где он должен быть id="tabs-1". Ваш второй div имеет id="tabs-1", где он должен быть id="tabs-2".

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

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

<body>
<div id="tabs">
<ul>
    <li><a href="#tabs-1">Company</a></li>
    <li><a href="#tabs-2">Depto</a></li>
</ul>
<div id="tabs-1">
    <label for="company">Company </label>
    <select id="company">
        <option value="-1">Chose a company</option>
        <option value="1">Company 1</option>
        <option value="2">Company 2</option>
        <option value="3">Company 3</option>
    </select>   
</div>
<div id="tabs-2">
    <label for="depto">Depto</label>
    <select id="depto">
        <option value="-1">Chose a depto</option>
        <option value="1">Dpto 1 </option>
        <option value="2">Dpto 2</option>
        <option value="3">Dpto 3</option>
    </select>   
</div>


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

This code seems to work.

person dcook    schedule 26.01.2015
comment
Спасибо за ответ. Я знаю, что порядок в ‹li› переключается, но проблема не в этом, пример выше — это просто пример более сложного кода. Вы только что удалили меню выбора, которое позволяло отображать выбор, хотя это работает для отображения выбора, они не отображаются с использованием пользовательского интерфейса jQuery. - person Annatar; 27.01.2015
comment
Я считаю, что вам может понадобиться загрузить jquery API. Простой вызов .selectmenu ничего не отобразит. Вам нужно будет передать некоторые параметры и свойства для этой функции, чтобы она делала что-то значимое. Надеюсь, эта информация направит вас на верный путь. api.jqueryui.com/selectmenu Помните, .selectmenu({ }); ничего не делает сам. - person dcook; 28.01.2015

arrow_upward
0
arrow_downward

Поэтому я последовал совету @dcook, изучил документацию и решил инициализировать selectmenu() с определенной шириной. Используя инструменты Chrome, я смог убедиться, что selectmenu() на второй вкладке был применен, но ширина была установлена ​​​​на 0, что странно, поскольку ширина должна автоматически устанавливаться в зависимости от длины самой большой строки внутри выбора.

Ваше здоровье.

person Annatar    schedule 28.01.2015