如何為我的分頁添加格式

[英]How to add formatting to my pagination


I am using the following code to create a form, that is paginated using java script (that someone on this forum supplied for me, I do not have a lot of experience with Java Script), my understanding is that the JavaScript simply hides\unhides tagged sections of the form.

我使用以下代碼創建一個表單,使用java腳本分頁(有人在這個論壇上提供給我,我沒有很多Java Script經驗),我的理解是JavaScript只是隱藏\取消隱藏標簽的表單部分。

At the moment, my buttons for the paginated form all look identical, I would like to add some CSS style formatting to highlight the chosen form 'page' number, but my experiments have been unsuccessful so far. Here is my code:

目前,我對分頁表單的按鈕看起來都一樣,我想添加一些CSS樣式格式來突出顯示所選表單的“頁面”編號,但到目前為止我的實驗都沒有成功。這是我的代碼:

<?php

        $PageID = 0;
echo ('<script src="https://code.jquery.com/jquery-1.11.2.js"></script>');    
echo ("\n");
        echo ('<form>');

        foreach ($ListSections as $sections)
        {
            if ($PageID == 0)
            {
                echo ('<div id="Page' . $PageID . '" class="informbdy2">');echo ("\n");
            }
            else
            {
                echo ('<div id="Page' . $PageID . '" class="informbdy2" style="display:none">');echo ("\n");
            }
            echo ("<br>");
            $PageNum = $PageID +1;
            echo ('<p style="cursor:pointer; color:black; background-color: #DBB7BA; border-radius: 8px;    border-color: #860A18; padding-left: 6px; padding-right: 6px; "> Section ' . $PageNum . ': ');
            echo ($sections[1] . "<br>");

            $QuestionNum = 0;
            foreach ($ListQs as $value)
            {
                if ($value[1] == $sections[1])
                {
                    echo ('<div ');
                    echo ('id="questionsform"');
                    echo ('name="questionsform"');
                    echo ('method="post" ');
                    echo ('action="admin_questions.php"');
                    echo ('>');

                    echo ("<input type='hidden' name='MyID' value='" . $value[0] . "'); />");

                    echo ("<table>");
                    echo ("<tr>");  
                    echo ("<td>");  
                    echo ("<label for='Question' class='logintext'>Question:</label>");
                    echo ("</td>");
                    echo ("<td>");
                    echo ('<textarea name="Question" rows="2" cols="25">');
                    echo ("$value[3]");
                    echo ('</textarea>');
                    echo ("</td>");
                    echo ("<td>");
                    echo ("</td>");
                    echo ("</tr>");

                    echo ("<tr>");  
                    echo ("<td>");  
                    echo ("<label for='Answer1' class='logintext'>Answer 1:</label>");
                    echo ("</td>");
                    echo ("<td>");
                    echo ('<textarea name="Answer1" rows="1" cols="25">');
                    echo ("$value[4]");
                    echo ('</textarea>');
                    echo ("</td>");
                    echo ("<td>");
                    echo ("<input type='radio' name='" . $QuestionNum . "ans1' value='1' >1");
                    echo ("</td>");
                    echo ("</tr>");

                    echo ("<tr>");  
                    echo ("<td>");  
                    echo ("<label for='Answer2' class='logintext'>Answer 2:</label>");
                    echo ("</td>");
                    echo ("<td>");
                    echo ('<textarea name="Answer2" rows="1" cols="25">');
                    echo ("$value[5]");
                    echo ('</textarea>');
                    echo ("</td>");
                    echo ("<td>");
                    echo ("<input type='radio' name='" . $QuestionNum . "ans2' value='2' >2");
                    echo ("</td>");
                    echo ("</tr>");

                    echo ("<tr>");  
                    echo ("<td>");  
                    echo ("<label for='Answer3' class='logintext'>Answer 3:</label>");
                    echo ("</td>");
                    echo ("<td>");
                    echo ('<textarea name="Answer3" rows="1" cols="25">');
                    echo ("$value[6]");
                    echo ('</textarea>');
                    echo ("</td>");
                    echo ("<td>");
                    echo ("<input type='radio' name='" . $QuestionNum . "ans3' value='3' >3");
                    echo ("</td>");
                    echo ("</tr>");


                    echo ("</td>");
                    echo ("</tr>");



                    echo ("</table>");
                    echo ('</div>');
                    echo ('</br>');
                    echo ('</br>');
                }               
            }
            $PageID++;
            echo ('</div>');
        }
        echo ('</div>');
        echo ('</form>' ."\n");



?>          
<?php       
        // Create Page Menu's for the form
        $PageID = 0;
        echo ('<div id="page_menus">' ."\n");
        echo ("</br>CLICK TO SELECT PAGE >> ");
        foreach ($ListSections as $PageMenu)

        {
            $mystring = '<a id="get_';
            //echo ($mystring);
            $mystring = $mystring . $PageID;
            //echo ($mystring);


            $mystring = $mystring . '"  style="cursor:pointer; color:black; background-color: #DBB7BA; border-radius: 8px;  border-color: #860A18; padding-left: 6px; padding-right: 6px; ">';

            //echo ($mystring);
            ++$PageID;
            $mystring = $mystring .  $PageID . '</a>' ."\n";
            echo ($mystring);
        }
        echo ('</div>' . "\n" . '</br>'."\n");              

        //Script to show and hide each 'Page' of the form
        echo ("\n");
        $PageID = 0;
        ?>
<script>
        <?php
        foreach ($ListSections as $ShowHide)
        {
            $MyPage = "Page" . $PageID;
            $MyGet = "get_" . $PageID;

            ?>
var my_get = <?php echo json_encode("#" . $MyGet); echo ("\n");
?>;

                $(my_get).click(function(){


                    <?php   $OtherPage = 0;
                            foreach ($ListSections as $Midsections)
                            {
                                $ThisPage = "Page" . $OtherPage;

                                if ($Midsections[1] <> $ShowHide[1])
                                {

                    ?>
var noshow_page = <?php echo json_encode("#" . $ThisPage);
?>;

$(noshow_page).hide()
                    <?php

                                }
                                else
                                {
?>

var noshow_page = <?php echo json_encode("#" . $ThisPage);?>;
$(noshow_page).show()
                    <?php
                                }
                                $OtherPage++;
                            }
                    ?>;
                })


            <?php
            $PageID++;
        }


        ?>
        </script>

How would I add CSS type formatting to the page menu items (under the section commented "// Create Page Menu's for the form") to show that a certain 'page' of the form is selected? The problem is that the web-page is not re-loaded, so I cannot simply track the button presses and re-format using 'if' style logic and CSS.

如何將CSS類型格式添加到頁面菜單項(在注釋“//為表單創建頁面菜單”部分下)以顯示表單的某個“頁面”被選中?問題是網頁沒有重新加載,所以我不能簡單地跟蹤按鈕按下並使用'if'樣式邏輯和CSS重新格式化。

Thank you,

謝謝,

Lee

背風處

1 个解决方案

#1


1  

You would need to add some JS to handle the click and then you can style using CSS.

您需要添加一些JS來處理點擊,然后您可以使用CSS設置樣式。

HTML:

HTML:

<div id="page_menus">

    <a id="get_01">1</a>
    <a id="get_02">2</a>
    <a id="get_03">3</a>
    <a id="get_04">4</a>
    <a id="get_05">5</a>

</div>

JS:

JS:

jQuery('#page_menus a').on('click', function() {

    if ($('a').hasClass('current')) {
        $('a').removeClass('current');
    }
    $(this).addClass('current');

});

CSS:

CSS:

#page_menus a {
    cursor:pointer; 
    color:black; 
    background-color: #DBB7BA; 
    border-radius: 8px;  
    border-color: #860A18; 
    padding-left: 6px; 
    padding-right: 6px; 
}

#page_menus a.current {
    background-color: #ccc;
}

Here is a working fiddle.

這是一個工作小提琴。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/04/02/15e10c4a5d75b603e9f5baca7e9a96eb.html



 
  © 2014-2022 ITdaan.com