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

使用general sibling combinator，因此无需为按钮定义其他类。

CSS：

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

小提琴：http://jsfiddle.net/gnSuw/

Answer 2

您可以在对话框 -

中将按钮添加到按钮中

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

有关详细信息，请参阅jQuery Buttons

您可以通过将!important添加到css规则来确保您的自定义样式不会被jQuery UI样式覆盖。

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

或谢尔盖科切托夫建议 -

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

Fiddle

Answer 3

试试这个

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

DEMO

Documentation

Answer 4

这对我有用。这来自

你也可以：

在浏览器中使用开发者工具（Chrome很棒）。
查看jQuery UI中的哪个类定义按钮颜色。
使用“！important”属性在CSS文件中覆盖它。

例如，当我需要覆盖jQuery UI微调控件并删除边框时，我找到了使用Chrome开发工具定义边框的类。然后在CSS：我添加了类似的东西：

。 {border：0px！important; }

效果很好！

Answer 5

这可能会有所帮助：

<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/

如何将边框添加到jquery按钮

5 个答案: