Индекс вкладки для динамически добавляемых элементов - PullRequest
Новая
       17

Индекс вкладки для динамически добавляемых элементов

1 голос
/ 10 марта 2011

У меня есть страница jsp с тремя текстовыми полями и кнопкой ADD рядом с ней.Теперь я должен установить tabindex для динамически добавляемых элементов.Как я могу это сделать?

1 Ответ

2 голосов
/ 03 мая 2011

[Как вы уже поняли, размещение кода позволяет кому-то другому дать более определенный ответ.Без примера для работы я могу только представить, каков ваш код и среда ... из ASP.NET MVC3 + jQuery]

[Я использовал информацию из этого стека overflow post иизменил освещенный бит.]

Я использую jQuery для изменения значения tabindex.У меня есть несколько форм, которые динамически добавляются jQuery.Формы используют div и style = "display: table" для организации текстовых полей в столбцы.

[Соответствующие стили CSS] 

.tb-table
{
    display: table;
}

.tb-row
{
    display: table-row;
}

.tb-cell
{
    display: table-cell;
}

[Часть моего ASP.NET MVC3Бритва cshtml, которая создает html для браузера - должна быть читабельной] 

<div class="tb-table">
    <div id="namerow1" class="tb-row">
        <div class="tb-label tb-cell" id="l_firstname1">
            @Html.LabelFor(model => model.firstname1)
        </div>
        <div class="tb-field tb-cell" id="firstname1">
            @Html.TextBoxFor(model => model.firstname1, new { tabindex = "1" })
            @Html.ValidationMessageFor(model => model.firstname1)
        </div>
        <div class="tb-label tb-cell" id="l_firstname2">
            @Html.LabelFor(model => model.firstname2)
        </div>
        <div class="tb-field tb-cell" id="firstname2">
            @Html.TextBoxFor(model => model.firstname2, new { tabindex = "2" })
            @Html.ValidationMessageFor(model => model.firstname2)
        </div>
    </div>
    <div id="namerow2" class="tb-row">
        <div class="tb-label tb-cell">
            @Html.LabelFor(model => model.lastname1)
        </div>
        <div class="tb-field tb-cell">
            @Html.TextBoxFor(model => model.lastname1, new { tabindex = "1" })
            @Html.ValidationMessageFor(model => model.lastname1)
        </div>
        <div class="tb-label tb-cell">
            @Html.LabelFor(model => model.lastname2)
        </div>
        <div class="tb-field tb-cell">
            @Html.TextBoxFor(model => model.lastname2, new { tabindex = "2" })
            @Html.ValidationMessageFor(model => model.lastname2)
        </div>
    </div>
</div>

Я использую tabindex для всех значений в столбце;не просто уникальный заказ.Для браузеров, в которых я тестировал, когда есть несколько текстовых полей с одним и тем же tabindex, текстовое поле, встречающееся первым в html-коде, будет сначала выбрано с помощью tab-navigation.

Поэтому для каждой формы, которая у меня естьЯ использую значение табуляции от 0 до 9, чтобы сгруппировать их.Как только у меня будет порядок табуляции для отдельной формы, работающей так, как я хочу, я использую следующий jQuery, чтобы УВЕЛИЧИТЬ значение tabindex на 10 (или 20, или 30, или 40) для каждой формы, которую я динамически добавляю.первое десятичное число, 0-9, организует вкладки в этой форме, а при увеличении коэффициента 10 последующие вкладки формы сохраняются. 

$('.createtab-form [tabindex]').each(function () {$(this).attr('tabindex', parseInt($(this).attr('tabindex'))+10)})

Это моя первая попытка сделать это самостоятельно - я 'Я уверен, что у кого-то еще будет лучший метод.Дайте мне знать, что вы думаете.

...