#php #jquery #css #jquery-ui #drupal-6
#php #jquery #css #jquery-ui #drupal-6
Вопрос:
У меня есть страница 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 UI в drupal 6 с тем же кодом? Пожалуйста, помогите мне.
Комментарии:
1. Вот jsfiddle с вашим кодом. Можете ли вы обновить его, чтобы мы могли видеть, в чем ваши проблемы?
2. код в jsfiddle правильный, в то время как стиль открытия диалогового окна в родительском окне также меняется? также я хочу изменить внешний вид диалогового окна (например, изменить цвет строки заголовка или содержимое заполнения… вот так). что-нибудь еще нужно, пожалуйста, дайте мне знать? спасибо за помощь.. Можно ли использовать пользовательскую таблицу стилей вместо этого ( » rel=»nofollow noreferrer»/> ЕСЛИ возможно, с чего начать?
3. Еще одна проблема, которую я обнаружил, заключается в том, что впервые диалоговое окно отображается так, как указано в скрипте, как только оно закрывается и снова открывается, оно не сохраняет свою ширину и высоту, указанные в скрипте?
4. То же самое работает в drupal… Я пропустил размещение необходимых файлов в папке сайта drupal.. извините … также я установил jquery ui, диалоговый модуль jquery ui в drupal 6..
Ответ №1:
Чтобы создать свой собственный стиль пользовательского интерфейса jQuery (тему), внесите изменения в 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 на этой странице.
=== ОБНОВЛЕНИЕ ===
Чтобы сделать диалог модальным, вы должны добавить опцию modal .
.dialog({
...
modal: true
})
Также смотрите мой обновленный jsfiddle.
Комментарии:
1. Я использую jquery ui themeroller для создания css для своих нужд. большое вам спасибо за помощь….
2. еще одна вещь, я получил встроенный css на внешней странице, которая открывается как модальное окно jquery ui, некоторые css не работают. для td я поставил style=’border:0;padding-right:5;padding-top:5′ но bgcolor=’#CECFFF’ работает? не могли бы вы помочь мне разобраться в этом?
3. Попробуйте выполнить следующее:
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
?>