1

我正在尝试为 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>

请给我建议。

4

5 回答 5

1

使用通用兄弟组合器，因此无需为按钮定义额外的类。

CSS：

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

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

于 2013-09-10T15:32:39.513 回答
0

尝试这个

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

演示

文档

于 2013-09-10T15:28:14.193 回答
0

您可以将类添加到对话框中的按钮 -

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

有关更多信息，请参阅jQuery 按钮

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

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

或者正如谢尔盖·科切托夫所建议的那样——

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

小提琴

于 2013-09-10T15:24:21.463 回答
0

这对我有用。这是从

你也可以：

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

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

. {边框：0px！重要；}

效果很好！

于 2013-09-10T19:42:56.743 回答
-1

这可能会有所帮助：

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

于 2013-09-10T15:29:57.463 回答