jquery的对话框部件(Dialog Widget)设置按钮button的颜色

dialog简介

对话框是一个悬浮窗口,包括一个标题栏和一个内容区域。对话框窗口可以移动,重新调整大小,默认情况下通过 ‘x’ 图标关闭。
如果内容长度超过最大高度,一个滚动条会自动出现。
一个底部按钮栏和一个半透明的模式覆盖层是常见的添加选项。
简介部分摘抄自https://www.runoob.com/jqueryui/api-dialog

基本使用

下面的一个例子,可以展示dialog的基本使用。dialog的使用依赖于jquery和jquery-ui,所以要在head里面导入。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>对话框部件(Dialog Widget)演示</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
 
<button id="opener">打开对话框</button>
<div id="dialog" title="对话框标题">我是一个对话框</div>
 
<script>
$( "#dialog" ).dialog({ autoOpen: false,
					   buttons:[
                           {text:"确定",click:function(){$(this).dialog("close");}}
                           ]
					  });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>
 
</body>
</html>

其实dialog的对话框本质上是一个div标签,如上面代码中的<div id="dialog" title="对话框标题">我是一个对话框</div>。而我们可以通过dialog对这个div标签进行设置,对应着上面的代码为:

$( "#dialog" ).dialog({ autoOpen: false, 
                        buttons[
                           {text:“确定",cilck:function(){$(this).dialog("close")}}
                           ]});

在设置里面,autoOpen为设置是否自动打开对话框,如果为true,则在代码加载完成后就会打开对话框,由于在上面代码里面绑定了打开对话的单击事件,所以设置为了false。
buttons为设置按钮,可以设置多个按钮,只要把{text:“确定",cilck:function(){$(this).dialog("close")}}多写几个,并用逗号隔开。
在dialog里面可以设置很多属性,具体怎么使用大家可以去看看这份文档:https://api.jqueryui.com/dialog/

按钮颜色的设置

dialog中的按钮的字体颜色和按钮的背景色,以及按钮框的样式是默认在jquery-ui中设置好的,比如上面的对话框按钮样式为:
在这里插入图片描述
当我们想更改按钮的颜色时候,如果去jquery-ui中去修改的话,可以能会影响其他的弹框。那如何才能对这一个对话框的按钮的样式进行设置呢?
在网上一直没找到好的方法,于是我根据自己对jquery的理解,自己做了像下面的修改:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>对话框部件(Dialog Widget)演示</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
 
<button id="opener">打开对话框</button>
<div id="dialog" title="对话框标题">我是一个对话框</div>
 
<script>
$( "#dialog" ).dialog({ autoOpen: false,
					   buttons:[
                           {text:"确定",click:function(){$(this).dialog("close");},class:"button1"}
                           ]
					  });
$(".button1").css("background","red");
$( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
});
</script>
 
</body>
</html>

也就是在按钮里,增加了一个class属性button1,{text:"确定",click:function(){$(this).dialog("close");},class:"button1"}
然后,通过jquery的方式修改css属性$(".button1").css("background","red");。结果按钮的背景色变为了红色:

在这里插入图片描述
当然,也可以通过这种方式去设置其他的属性样式。另外,需要注意的是,设置背景色的键值为"background“,而不是"backgroundColor“,因为在jquery-ui中是在background中设置了按钮的背景颜色,使用"backgroundColor“无法覆盖jquery-ui中的默认值。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值