jQuery и селекторы форм - PullRequest
Новая
       24

jQuery и селекторы форм

1 голос
/ 01 ноября 2010

Я пытаюсь выучить jQuery. Я смотрю обучающее видео Линды, в котором есть следующий код 

$("document").ready(function() {
        $("form :checked").css("border", "3px solid red");
    });

Приведенный выше код корректно работает на ie и opera, но не работает на firefox и webkit (chrome, safari).

Версия jquery 1.3.2. В чем проблема выше? Как я могу достичь кросс-браузерной совместимости с селекторами форм?

Редактировать: HTML-код следующий 

 <h1>
        Example Form Document</h1>
<form action="" method="post">

<table class="style1">
<tbody>
    <tr>
        <td class="style2">
            First Name</td>
        <td>
            <input id="FirstName" type="text" /></td>
    </tr>
    <tr>
        <td class="style2">
            Last Name</td>
        <td>
            <input id="LastName" type="text" /></td>
    </tr>
    <tr>
        <td class="style2">
            Disabled Element</td>
        <td>
            <input id="Text1" type="text" disabled="disabled"/></td>
    </tr>
    <tr>
        <td class="style2">
            Gender</td>
        <td>
            <input id="Male" type="radio" checked="checked"/>M<input id="Female" type="radio" />F</td>
    </tr>
    <tr>
        <td class="style2">
            What products are you interested in?</td>
        <td>
            <input id="Checkbox1" type="checkbox" checked="checked"/><label for="Checkbox1">Widgets</label><br />
            <input id="Checkbox2" type="checkbox" /><label for="Checkbox1">Hibbity Jibbities</label><br />
            <input id="Checkbox3" type="checkbox" checked="checked"/><label for="Checkbox1">SplashBangers</label><br />
            <input id="Checkbox4" type="checkbox" /><label for="Checkbox1">Whatzits</label></td>
    </tr>
    <tr>
        <td class="style2">
            Comments:</td>
        <td>
            <textarea id="Comments" cols="40" name="S1" rows="5"></textarea></td>
    </tr>
    <tr>
        <td class="style2">
            Optional life story file</td>
        <td>
            <input id="File1" type="file" /></td>
    </tr>
    <tr>
        <td class="style2">&nbsp;
            </td>
        <td>&nbsp;
            </td>
    </tr>
    <tr>
        <td class="style2">&nbsp;
            </td>
        <td>
            <input id="Submit1" type="submit" value="submit" /> <input id="Reset1" 
                type="reset" value="reset" /></td>
    </tr>
</tbody></table>

</form>

Ответы [ 2 ]

2 голосов
/ 01 ноября 2010

Другие браузеры не позволяют стилизовать границы флажков ...

Логика верна, просто не применяются стили в Firefox / Webkit.

http://jsfiddle.net/vVN6x/

Обратите внимание, что в примере работают поля, но не границы (если вы не в IE)

1 голос
/ 01 ноября 2010

Стандартный способ сделать этот кросс-браузер - подделать его. Создайте спрайт изображения, который содержит все ваши пользовательские входные данные (для вашего примера, это будут два квадрата - один со сплошной черной рамкой в ​​1 пиксель и один со сплошной красной рамкой в ​​3 пикселя). Затем напишите фрагмент кода JavaScript, который проходит через DOM после загрузки, скрывая все входные данные и заменяя их стилизованными интервалами. Стилизованные промежутки покажут правильный спрайт изображения. Затем присоедините четные обработчики к каждому из этих диапазонов, чтобы щелкнув по ним, изменилось состояние скрытых скрытых входов (а также изменилось имя класса диапазона, чтобы отобразить другой спрайт, связанный с его новым состоянием).

Подробное описание и примеры кода см. Здесь: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

И кто-то написал jQuery-совместимую библиотеку, чтобы облегчить это: http://customformelements.net/features.php

...