Как использовать темы jQuery для стилизации вашего сайта - PullRequest
Новая
       14

Как использовать темы jQuery для стилизации вашего сайта

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

Я пытался настроить очень простой пример, используя темы jQuery. Я не смог заставить его работать. Я хочу использовать одни и те же темы для форматирования некоторых ссылок и кнопок, чтобы они сливались, когда я открываю диалоги и другие. Пока у меня есть очень простой пример, который не отображает правильно: 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/base/ui.base.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/sunny/jquery-ui-1.7.2.custom.css" type="text/css" media="all">
    <title>jQuery Themes</title>
  </head>
  <body>
    <button type="button" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-check"></span>Submit</button> 
    <a href="#" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-check"></span>Submit</a>
  </body>
</html>

Я использую солнечную тему, и рендеринг производит разные шрифты для кнопки и ссылки. Справа от кнопки отображается дополнительная вертикальная линия, а значок на ссылке даже не отображается внутри поля. Не знаю, чего мне не хватает.

Изменения при наведении, которые обычно появляются над кнопками, также не работают.

Ответы [ 3 ]

2 голосов
/ 12 апреля 2011 
  <a href="#" style="display: block;" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-check"></span>Submit</a>

попробуйте это исправить

Что касается вопроса о наведении, вам нужно применить наведение вручную, 

$('.ui-state-default').live('mouseover',function () { $(this).addClass('ui-state-hover'); }).live('mouseout',function () { $(this).removeClass('ui-state-hover'); })
2 голосов
/ 20 февраля 2010

Получение кнопок и ссылок для одинакового стиля на разных платформах сложно, возможно, невозможно, если вы не хотите жить с «близко, но не совсем». Моя стратегия состоит в том, чтобы использовать javascript для замены кнопок ссылками, которые выполняют действие кнопки через javascript, в дополнение к «закрытию, но не совсем» с помощью CSS. Ознакомьтесь с этой статьей от Filament Group, чтобы узнать, как это сделать с помощью jQuery. Как только вы сделали «закрыть, но не совсем» в максимально возможном количестве браузеров, добавьте javascript для замены кнопок ссылками и получите полностью согласованный стиль для людей, у которых включен javascript.

1 голос
/ 16 декабря 2010

Между прочим, если у вас есть собственная тема, вам не нужно включать файлы base.css или js виджетов. Вам нужны только эти три строки: 

<link type="text/css" href="css/themename/jquery-ui-1.8.7.custom.css" rel="Stylesheet"/>    
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>

Не уверен, что произойдет, если вы включите базу с темой сверху.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...