Как мы можем создать собственный стиль для диалогового окна Jquery-ui в PHP? - PullRequest
0 голосов
/ 19 октября 2011

У меня есть страница 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, но когда я нажимаю на ссылку, всплывающее окно не открывается как модальное диалоговое окно.ОН открывается полностью в родительском окне?Как я могу корпоративный пользовательский интерфейс jQuery в drupal 6 с тем же кодом?Пожалуйста, помогите мне.

Ответы [ 2 ]

1 голос
/ 19 октября 2011

В общем, 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
?>
1 голос
/ 19 октября 2011

Чтобы создать свой собственный стиль 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 на этой странице.

=== ОБНОВЛЕНИЕ ===

Чтобы сделать диалог модальным, вы должны добавить модальный параметр .

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

Также смотрите мой обновленный jsfiddle .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...