Нужен совет по реализации [Версия для КПК]

Показать полную графическую версию : Нужен совет по реализации

Radik_Assasin

22-10-2013, 08:54

Доброго времени суток! Начальство поставило задачу в вебе нарисовать серверную стойку и при щелчке на какой нибудь сервер появлялись его параметры. Хотел сделать через <map> <area> и прикрутить fancybox, но ничего не получилось. Как можно еще сделать чтоб при щелчке появлялось модальное окно с параметрами сервера? Рисунок стойки приложил.

mar

22-10-2013, 09:08

Radik_Assasin,
лучше приложите Ваш код :) В чем у Вас, собственно, проблемы? Потому что другие варианты с точки зрения реализации не легче и все равно потребуют того же:

отрисовки координат каждого живого элемента картинки,
обработки события щелчка
и появления модального окна с соответствующим текстом.

Кстати, текст (данные о сервере) берется из базы, или это все чистый html ?

Radik_Assasin

22-10-2013, 16:38

Пока сделал так:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="/fancybox/jquery.fancybox.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript" src="jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$('map > area.fancybox').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
$.fancybox({
'href' : url,
'type' : 'iframe'
});
});
</script>
</head>
<body>
<div id="main">
<div id="center"><img src="stoika.png" usemap="#servers"></div>
<div id="map">
<map id="servers" name="servers">
<area class="fancybox" shape="poly" coords="32,179,31,128,31,18,76,18,75,179" href="1.php?id=1" target="frame">
<area shape="poly" coords="79,178,79,19,125,19,124,179" href="1.php?id=2" target="frame">
<area shape="poly" coords="126,178,126,19,172,19,173,178" href="1.php?id=3" target="frame">
<area shape="poly" coords="173,182,173,18,220,18,221,182" href="1.php?id=4" target="frame">
<area shape="poly" coords="317,341,316,18,366,18,367,343" href="1.php?id=7" target="frame">
<area shape="poly" coords="366,345,365,18,413,18,412,343" href="1.php?id=8" target="frame">
<area shape="poly" coords="32,342,34,185,77,185,76,341" href="1.php?id=9" target="frame">
<area shape="poly" coords="79,345,81,182,122,182,124,341" href="1.php?id=10" target="frame">
<area shape="poly" coords="127,345,127,181,173,180,172,344" href="1.php?id=11" target="frame">
<area shape="poly" coords="176,344,175,183,222,183,221,341" href="1.php?id=12" target="frame">
</div>
<div id="table">
<iframe name="frame" frameborder="no" hspace="10" width="500" height="1300"></iframe>
</div>
</div>
</body>
</html>

Обработчик:

<table width=400 border=2 cellpadding=3 cellspacing=0 bordercolor="#000000" rules="all" >

<?php
$count = 1;
if ($_GET['id'] == 1){
$file = fopen ("1.csv","r");
}
elseif ($_GET['id'] == 2){
$file = fopen ("2.csv","r");
}
elseif ($_GET['id'] == 3){
$file = fopen ("3.csv","r");
}
elseif ($_GET['id'] == 4){
$file = fopen ("4.csv","r");
}
elseif ($_GET['id'] == 7){
$file = fopen ("7.csv","r");
}
elseif ($_GET['id'] == 8){
$file = fopen ("8.csv","r");
}
elseif ($_GET['id'] == 9){
$file = fopen ("9.csv","r");
}
elseif ($_GET['id'] == 10){
$file = fopen ("10.csv","r");
}
elseif ($_GET['id'] == 11){
$file = fopen ("11.csv","r");
}
else {
$file = fopen ("12.csv","r");
}

while ($data = fgetcsv ($file, 1000, ";"))
{
$num = count ($data);
$count++;
if ($data[1] == ''){
continue;
}
print "<tr height=17>";
for ($i=0; $i < $num; $i++)
{

print "<td align=left> ";
echo($data[$i]);
print " </td>";

}
print "</tr>";
}
fclose ( $file );
?>

Хотел к area прикрутить onclick, но он не работает. Пока реализовал через фрейм.

mar

22-10-2013, 18:18

Radik_Assasin,
ну, если упростить, выкинув JavaScript, iframe и обработку csv т.к. этих данных у меня все равно нет, и сделав вместо них три тестовых файла с разными строками, то работает:

<!DOCTYPE html>
<html>
<head> </head>
<body>
<div id="main">
<div id="center"><img src="stoika.png" usemap="#servers"></div>
<div id="map">
<map id="servers" name="servers">
<area class="fancybox" shape="poly" coords="32,179,31,128,31,18,76,18,75,179" href="1.php?id=1" target="frame">
<area shape="poly" coords="79,178,79,19,125,19,124,179" href="1.php?id=2">
<area shape="poly" coords="126,178,126,19,172,19,173,178" href="1.php?id=3">
<area shape="poly" coords="173,182,173,18,220,18,221,182" href="1.php?id=4">
<area shape="poly" coords="317,341,316,18,366,18,367,343" href="1.php?id=7">
<area shape="poly" coords="366,345,365,18,413,18,412,343" href="1.php?id=8">
<area shape="poly" coords="32,342,34,185,77,185,76,341" href="1.php?id=9">
<area shape="poly" coords="79,345,81,182,122,182,124,341" href="1.php?id=10">
<area shape="poly" coords="127,345,127,181,173,180,172,344" href="1.php?id=11">
<area shape="poly" coords="176,344,175,183,222,183,221,341" href="1.php?id=12">
</div>
</div>
</body>
</html>

<?php
$count = 1;
if ($_GET['id'] == 1){
echo "1";
$fname = "1.csv";
echo "\n<br/>$fname<br/>\n";
$file = fopen($fname,"r");
}
elseif ($_GET['id'] == 2){
$file = fopen ("2.csv","r");
}
elseif ($_GET['id'] == 3){
$file = fopen ("3.csv","r");
}
elseif ($_GET['id'] == 4){
$file = fopen ("1.csv","r");
}
elseif ($_GET['id'] == 7){
$file = fopen ("2.csv","r");
}
elseif ($_GET['id'] == 8){
$file = fopen ("3.csv","r");
}
elseif ($_GET['id'] == 9){
$file = fopen ("1.csv","r");
}
elseif ($_GET['id'] == 10){
$file = fopen ("2.csv","r");
}
elseif ($_GET['id'] == 11){
$file = fopen ("3.csv","r");
}
else {
$file = fopen ("1.csv","r");
}

while (($data = fgetcsv($file, 1000, ",")) !== false) {
foreach ($data as $value) {
echo $value . "<br />\n";
}
}
?>

Дальше просто усложняйте до нужного Вам состояния и отлавливайте ошибки

Radik_Assasin

23-10-2013, 12:33

Попробовал вот так сделать:

$('map > area.fancybox').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
var title = $(this).attr('title');
var type = $(this).attr('rel');
$.fancybox({
'title': title,
'titlePosition': 'inside',
'href' : url,
'type' : type
});
});
Но все равно не работает. Т.е. не открывается модальное окно как я хотел.
А загружается новая страница. Как будто и нет тут скрипта.