как настроить вкладки пользовательского интерфейса jquery темы (не используя themeroller) - PullRequest
Новая
       24

как настроить вкладки пользовательского интерфейса jquery темы (не используя themeroller)

1 голос
/ 10 мая 2009

я знаю, что вы можете использовать themeroller для настройки вашей темы пользовательского интерфейса, но возможно ли это сделать вручную. если да, то есть ли какой-то конкретный css, которому вы должны следовать. спасибо

Ответы [ 3 ]

4 голосов
/ 17 августа 2012

Я искал тот же ответ, когда наткнулся на сайт Киет Вуд: http://keith -wood.name / uiTabs.html # язычки-мин

Вы найдете, что он задокументировал несколько вариантов, но Минималистские вкладки были хорошим местом для меня, чтобы начать.

2 голосов
/ 10 мая 2009

Конечно, это возможно (поскольку в конечном итоге тема - это просто CSS, изображения и, возможно, Javascript), но это не очень практично. Вы можете взять существующую тему и изменить ее. Дело в том, что есть много файлов изображений и тому подобное, которые вам нужно изменить. Кроме того, многие из этих файлов имеют имя, соответствующее цвету или другой соответствующей переменной.

Это на самом деле очень умно, потому что это означает, что вы можете поместить заголовок Expires далекого будущего на CSS и изображения, и если вы измените тему, он все равно будет корректно обновляться.

Таким образом, вы можете оставить имена файлов такими же, но тогда у вас возникнет проблема, если вы будете использовать заголовок Expires для фьючерсов (который вам следует), плюс это может сбить с толку кого-то, кто придет и увидит его. Или вам нужно обновить все эти файлы и все ссылки.

Themeroller намного проще.

2 голосов
/ 10 мая 2009

ya есть в файле jquery-ui css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css

>     /* Tabs ----------------------------------*/
>     .ui-tabs { padding: .2em; zoom: 1; }
>     .ui-tabs .ui-tabs-nav { list-style: none; position: relative;
> padding: .2em .2em 0; }
>     .ui-tabs .ui-tabs-nav li { position: relative; float: left;
> border-bottom-width: 0 !important;
> margin: 0 .2em -1px 0; padding: 0; }
>     .ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none;
> padding: .5em 1em; }
>     .ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom:
> 1px; border-bottom-width: 0; }
>     .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs
> .ui-tabs-nav li.ui-state-disabled a,
> .ui-tabs .ui-tabs-nav
> li.ui-state-processing a { cursor:
> text; }
>     .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible
> .ui-tabs-nav li.ui-tabs-selected a {
> cursor: pointer; } /* first selector
> in group seems obsolete, but required
> to overcome bug in Opera applying
> cursor: text overall if defined
> elsewhere... */
>     .ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block;
> border-width: 0; background: none; }
>     .ui-tabs .ui-tabs-hide { display: none !important; }

однако требуется .ui-tabs .ui-tabs-hide { дисплей: нет; } от http://jqueryui.com/demos/tabs/

...