Оберните теги диапазона с помощью f.submit

0

Я пытался стилизовать мою кнопку "Отправить" на форме. Нормальный код отправки:

<%= f.submit "Text here" %>

Мой стиль:

    <div class="ui-button button1">
      <span class="button-left">
        <span class="button-right"> Post your Answer </span>
      </span>
    </div>

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

Что мне не хватает?

EDIT Css для кнопки

.button1 { height: 38px; }
.button1 .button-left,
.button1 .button-right { height:38px;backgroundimage:url("http://i.imgur.com/7ZIueSj.png")}
.button1 .button-left { padding-left: 35px; background-position: 0 0; }
.button1 .button-right { padding-right: 35px; background-position: 100% -114px; height: 38px; line-height: 35px; font-size: 13px; color: #fefefe; text-shadow: 0 0 5px #dd3400; overflow:hidden }
.ko-kr .button1 .button-right { font-family: Dotum; }
.button1:hover .button-left { background-position: 0 -38px }
.button1:hover .button-right { color: #fff; background-position: 100% -152px; }

.button1.disabled .button-left,
.button1.processing .button-left { background-position: 0 -76px; cursor:default }
.button1.disabled .button-right,
.button1.processing .button-right { color: #a79fa0; text-shadow: 0 0 5px #000; background-position:100% -190px; cursor:default }
Теги:
ruby-on-rails-4

2 ответа

2
Лучший ответ

f.submit - это просто помощник, основанный на помощнике submit_tag, который записывает тег ввода HTML. Там нет ничего особенного.

Аналогично, helper button_tag предназначен для рендеринга кнопки, кнопки отправки по умолчанию. Вы можете использовать его или, еще проще, просто заменить его на чистый HTML.

<button type="submit">
<div class="ui-button button1">
  <span class="button-left">
    <span class="button-right"> Post your Answer </span>
  </span>
</div>
</button>

Будет ли это хорошей идеей включить всю эту разметку внутри кнопки... ну, это еще одна история.

Вы не можете заменить button ссылкой a поскольку для ссылки нет типа отправки. Вы можете имитировать его с помощью javascript, но это мешает вам следовать этому пути.

Поделиться
  • 0
    Привет, Саймон, спасибо за ответ. Как бы вы посоветовали правильно разместить код стиля кнопки в «кнопке»? (Я включил мой код Css)
  • 0
    Сам код слишком сложен. Взгляните на Bootstrap, например. У них очень простой класс для кнопок, которые вы можете прикрепить к любому элементу ввода, ссылке или элементу кнопки.
Показать ещё 1 комментарий
0

"submit" - это элемент формы, а "a" - ссылка HTML.

Конечно, вы можете добавлять туда любой стиль или внутренние теги, но не следует менять тег submit на ссылку.

Поделиться
  • 0
    Я знаю, что :) класс - это просто стиль кнопки (показывая, что это кнопка). Моя проблема заключается в обёртывании отправки вокруг тегов span. Есть какое-нибудь решение для этого?
  • 0
    Я не знаю ваш точный стиль, но это не должно быть сложной задачей. Вы можете играть с ним, пока не найдете стиль, который вы хотите. Bootstrap уже содержит элементы формы с управляющими элементами div.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню