Одинаковые имена классов.

[lolka84]

Всем привет.

Есть такая штука, как jqueryUI. Требовалось изменить внешность некоторых плагинов под существующий дизайн. Т.к. кое-где нужно было сделать 2-4 варианта одного и того же плагина (причем они должны будут присутствовать на одной странице и стили для них должны лежать в одном файле), то для каждого из них сделал оболочку <div class='myClass'>... plugin ...</div>, соответственно в стилях оно стало выглядеть .myClass .ul-tab { ... }, .myClass1 .ul-tab { ... } и т.д.

Заказчика этот вариант не устраивает по непонятным мне причинам, просит эту оболочку убрать. Как быть тогда, если везде названия классов одинаковые, а свойства у них разные ? Или туплю и их можно заставить работать без конфликта друг с другом ?

Заранее благодарю!

[hedgehog]

Есть возможность просто добавить класс или id к блокам без создания дополнительной обертки?

[lolka84]

Так в том то и дело, что вызов скриптом идет по id - $('#tab').tabs();, соответственно вместо id='tab' написал свои id, в скрипте их тоже поменял, ну и в css к ним и привязался.

Edited July 22, 2012 by lolka84

[USF]

сразу несколько классов попробуй использовать. и стили задавать комбинациям.

[lolka84]

Апну тему, ибо нервов не хватает.

    
<!--	CHKBX	-->

    <script>

		$(function() {

			$( ".ui-buttonset" ).buttonset();

		});

    </script>

    <div class="ui-buttonset">

        <input type="checkbox" id="check1" class="ui-helper-hidden-accessible">

        <label for="check1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">Фильтр</span></label>

        <input type="checkbox" id="check2" class="ui-helper-hidden-accessible">

        <label for="check2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Фильтр</span></label>

    </div>

	<!--	RADIO	-->

    <div class="ui-buttonset">

        <input type="radio" id="radio1" name="radio" class="ui-helper-hidden-accessible">

        <label for="radio1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">Муж</span></label>

        <input type="radio" id="radio2" name="radio" checked="checked" class="ui-helper-hidden-accessible">

        <label for="radio2" class="ui-button ui-widget ui-state-default ui-button-text-only ui-state-active" aria-pressed="true" role="button" aria-disabled="false"><span class="ui-button-text">Жен</span></label>

    </div>

Для того, что бы избежать конфликта стилей добавил в родительский див к каждой конструкции chkbx и radio соответственно. Ну и докучи в css все стало выглядеть, как .chkbx .ui-state-default { }, .radio .ui-state-active { } и т.д.

Один фиг: заказчик грит, "надо убрать все .radio и .chkbx и ниипет".

Элементарно, в обоих конструкциях на активное состояние переключателей JS вешается ui-state-active - т.е. если убрать привязку к родителю, то получится 2 одинаковых класса с разными свойствами, соответственно и работать нечего не будет, это и понятно!

Что делать то, люди ? Все-таки сам недогоняю и все-таки можно реализовать без доп. классов или мне тупо сношают мозг ?

Хелп плиз

[sigma77]

lolka84,

Как вариант использовать http://api.jquery.com/nth-child-selector/ и http://api.jquery.com/addClass/

Но это ересь полная, т.к. если порядок блоков поменяется, то нужные стили, естественно слетят.

Или я не совсем понимаю задачу...

[lolka84]

Спасибо, вроде удалось каким-то чудом убедить человека, что он все-таки не прав.