jQuery UI форматирование содержимого разделов при изменении размера браузера

Question

jQuery UI форматирование содержимого разделов при изменении размера браузера

0

Я использую собственный скрипт аккордеона, и проблема, которая у меня есть, заключается в том, что при изменении размера браузера он будет форматировать контент в одном из разделов. Я хочу, чтобы контент оставался неповрежденным, и что полоса прокрутки будет заботиться, если вы хотите увидеть контент. В моей демонстрации вы увидите вопрос по разделу 3.

Я пытаюсь сделать переполнение: скрытый, но если я это сделаю на содержимом ui, он исключит полосу прокрутки. Я также сделал переполнение скрыто на p, но все еще не работает, как я хотел. Заранее спасибо.

Вот моя демонстрация

Вот код HTML:

<head>
    <meta charset="utf-8">

    <style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>

 <div class="file_wrapper">
        <div class="file_inner">

<h3><a href="#">Section 1</a></h3><div>
<span class="diff"><p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p></span>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<span class="diff"><p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
            </span></div>
<h3><a href="#">Section 2</a></h3><div>
<span class="minus"><p>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
            </span></div>
<h3><a href="#">Section 3</a></h3><div>
<p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p> </p>
<p>################################################################################</p>
<p># Test 1. GOOD *** Check up/up state for all interfaces excluding tunnel       #</p>
<p># Test 2. GOOD *** BGP neighbor not active                                     #</p>
<p># Test 3. GOOD *** BGP adv and routes check                                    #</p>
<p># Test 4. GOOD *** Show IP OSPF Neighbor                                       #</p>
<p># Test 5. GOOD *** GLBP tested correctly                                       #</p>
<p># Test 6. GOOD *** Verify WCCP is running correctly                            #</p>
<p># Test 7. GOOD *** All pings were succesful                                    #</p>
<p># Test 8. GOOD *** Environmental status                                        #</p>
<p>################################################################################</p>
            </div>                </div>                                                                                                    
              </div>
              </div>

      <div class="file_wrapper">

        <div class="file_inner">
<h3><a href="#">Section 1</a></h3><div>
<span class="diff"><p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p></span>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<span class="diff"><p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
            </span></div>
<h3><a href="#">Section 2</a></h3><div>
<p>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
            </div>
<h3><a href="#">Section 3</a></h3><div>
<p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p> </p>
<p>################################################################################</p>
<p># Test 1. GOOD *** Check up/up state for all interfaces excluding tunnel       #</p>
<p># Test 2. GOOD *** BGP neighbor not active                                     #</p>
<p># Test 3. GOOD *** BGP adv and routes check                                    #</p>
<p># Test 4. GOOD *** Show IP OSPF Neighbor                                       #</p>
<p># Test 5. GOOD *** GLBP tested correctly                                       #</p>
<p># Test 6. GOOD *** Verify WCCP is running correctly                            #</p>
<p># Test 7. GOOD *** All pings were succesful                                    #</p>
<p># Test 8. GOOD *** Environmental status                                        #</p>
<p>################################################################################</p>

                </div>                                                                                               
              </div>

</body>

и вот мой jQuery:

 /* $(function() {
            $( ".accordion" ).accordion();
            //$( "#accordion2" ).accordion();
        });
        */
       $(document).ready(function(){

           var $accordions = $('.file_inner');

           function accordion_expand_all()
           {
               var sections = $accordions.find("h3");
               sections.each(function(index, section){
                   if ($(section).hasClass('ui-state-default') && !$(section).hasClass('accordion-header-active')) {
                       $(section).click();
                   }
               });

           }

           /*
           function accordion_collapse_all()
           {
               var sections = $accordions.find("h3");
               sections.each(function(index, section){
                   if ($(section).hasClass('ui-state-active')) {
                       $(section).click();
                   }
               });
           }

             */


        $('.file_inner').accordion({
            active: true,
            beforeActivate: function(event, ui) {

                // The accordion believes a panel is being opened
                if (ui.newHeader[0]) {
                    var currHeader  = ui.newHeader;
                    var currContent = currHeader.next('.ui-accordion-content');
                    // The accordion believes a panel is being closed
                } else {
                    var currHeader  = ui.oldHeader;
                    var currContent = currHeader.next('.ui-accordion-content');
                }
                // Since we've changed the default behavior, this detects the actual status
                var isPanelSelected = currHeader.attr('aria-selected') == 'true';

                // Toggle the panel header
                currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

                // Toggle the panel icon
                currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

                // Toggle the panel content
                currContent.toggleClass('accordion-content-active',!isPanelSelected)
                if (isPanelSelected) { currContent.slideUp('fast'); }  else { currContent.slideDown('fast'); }


                var $this = $(this);

                if (!$this.hasClass('programatic')) {
                    var active = $this.children('.ui-accordion-content').index(ui.newPanel);
                    var $otherAccordions = $accordions.not($(this));

                    $otherAccordions.addClass('programatic');
                    $otherAccordions.accordion('option', 'active', active);
                    $otherAccordions.removeClass('programatic');
                }


                return false; // Cancels the default action
            }

        });
        accordion_expand_all()


       })

amb1s1 03 янв. 2014, в 19:11

Источник

Теги:

javascript

jquery

html

css

jquery-ui

1 ответ

Ещё вопросы

Ankur Goyal · Answer 1 · 2014-01-03T16-03-00.000Z

все, что вы можете сделать, это css, попробуйте сделать это:

div{position:absolute;left:(somepixel)px;top:(somepixel)px;}

в основном, если вы даете ширину: 100% и высота: 100% для вашего корневого элемента (то есть html-документ), он автоматически изменит размер по доступной ширине.

и не указывайте ширину и высоту в процентах ... это создает небольшую проблему при изменении размера браузера
Я пробую ваш ответ, и он не работает для меня.
старайтесь не использовать проценты в этом теле {color: # 111; высота строки: 1,5; поле: 0 авто; отступы: 0; ширина: 90%; высота: 100%; семейство шрифтов: "Helvetica Neue", Helvetica, Arial, без засечек; фон: # f9f9f9; }
см. мой предыдущий комментарий ... вы использовали% ...
но я хочу, чтобы размер страницы изменялся, а содержимое не изменялось (абзац внутри раздела 3)