web-touristПредупреждаващ диалогов прозорец
.::Увод::.:
Причината да напиша този урок бе, че се искаше такъв вид скрипт във форума, и реших че няма да е излишен и на други потребители. Реално той може да спада, както към раздел PHP, MySQL, PERL, така и към HTML, JavaScript, CSS.Урока не е сложен,но за това пък доста полезен.
.::Изложение::.:
Предназначението на скрипа е визуализация на стилизирано съобщение за настъпила грешка или предупреждение(error или warning) по време на изпълнение на даден php скрипт.(лично аз съм имал това в предвид, всеки може да ползва скрипта, по негово желание).Става дума за извеждане на съобщение във DIV с размери 250px*90px, центриран вертикално и хоризонтално във всяка една резолюция.От личен опит знам, че подтискането при извеждане на грешки в никакъв случай не е полезно, но в конкретния случай ние заместваме един вид извеждане на предупреждение с друг.САмият DIV е с позишън absolute, което в никакъв случай няма да развали дизайна Ви.
.::Коде::.:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/****************************************************/
/* Това е главният див, в който се извежда съобщението */
/****************************************************/
#myDiv {
width:250px;
height:90px ;
position:absolute ;
top:50%;
left:50%;
text-align:center;
margin-left:-150px;
margin-top:-45px ;
background:url(back.png) no-repeat;
color:#ffffff ;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
display:none ;
font-size:12px ;
font-weight:bold ;
border:solid 2px black ;
padding-top:15px ;
padding-left:50px;
z-index:99; /*За да сме сигурни, че нашият див ще бъде най-отгоре */
}
/****************************************************/
/* Това е бутонът, с който Вие премахвате съобщението */
/****************************************************/
#button {
width:50px;
height:20px;
font-size:12px;
border-top:inset 1px white;
border-left:inset 1px white;
border-right:outset 1px white;
border-bottom:outset 1px white;
background:#FFF;
}
</style>
<script type="text/javascript">
//Функцията change() премахва изведеното съобщение
function change(x)
{
var pole = document.getElementById(x);
pole.parentNode.parentNode.style.display = 'none';
}
//Функцията myAlert(), извежда тескт, който е подаден като параметър
function myAlert(myText)
{
var myDiv = document.createElement("div");
myDiv.id = "myDiv";
myDiv.style.display = "block";
myDiv.innerHTML = myText+"<div style='height:20px; overflow:hidden; margin-top:10px'><input type='button' value='OK' id='button' onclick='change(this.id)' /></div>";
document.body.appendChild(myDiv);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /></head>
<body>
<?php
$var = @mysql_connect('localhost', 'emagi', 'oziris'); //тук умишлено съм подтиснал извеждането на съобщение.Задал съм грешни потребителско име и парола, за да се симулира грешка
$text = "Грешка при свързване с MySQL сървъра"; //променливата $text съдържа текстът,който искате да се изведе при евентуална грешка
if(strlen($text))
{
$text = wordwrap($text, 20, "<br />", true); //за по-добър външен вид
}
//Следва проверка за наличие на грешка, и ако има такава се извиква функцията myAlert()
if(!$var)
{
?>
<script type="text/javascript">
myAlert("<?php echo $text; ?>");
</script>
<?php
}
?>
</body>
</html>
.::Заключени::.:
Както казах, урока не е много сложен, но може да влезе в употреба на някои WEB-TOURIST-и. Знам, че може да се ползва и window.alert-та, просто това е друг вид решение.ХУбаво ,е че всеки може да си стилизира DIV-а както желае!
