Пользовательский интерфейс jQuery: как настроить углы кнопок?

Question

Пользовательский интерфейс jQuery: как настроить углы кнопок?

0

Как изображение ниже, как я могу настроить угол набора радиокнопок jQuery UI? Вместо того, чтобы иметь круглый угол в правой части кнопки, как я могу настроить его и сделать его закругленным углом внизу?

Спасибо за вашу помощь!

PaulLing 10 дек. 2013, в 10:38

Источник

1

редактировать файл jquery-ui.css
HackerGK 10 дек. 2013, в 09:18

Теги:

jquery

css

jquery-ui

jquery-ui-button

3 ответа

1

Рамочное решение jQuery UI:

Найдите первый (и последний элемент управления) в наборе кнопок
Удалите классы ui-corner-left (и ui-corner-right)
Добавьте классы ui-corner-top (и ui-corner-bottom)

Демо здесь

Salman A 10 дек. 2013, в 08:29

0

Да, это работает! Большое спасибо!!
PaulLing 11 дек. 2013, в 00:54

0

В jQuery UI CSS измените свою кнопку, которая имеет:

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 4px;
}

в

.ui-corner-left, .ui-corner-right {
    border-bottom-right-radius: 4px;
}

ProllyGeek 10 дек. 2013, в 06:37

0

Да, это работает! Но это изменит весь угол кнопки. Поэтому, если у меня есть горизонтальная и вертикальная кнопки на моей странице, они не будут хорошо отображаться. Спасибо, в любом случае!
PaulLing 11 дек. 2013, в 00:53
0

я не сказал, что вы должны изменить класс для всех кнопок, я сказал изменить свою кнопку (к которой вы хотите применить класс), чтобы она имела только corener-left и right-right, так или иначе, рад, что вы нашли решение.
ProllyGeek 11 дек. 2013, в 01:04

Ещё вопросы

Да, это работает! Большое спасибо!!
Да, это работает! Но это изменит весь угол кнопки. Поэтому, если у меня есть горизонтальная и вертикальная кнопки на моей странице, они не будут хорошо отображаться. Спасибо, в любом случае!
я не сказал, что вы должны изменить класс для всех кнопок, я сказал изменить свою кнопку (к которой вы хотите применить класс), чтобы она имела только corener-left и right-right, так или иначе, рад, что вы нашли решение.

Zainul Abedin · Accepted Answer · 2013-12-10T06-51-00.000Z

Используйте следующий jQuery после сценария пользовательского интерфейса jQuery

для следующего примера

<div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
  </div>

использовать этот скрипт

 // select last radio label
    var radio = $( "#radio" ).find('label').last();

    //update border radius
    $(radio).css('border-radius','0px 0px 4px 4px');