【问题标题】:jQuery UI Tabs - content loaded by ajax doesn't scrolljQuery UI 选项卡 - 由 ajax 加载的内容不滚动
【发布时间】:2011-11-02 16:10:46
【问题描述】:

在 INDEX.PHP 中 我的标签被声明为:

$(function() {
            $( "#tabs" ).tabs({
                load: function(event, ui) {
                    console.log("load event ran");
                    $('a', ui.panel).live("click", function() {
                           $(ui.panel).load(this.href);
                           return false;
                           });
                   }

           });

        });

我有喜欢外部 php 文件的标签来加载内容:

<div id="tabs">
            <ul>
              <li><a href="content.php?div=Production">Production</a></li>
              <li><a href="content.php?div=Digital">Digital</a></li>
            </ul>
        </div>

这些页面上的表单是通过 ajax 提交的:

$(document).ready(function(){
        $("#Search_form").validate({
            debug: false,
            submitHandler: function(form) {
                $.post('search_db.php', $("#Search_form").serialize(), function(data) {
                    $('p.results').fadeIn();  
                    $('#results').html(data);
                });
            }
        });
    });

结果显示在选项卡中,但浏览器不会创建垂直滚动条来查看浏览器窗口中不适合的内容。

我知道这是与多个 ajax 函数相互关联的问题,请问如何强制浏览器查看页面内容并创建滚动条?

附:我对 jQuery 和 DOM 功能只有大概的了解...

【问题讨论】:

    标签: jquery user-interface tabs scroll


    【解决方案1】:

    尝试将其添加到您的 css 中

    .ui-tabs-panel {
         overflow:auto;
    }
    

    ps。听起来您的问题仅与样式表/样式有关,与 jquery / 脚本无关

    【讨论】:

    • 我已经尝试将 css 更改为: .ui-tabs .ui-tabs-panel { display: block;边框宽度:0;填充:1em 1.4em;背景:无;溢出:自动; } - 这不起作用。
    • 你能在 jsfiddle.net 上上传截图或示例吗?
    • 尝试固定标签的高度或添加 html { overflow-y: scroll; } 它可能是页面本身没有滚动
    • 以前从未尝试过 jsfiddle.net 并且不确定您想看什么屏幕截图。这是浏览器截图:lcojc.org.uk/scr1.jpg
    • 添加 html { overflow-y: scroll; } 确实解决了这个问题。谢谢!!!但这仍然很奇怪....
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-30
    相关资源
    最近更新 更多