Стилизация jQuery UI Datepicker по-разному для каждой страницы - PullRequest
Новая
       15

Стилизация jQuery UI Datepicker по-разному для каждой страницы

0 голосов
/ 20 февраля 2010

Я использую на своем сайте jQuery UI datepicker и хочу, чтобы его стиль немного отличался в зависимости от страницы, на которой он находится. Однако у меня есть небольшая проблема, поскольку div, содержащий календарь, не вложен в элемент, к которому применяется функция .datepicker (). Поэтому я не могу оформить его по-разному для каждой страницы. Например. 

<body>
<div id="wrapper">...</div>
<div id="datepicker">...</div>
</body>

Я знаю, что одним из решений является идентификация тела в зависимости от страницы, но я на самом деле не хочу этого делать, поскольку я использую CMS и в настоящее время он добавляет классы в div-упаковщик, чтобы определить, какая страница. Однако, так как div datepicker появляется за пределами оболочки, я не могу соответствующим образом оформить.

Можно ли настроить DatePicker для создания календарного div внутри определенного div или мне нужно будет идентифицировать тело?

Спасибо

Ответы [ 2 ]

1 голос
/ 21 февраля 2010

Если я правильно понял, и это был долгий день, у вас есть довольно простой доступный вариант, но он требует немного дополнительной наценки. Дайте body и i d (разные идентификаторы для каждой страницы): 

body#pageOne #datepicker {/* css for pageOne */}

body#pageTwo #datepicker {/* css for pageTwo */}

Если ничего другого, вы можете дать немного дополнительной семантической информации; хотя это может быть не так просто, как хотелось бы.

Или, как отмечено в комментариях (спасибо @ Bryan Downing ), если вы не хотите добавлять и id к body, вы можете использовать jQuery для достижения чего-то похожего, хотя это зависит от того, как ваша CMS применяет классы к #wrapper. Но как то так: 

$(document).ready(
    function() {

        var pageClass = $('#wrapper').attr('class');

        $('#datepicker').addClass(pageClass);
    }
);

Тогда, надеюсь, это позволит вам настроить таргетинг на CSS следующим образом: 

#datepicker.pageOneClassName {/* css */}

#datepicker.pageTwoClassName {/* css */}

Но очевидно, что это зависит от согласованной и предсказуемой / известной стратегии именования, применяемой CMS. Хотя, поскольку это так близко к ответу Брайана , я его голосую. Хотя я оставлю это на месте, поскольку оно предлагает немного другое решение.

1 голос
/ 20 февраля 2010

Вы можете добавить класс в #datepicker, используя jquery. 

$("#wrapper.pageClass").nextAll("#datepicker").addClass("someClass");

Edit:

Или вы можете обернуть #datepicker с помощью jquery. Следующее может работать, если в #wrapper определен только один класс. 

var pageClass = $("#wrapper").attr("class");
$("#datepicker").wrap("<div class='" + pageClass + "' />"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...