当前位置： 文江博客话题详情

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

发布于 2024-12-10 16:45:04 字数 3509 浏览 0 评论 0原文

我有一个 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 完全在父窗口中打开？如何使用相同的代码将 jQuery UI 合并到 drupal 6 中？请帮我。

原文

I am having a PHP page which the result table contain a link that opens a popup box. Earlier I used JavaScript. But I want to hide the address bar, so this cant be done in JavaScript(hope so). So I tried using jQuery-ui for this.

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

My table part code is like this:

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>";

Now the problem is its all works well. But when I click the link, the jQuery dialog box opens and the style(css) for my parent window is also changing? I want the style to be applied only for dialog window also I want to change the look and feel of dialog window? How can I do this? please help me in this.

Update

I am using this code in drupal 6, but when I click the link the pop-up is not opening as a modal dialog window. IT opens completely in the parent window? How can I in-corporate jQuery UI in drupal 6 with same code? Please help me.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

べ繥欢鉨o。 2024-12-17 16:45:04

要制作您自己的 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 元素。

===更新===

要使对话框模式化，您必须添加模式选项。

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

另请参阅我更新的 jsfiddle。

To make your own jQuery ui styling (a theme), make your changes on jquery ui themeroller. After that you can download it (before you should deselect all components), if it's a zip decompress it, save the files on your server and replace the href attribute of you following line:

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

But this will change all jQuery ui elements of this page.

=== UPDATE ===

To make the dialog modal you have to add the modal option.

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

Also see my updated jsfiddle.

回复 原文
你如我软肋 2024-12-17 16:45:04

一般来说，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
?>

In general, PHP has nothing to do with JQuery, Javascript, HTML controls and all that stuff.

PHP is merely a text processor. It is your job to determine, what text to output. PHP won't do it for you.

Once you done with text - then you can print it out with PHP. It is not a big deal too - there are simple formatting rules for the PHP strings.

However, to output large amounts of texts. you can just escape from 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
?>
回复 原文
~没有更多了~

关于作者

半山落雨半山空

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

醉城メ夜风

文章 0 评论 0

远昼

文章 0 评论 0

平生欢

文章 0 评论 0

微凉

文章 0 评论 0

Honwey

文章 0 评论 0

qq_ikhFfg

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文