Как добавить границу к кнопке jquery

Question

Я пытаюсь добавить границу к кнопкам jquery. Мой код:

JSP страница имеет как CSS и JavaScript,

<style type="text/css"> 
    .borderClass{ 
     border-color: #C1E0FF; 
     border-width:1px; 
     border-style: solid; 
} 
</style> 
<script language="JavaScript" type="text/javascript"> 
    function xxx() { 
     jQuery("#completedInformation").dialog({ 
      buttons: { 
       Cancel: function() { 
        jquery(this).addClass('borderClass'); 
       jQuery("#completedInformation").dialog("close"); 
      } 
      } 
     }); 
    } 
</script> 

Пожалуйста, предложите мне.

Answer 1

Вы можете добавить класс кнопки он в диалоге -

function xxx() 
{ 
    jQuery("#completedInformation").dialog({ 
     buttons: [{ 
       Cancel: function() {       
        jQuery("#completedInformation").dialog("close"); 
       }, 
      'class':'borderClass' 
     }] 
    }); 
} 

Для получения дополнительной информации см jQuery Buttons

И вы можете убедиться, что ваши пользовательские стили не получить переопределены стилей JQuery UI, с помощью добавив !important в правила css.

.borderClass{ 
    border-color: #ff0000 !important; 
    border-width:1px !important; 
    border-style: solid !important; 
} 

или как Сергей Кочетов предложил -

#completedInformation .borderClass{ 
    border: 1px solid #C1E0FF; 
} 

Fiddle

Answer 2

Попробуйте

jQuery("#completedInformation").dialog({ 
     buttons: [{ 
       Cancel: function() {       
        jQuery("#completedInformation").dialog("close"); 
       }, 
      'class':'borderClass' 
     }] 
    }); 

DEMO

Documentation

Answer 3

Это может помочь:

<style> 
    .toggler { width: 500px; height: 200px; position: relative; } 
    #button { padding: .5em 1em; text-decoration: none; } 
    #effect { width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } 
    .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } 
    </style> 
    <script> 
    $(function() { 
    $("#button").click(function() { 
     $("#effect").addClass("newClass", 1000, callback); 
     return false; 
    }); 

    function callback() { 
     setTimeout(function() { 
     $("#effect").removeClass("newClass"); 
     }, 1500); 
    } 
    }); 
    </script> 

Добавляет классы элементов при анимации всех изменений стиля.

Источник: http://jqueryui.com/addClass/

Answer 4

Используйте general sibling combinator так что нет никакой необходимости, чтобы определить дополнительный класс к кнопке.

CSS:

#completedInformation ~ .ui-dialog-buttonpane button { 
    border: #f00 1px solid; 
} 

Fiddle: http://jsfiddle.net/gnSuw/

Answer 5

Это работает для меня. Это из

Вы также можете:

1. Использование Developer Tools в браузере (Chrome имеет большие из них).
2. Посмотрите, какой класс из jQuery UI определяет цвет кнопки.
3. Переопределите его в файле CSS с атрибутом «! Important».

Например, когда мне нужно было переопределить элемент управления jQuery UI spinner и удалить границы, я нашел класс, который определяет границы с помощью инструментов Chrome Dev. Затем в CSS: я добавил что-то вроде этого:

. {border: 0px! important; }

Отлично работает!