Каков наилучший способ создания закругленных углов, основанных на стандартах и ​​совместимых с разными браузерами, в Drupal? - PullRequest
Новая
       6

Каков наилучший способ создания закругленных углов, основанных на стандартах и ​​совместимых с разными браузерами, в Drupal?

6 голосов
/ 22 февраля 2010

В настоящее время я работаю над темой Drupal 6, для которой дизайнер явно запрашивает использование МНОГО закругленных углов.

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

Оптимально, я хотел бы написать свой CSS как совместимый со стандартами CSS3 с такими селекторами, как: 

h2 {border-radius: 8px;}

Использование браузера - это CSS тоже хорошо, как 

h2 {-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}

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

Какие-нибудь предложения по лучшему подходу?

Ответы [ 2 ]

7 голосов
/ 22 февраля 2010

Определите класс как «roundy-corner» и используйте плагин jQuery corner так: 

$('.roundy-corner').corner();

Вам понадобится плагин jQuery для круглых углов:

http://www.malsup.com/jquery/corner/

Мне нравится использовать здесь JavaScript, потому что он не требует никакой дополнительной разметки в исходном документе; скрипт будет вставлять элементы-заполнители по мере необходимости. Кроме того, в далеком, далеком будущем, когда у всех нас есть летающие машины и IE поддерживает border-radius, вы можете заменить его на чистый CSS.

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

Некоторые заметки, относящиеся к Drupal, для использования предложенного плагина с закругленными углами:

  1. Загрузите jquery.corner.js и поместите его в папку сценариев установки Drupal. Убедитесь, что вы правильно установили права доступа к файлу.
  2. Загрузите скрипт в вашу (Zen) тему, добавив следующую строку в template.php: drupal_add_js('scripts/jquery.corner.js');
  3. Назначьте закругленные углы любой части страницы, снова добавив команды стилей в template.php. Обратите внимание, что вам нужно подключить их с помощью метода drupal_add_js. Например: 
drupal_add_js(
  "$(document).ready(function() {
       $('#primary a').corner('top round 4px');
       $('.block-inner h2.title').corner('top round 4px');
   });",
  'inline'
);

Вот и все !!! Красивые закругленные углы без изображений!

...