将类应用于jquery ui对话框

Applying class to jquery ui dialog

本文关键字：ui 对话框 jquery 应用于      更新时间：2023-09-26

我有一个jquery ui对话框，它的初始化方式如下

jQuery("#dialog-message").dialog({
    autoOpen: false,
    modal: true,
    width:500,
    buttons: {  Ok: function () {jQuery(this).dialog("close");  }}
});

当点击下面给出的指定跨度id时，会打开此窗口

jQuery(document).delegate("#samno","click",function () {
    var usin=jQuery(this).text();
    jQuery.post("scripts/sample_counts.php",{"usin":usin}, function(data) {
        jQuery('#dialog-message').html(data);
        jQuery('#dialog-message').dialog('open');
        return false;
    });     
});

此消息的实际div为：

<div id="dialog-message" class="dialog"  title="Counting Data"></div>

以下css也在页面中：

  .no-close .ui-dialog-titlebar-close {  display: none;}
  div.ui-dialog {
    font-size:12px;
    color:#333333;
  }
  .ui-dialog.table {
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
  }

从post请求中收到的数据包含一个表。我定义了一个名为msg_table的类，并尝试在表上应用它。但它不起作用。

知道如何将css用于对话框中的表吗？

根据Arun p Johny的建议，我正在共享表格标记

echo "<table><tr><th>Counting Date</th><th>System ID</th><th>Counting    Time(Sec)</th><th>CPM</th></tr>";
                while($data2=mysql_fetch_array($result3)){
                echo "<tr>";
                echo "<td>".$data2['count_date']."</ts>";
                echo "<td>".$data2['counter_id']."</td>";
                echo "<td>".$data2['count_time']."</td>";
                echo "<td>".$data2['cpm']."</td>";
                echo "</tr>";
                }
                echo "</table>";

而不是

.ui-dialog.table {
  border-width: 1px;
  border-color: #a9c6c9;
  border-collapse: collapse;
}

尝试：

#dialog-message table {
  border-width: 1px;
  border-color: #a9c6c9;
  border-collapse: collapse;
}

使用jQueryUI对话框，对话框内容的行为就像它们是"对话框"DIV的一部分

也就是说，用于对话框的任何div——您对该div或该div的内容所做的任何样式都将反映在对话框中。只需将内容设置为#dialog-messagediv的一部分，忘记它们在对话框中的事实，，真正的幸福将属于您

jsFiddle演示

编辑：

我刚刚阅读了你的问题下面的评论，我发现Austin Mullins有一个应该有效的解决方案，它回答了你关于在对话框中向表中添加类的问题。我希望他能把它作为一个答案，这样它就可以被投票支持。

但是的，事情真的很简单John R

这种方法的有效性取决于"sample_counts.php"到底返回了什么。在我对JSFiddle的测试中，我发现了两种不同的方法，它们适用于不同的情况。

如果<table>元素是文档的根，则以下操作有效：

function(data) {
    $dialog = jQuery('#dialog-message');
    $data = $(data);
    $data.addClass("msg-table");
    $dialog.html($data).dialog('open');
    return false;
}

在这个测试中，我让echo端点返回以下HTML:

<table>
    <tr><th>Usin</th></tr>
    <tr><td>Samno</td></tr>
</table>

请注意，在这种情况下，我们期望表本身没有周围的容器。另一方面，如果该表是较大文档的一部分，则以下操作有效：

function(data) {
    $dialog = jQuery('#dialog-message');
    $data = $(data).find("table");
    $data.addClass("msg-table");
    $dialog.html($data).dialog('open');
    return false;
}

注意使用find()函数来获取第一个<table>元素。以下是用于测试它的示例HTML：

<div>
  <table>
    <tr><th>Usin</th></tr>
    <tr><td>Samno</td></tr>
  </table>
</div>

// Use 'dialogClass' property.    
     $( ".selector" ).dialog({
        dialogClass: "alert"
     });

我只是在主页中添加了以下css

div#dialog-message table {
    margin: 1em 0;
    border-collapse: collapse;
}
div#dialog-message table td,  div#dialog-message table th {
    border: 1px solid #eee;
    border-color:#CC0033;
    padding: .6em 10px;
    text-align: left;
}

这就解决了问题。没有进行其他更改。感谢每一位提出建议/回答

的人
相关文章：