УрокКнопка разной ширины с закруглёнными уголками

Одна из сложностей, с которой я столкнулся едва начав работать с друпалом - это как сделать все кнопки с закруглёнными уголками, да ещё чтобы ширина у каждой кнопки менялась в зависимости от длины слова(фразы) на ней. Стандартный хтмл друпала не позволяет это сделать, т.к. для моей задачи необходимо обернуть кнопку ещё хотя бы в 1 дополнительный класс. С помощью некоторого кода я всё-таки смог это сделать:

function phptemplate_button($element) {
  if (isset($element['#attributes']['class'])) {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
  }
  else {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'];
  }
 
  if (stristr($element['#attributes']['style'], 'display: none;') || 
      stristr($element['#attributes']['class'], 'fivestar-submit')  || 
      is_array($element['#upload_validators'])) {
    return '<input type="submit" '. (empty($element['#name'])  ? '' : 'name="'. $element['#name'] .'" ')   .'id="'. $element['#id'].'" value="'. check_plain($element['#value'])  .'" '. drupal_attributes($element['#attributes'])  ." />\n";
  }
  else {
    return '<span class="button"><input  type="submit" '. (empty($element['#name']) ?  '' : 'name="'. $element['#name'] .'" ')   .'id="'. $element['#id'].'" value="'.  check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." /></span>\n";
  }
}

Этот код просто засовываем в наш template.php, чистим кэш друпала и наслаждаемся.

Здесь на кнопку навешивается <span class = "button">, который можно в дальнейшем обработать в своём файле стилей. К тому же здесь есть проверка, если кнопка не видна, или эта кнопка - "звезда" в модуле fivestar, то никаких изменений кнопка не получит.

Осталось поколдовать над стилями:

span.button {
    background:url("images/button.png") no-repeat scroll right -36px transparent;
    border:medium none;
    cursor:pointer;
    display:inline-block;
    height:36px;
    margin-right:10px;
    padding:0 4px 0 0;
}
 
span.button input {
    background:url("images/button.png") no-repeat scroll left top transparent !important;
    border:medium none !important;
    color:#FFFFFF !important;
    cursor:pointer;
    display:block !important;
    font-size:14px !important;
    height:36px !important;
    line-height:36px !important;
    margin:0 !important;
    padding:0 10px 0 16px !important;
    white-space:nowrap !important;
}

Именно таким образом сделаны кнопки на моём сайте. Картинка button.png состоит из двух частей :

button_0.png

Верхняя часть - это кнопка слева почти до самого конца, именно почти - потому что правые несколько пикселей занимает нижняя часть моей картинки, это указано у span.button смещением фона на 36 пикселей вниз.

Комментарии

Аватар пользователя D.Choomc
D.Choomc написал:

Спасибо сенсей))
И этот код переопределяет вывод ВСЕХ кнопок?

11.09.2010 00:05
Аватар пользователя Spleshka
Spleshka написал:

незачто) да, всех))

11.09.2010 00:18
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

А что делать если фон у кнопок прозрачный?

18.01.2011 21:17
Аватар пользователя Spleshka
Spleshka написал:

так на примере у кнопок прозрачный фон :)

18.01.2011 22:20
Аватар пользователя Александр
Александр написал:

Хм... А если IE 6...? Тогда всё это теряет смысл...

20.08.2011 11:03
Аватар пользователя Александр
Александр написал:

Упс... Ссори... Всё получается как надо и в IE 6... Просто увидел что такие кнопочки на вашем сайте открыл его в IE 6 и увидел весьма неприятную картинку...

20.08.2011 11:43
Аватар пользователя Spleshka
Spleshka написал:

Александр, а почему вы не посмотрели мой сайт в IE4 ?) Там наверное тоже не всё так хорошо ;) IE6 официально умер. Смысла что-то делать под него нет.

21.08.2011 16:35
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Здравствуйте,

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

Подскажите, может есть способ решить и эту проблему?

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

29.08.2011 22:50
Аватар пользователя Piterden
Piterden написал:

Чего то не работает Ваша функция. Drupal 7. Может как то по другому писать?

12.12.2012 18:59
Аватар пользователя Роман Михайлович
Роман Михайлович написал:

для Семерки:

function ИМЯ_ТЕМЫ_button($variables) {
$element = $variables['element'];
$element['#attributes']['type'] = 'submit';
element_set_attributes($element, array('id', 'name', 'value'));

$element['#attributes']['class'][] = 'form-' . $element['#button_type'];
if (!empty($element['#attributes']['disabled'])) {
$element['#attributes']['class'][] = 'form-button-disabled';
}

return '';
}

02.03.2013 16:53
Аватар пользователя Роман Михайлович
Роман Михайлович написал:

http://api.drupal.org/api/drupal/includes%21form.inc/function/theme_button/7

вообщем надо обернуть вывод внизу в ИНПУТ

02.03.2013 16:55

Комментировать