我们如何在 PHP 中为 Jquery-ui 对话框窗口创建自定义样式？答案

【问题标题】：How can we create custom style for Jquery-ui dialog window in PHP?我们如何在 PHP 中为 Jquery-ui 对话框窗口创建自定义样式？
【发布时间】：2011-10-19 05:23:18
【问题描述】：

我有一个 PHP 页面，其结果表包含一个打开弹出框的链接。之前我使用过 JavaScript。但我想隐藏地址栏，所以这不能在 JavaScript 中完成（希望如此）。所以我尝试使用 jQuery-ui。

<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">

<style type="text/css">
    #data-specs {
        border-collapse: collapse;
    }
    #data-specs th,
    #data-specs td {
        padding: 0px;
        border: 0px;
    }
    .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -8px;
        margin-left: -8px;
    }
    </style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

<script type="text/javascript">
        $(document).ready(function() {
            var $loading = $('<img src="loading.gif" alt="loading" class="loading">');

            $('#data-specs a').each(function() {
                var $dialog = $('<div></div>')
                    .append($loading.clone());
                var $link = $(this).one('click', function() {
                    $dialog
                        .load($link.attr('href'))
                        .dialog({
                            title: 'Dialog Title',
                            width: 500,
                            height: 300
                        });

                    $link.click(function() {
                        $dialog.dialog('open');

                        return false;
                    });

                    return false;
                });
            });
        });
    </script>
</head>

我的表格部分代码是这样的：

print "<table width='875' id='data-specs' align='center'>";
        while($row = mysql_fetch_array($result))
         {
              print "<tr height='18'>";
              print "<td width=200 align=left style='padding-left:10px'>" . $row['Country'] . "</td>";
              print "<td width=70 align=center>" . $row['MidEstimate'] . "</td>";
              print "<td width=70 align=center>" . $row['LowEstimate'] . "</td>";
              print "<td width=70 align=center>" . $row['HighEstimate'] . "</td>";
              print "<td width=118 align=center>" . $row['Source'] . "</td>";
              print "<td width=110 align=center>" . $row['StudyLocation'] . "</td>";
              print "<td width=89 align=center>" . $row['Relevance'] . "</td>";
              print "<td width=89 align=center>" . $row['Quality'] . "</td>";

print "<td width=61><a style='color:#E46D0A;' href='popupboxD.php?SId=$vv'>".$row['Info']."</a></td>";
              print "</tr>";

         }
        }

if(empty($result)){

print "<table width='875' align='center'>";
print "<tr height='1'><td colspan='9'><font color='#000080'><b>Does not have information on this particular selection.</b></font></td></tr>";
print "</table>";

现在的问题是它一切正常。但是当我单击链接时，jQuery 对话框打开并且我的父窗口的样式（css）也在改变？我希望样式仅适用于对话窗口，我还想更改对话窗口的外观和感觉？我怎样才能做到这一点？请帮助我。

更新

我在 drupal 6 中使用此代码，但是当我单击链接时，弹出窗口没有作为模式对话框窗口打开。 IT 完全在父窗口中打开？如何在 drupal 6 中使用相同的代码合并 jQuery UI？请帮帮我。

【问题讨论】：

这是一个jsfiddle 与您的代码。你能更新一下，让我们看看你的问题出在哪里吗？
jsfiddle中的代码是正确的，而父窗口中的对话框窗口打开样式也在变化？我也想改变对话窗口的外观和感觉（例如改变标题栏颜色或填充内容......就像那样）。还有什么需要请告诉我吗？ thanx 帮助.. 是否可以在上面的代码中使用自定义样式表而不是 this(ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/…) ？如果可能的话如何开始？
我发现的另一个问题是，对话窗口第一次出现在脚本中指定的位置，一旦关闭并再次打开，它没有保持其在脚本中指定的宽度和高度？
drupal 也是如此...我错过了将所需文件放在 drupal 站点文件夹中.. 抱歉...我还在 drupal 6 中安装了 jquery ui、jquery ui 对话框模块 ..

标签： php jquery css jquery-ui drupal-6

【解决方案1】：

要制作自己的 jQuery ui 样式（主题），请在 jquery ui themeroller 上进行更改。之后你可以下载它（在你应该取消选择所有组件之前），如果它是一个zip解压缩它，将文件保存在你的服务器上并替换你以下行的href属性：

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">

但这会改变这个页面的所有 jQuery ui 元素。

=== 更新 ===

要使对话框模式化，您必须添加modal option。

.dialog({
    ...
    modal: true
})

另见我更新的jsfiddle。

【讨论】：

我使用 jquery ui themeroller 为我的需要创建 css。非常感谢您的帮助....
还有一件事，我在作为 jquery ui 模式窗口打开的外部页面中获得了内联 css，某些 css 无法正常工作。对于 td 我放了 style='border:0;padding-right:5;padding-top:5' 但是 bgcolor='#CECFFF' 工作吗？你能帮我解决这个问题吗？
尝试关注：style='border:0;padding-right:5px;padding-top:5px'

【解决方案2】：

一般来说，PHP 与 JQuery、Javascript、HTML 控件和所有这些东西无关。

PHP 只是一个文本处理器。您的工作是确定要输出什么文本。 PHP 不会为你做这件事。

一旦你完成了文本 - 然后你可以用 PHP 打印出来。这也没什么大不了的 - PHP 字符串有简单的格式化规则。

但是，要输出大量文本。你可以从 PHP 中逃脱：

<?
//some PHP
?>
<table width='875' align='center'>
  <tr height='1'>
    <td colspan='9'>
      <font color='#000080'>
        <b>Does not have information on this particular selection.</b>
      </font>
    </td>
  </tr>
</table>
<?
//PHP again
?>

【讨论】：