jQuery 中 jScrollPane 中 ajax 加载内容的问题

发布于 2024-09-24 19:53:30 字数 1562 浏览 5 评论 0原文

您好，我在使用 jQuery、jScrollPane 和使用 AJAX 加载数据时遇到问题。当我有静态数据时，滚动窗格工作正常，但是一旦我在 div 中使用 AJAX 加载数据，滚动窗格就会消失。

我知道之后我必须重新初始化滚动窗格，所以我正在这样做..但可能是错误的，因为它不起作用。

因此，以下示例在加载时工作正常，但是当我单击主页按钮时，滚动条消失。有什么建议吗？

代码：

<html>
<head>
<title>Title of my page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link type="text/css" href="jquery/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script src="jquery/jquery-1.4.2.min.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="jquery/jquery.jscrollpane.min.js"></script></head>
<body style="background-color: black;">
<div style="background-image: url(test.jpg);background-repeat: no-repeat;  width: 1024px; height: 768px; margin-left: auto; margin-right: auto;">
    <div id="menu">
        <script type="text/javascript">
        $(document).ready(function(){

                        reinitialiseScrollPane = function()
            {
                $('#contents').jScrollPane();

            }

            $("#home").click(function(){ $("#contents").load("lorem.php", '', reinitialiseScrollPane); });


                        $("#contents").jScrollPane();   

        });
        </script>
        <a id="home"><span>Home</span></a>

    </div>
    <div id="website">
        <div id="contents" name="contents">

        </div>

    </div>
</div>
</body>

原文

HI, I have a problem with jQuery, jScrollPane and loading data with AJAX. When I have static data a div the scrollpane works fine, but as soon as I load data with AJAX in the div the scrollpane disappears.

I know that I have to reinitialise the scrollpane after that, so I am doing this.. but probably wrong as it is not working.

So, the following example works OK when it is loaded, but when I click the home button the scrollbar disappears. Any suggestions?

Code:

<html>
<head>
<title>Title of my page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link type="text/css" href="jquery/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script src="jquery/jquery-1.4.2.min.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="jquery/jquery.jscrollpane.min.js"></script></head>
<body style="background-color: black;">
<div style="background-image: url(test.jpg);background-repeat: no-repeat;  width: 1024px; height: 768px; margin-left: auto; margin-right: auto;">
    <div id="menu">
        <script type="text/javascript">
        $(document).ready(function(){

                        reinitialiseScrollPane = function()
            {
                $('#contents').jScrollPane();

            }

            $("#home").click(function(){ $("#contents").load("lorem.php", '', reinitialiseScrollPane); });


                        $("#contents").jScrollPane();   

        });
        </script>
        <a id="home"><span>Home</span></a>

    </div>
    <div id="website">
        <div id="contents" name="contents">

        </div>

    </div>
</div>
</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陪你到最终 2024-10-01 19:53:30

你需要在ajax中再次重新加载滚动面板功能，当你打电话给他时，我想......

回复收藏 0 原文

冰之心 2024-10-01 19:53:30

这花了我很长时间才解决，将各个部分拼凑在一起，因为大多数示例都使用附加。我知道回复晚了，但希望能帮助别人

    function loadNews(eid){
        var pane = $('#storyColumnNewsStory').jScrollPane({scrollbarWidth:12, scrollbarMargin:8, autoReinitialise: true});
        var contentPane = pane.data('jsp').getContentPane();
        var jspapi = pane.data('jsp');

        contentPane.load('_news.php', {'eid':eid}, 
            function(){ jspapi.reinitialise(); }
        );
    }


    $(document).ready(function() {
            loadNews(0);
    });

This took me ages to solve, pieces together various bits as most examples use append. A late reply I know but hopefully will help someone

    function loadNews(eid){
        var pane = $('#storyColumnNewsStory').jScrollPane({scrollbarWidth:12, scrollbarMargin:8, autoReinitialise: true});
        var contentPane = pane.data('jsp').getContentPane();
        var jspapi = pane.data('jsp');

        contentPane.load('_news.php', {'eid':eid}, 
            function(){ jspapi.reinitialise(); }
        );
    }


    $(document).ready(function() {
            loadNews(0);
    });

回复收藏 0 原文

~没有更多了~