如何为我的分页添加格式

[英]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