нумерация страниц в CSS / PHP - PullRequest
Новая
       15

нумерация страниц в CSS / PHP

0 голосов
/ 07 мая 2010

два вопроса:

- 1-- отображает все количество страниц.но я бы хотел, чтобы он отображался как:

<< Пред.,3 4 [5] 6 7.,Далее >>

- 2-- при наведении курсора на текущую страницу нет, она должна изменить цвет или увеличить размер шрифта, но когда я изменяю CSS a: hover, всеНомера страниц меняют цвет или размер вместо того, на который я указываю.также при изменении: active ничего не происходит.

это мой код подкачки в php: 

 $self = $_SERVER['PHP_SELF'];
            $limit = 2; //Number of results per page
            $numpages=ceil($totalrows/$limit);

            $query = $query." ORDER BY idQuotes LIMIT " . ($page-1)*$limit . ",$limit";
            $result = mysql_query($query, $conn)
             or die('Error:' .mysql_error());
?>

<div class="caption">Search Results</div>
<div class="center_div">
<table>
    <?php while ($row= mysql_fetch_array($result, MYSQL_ASSOC)) {
        $cQuote =  highlightWords(htmlspecialchars($row['cQuotes']), $search_result);
        ?>
        <tr>
        <td style="text-align:right; font-size:15px;"><?php h($row['cArabic']); ?></td>
            <td style="font-size:16px;"><?php echo $cQuote; ?></td>
            <td style="font-size:12px;"><?php h($row['vAuthor']); ?></td>
            <td style="font-size:12px; font-style:italic; text-align:right;"><?php h($row['vReference']); ?></td>
        </tr>
    <?php } ?>
</table>
</div>

<div class="searchmain">
<?php
   //Create and print the Navigation bar
       $nav="";
       $next = $page+1;
       $prev = $page-1;
       if($page > 1) {
            $nav .= "<span class=\"searchpage\"><a onclick=\"showPage('','$prev'); return false;\" href=\"$self?page=" . $prev . "&q=" .urlencode($search_result) . "\">< Prev</a></span>";

            $first = "<span class=\"searchpage\"><a onclick=\"showPage('','1'); return false;\" href=\"$self?page=1&q=" .urlencode($search_result) . "\"> << </a></span>" ;
        }

        else {
            $nav .= "&nbsp;";
            $first = "&nbsp;";
        }

       for($i = 1 ; $i <= $numpages ; $i++) {
            if($i == $page) {
                $nav .= "<span class=\"searchpage\">$i</span>";
            }else{
                $nav .= "<span class=\"searchpage\"><a onclick=\"showPage('',$i); return false;\" href=\"$self?page=" . $i . "&q=" .urlencode($search_result) . "\">$i</a></span>";
            }
        }

        if($page < $numpages) {
            $nav .= "<span class=\"searchpage\"><a onclick=\"showPage('','$next'); return false;\" href=\"$self?page=" . $next . "&q=" .urlencode($search_result) . "\">Next ></a></span>";

            $last = "<span class=\"searchpage\"><a onclick=\"showPage('','$numpages'); return false;\" href=\"$self?page=$numpages&q=" .urlencode($search_result) . "\"> >> </a></span>";
        }

        else {

             $nav .= "&nbsp;";
             $last = "&nbsp;";
        }


        echo  $first . $nav . $last;
?>

</div>

, и он отображается так:

альтернативный текст http://img714.imageshack.us/img714/7184/pag1l.jpg

css

.searchmain {
    margin:30px;
    text-align: center;
}
.searchpage {
   border: solid 1px #ddd;
   background: #fff;
   text-align:left;
   font-size: 16px;
   padding:9px 12px;
   color: #FEBE33;
   margin-left:2px;
}

.searchpage a{
    text-decoration: none;
    color: #808080;
}

.searchpage a:hover {
    color: #FEBE33;
    border-color: #036;
    text-decoration: none;
}

.searchpage a:visited {
    color: #808080;
}

Ответы [ 2 ]

1 голос
/ 07 мая 2010

Решение вашей первой программы кажется довольно простым;Вы знаете количество окружающих ссылок, которые вы хотите отобразить, чтобы вы могли просто выполнить цикл от current_page - surrounding_links до current_page + surrounding_links.Добавьте некоторые условия для начала, конца и когда показывать точки, и все готово.

Для css;Я не совсем уверен, чего вы хотите достичь, но я думаю, что вы можете решить эту проблему, используя только a теги, окружающие spans кажутся избыточными, они нужны только для элементов, которые не являются ссылками (.no_link впример ниже): 

a, .no_link {
    float: left;
    display: block;
    padding:9px 12px;
    border: solid 1px #ddd;
    background: #fff;
    text-align:left;
    font-size: 16px;
}
a {
    color: #808080;
}
a:hover {
    color: #FEBE33;
    border-color: #036;
}
.no_link {
    color: #FEBE33;
}
0 голосов
/ 07 мая 2010

1. Измените свойства padding и border этого CSS: 

.searchpage {
   border: none;
   background: #fff;
   text-align:left;
   font-size: 16px;
   padding:3px;
   color: #FEBE33;
   margin-left:2px;
}

И добавьте коды для квадратных скобок вокруг $ i. 

for($i = 1 ; $i <= $numpages ; $i++) {
            if($i == $page) {
                $nav .= "<span class=\"searchpage\">&#91;$i&#93;</span>";

Это должно изменить визуальные эффекты ваших чисел, я не проверял их, поскольку у вас нет живого сайта, но он должен работать.

2. Вместо .searchpage a:hover попробуйте searchmain a:hover.

Ничего из этого не проверено, но лучше всего я смог придумать после просмотра вашего кода. Надеюсь, это поможет, по крайней мере, направить вас в правильном направлении :)

...