Question

我在使用以下函数将jscrollpane加载到div时出现问题：

$(document).ready(function() {
  $("#shopping").click(function(event){
       $('#stage').hide();
      $('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });

上面的代码在索引页面上，我正在调用＆＃34;购物页面＆＃34;正如你在上面看到的那样。我有四个其他链接调用页面，一个页面有幻灯片显示，我设法只是通过删除Jquery存储库链接将其加载到div中，但此页面并不想知道。

购物＆＃34;购物＆＃34;页面我有以下脚本，我已经搜索了大部分网页，也没有成功，但没有其他人的解决方案对我有用。我做错了什么？：

<script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="./js/jquery.jscrollpane.min.js"></script>
<link type="text/css" href="./css/jquery.jscrollpane.mod.css" rel="stylesheet" media="all" />


<script>

$(function()
{
$('.horizontal-only').jScrollPane(
{
    showArrows: true,
    arrowScrollOnHover: true,
    horizontalArrowPositions: 'split',
    hijackInternalLinks: false
}
);

  });

Answer 1

好的... 经过一番挖掘和反复试验，我找到了我的问题的解决方案，在网上搜索和堆叠，我发现了一些有用的东西，我想到了所有那些完整的新手，就像我一样，在javascript和Jquery中我发表我的发现。

索引页面上的当前调用：

  $(document).ready(function() {
  $("#shopping").click(function(event){
       $('#stage').hide();
      $('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });

我将以下内容添加到我的索引页面（这是调用其他页面的页面）到特定页面的链接添加：

 $.ajaxSetup({async:false});

然后在调用后添加jScrollPane函数，例如：

 $('#stage').jScrollPane(
{
    showArrows: true,
    arrowScrollOnHover: true,
    horizontalArrowPositions: 'split',
    hijackInternalLinks: false
}
);

总之它看起来像这样：

  $(document).ready(function() {
  $("#shopping").click(function(event){
       $('#stage').hide();
 //--added the async code here--//
       $.ajaxSetup({async:false});
      $('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
 //--moved the jscrollPane from the page I was calling to the index page code here--//  
      $('#stage').jScrollPane(
{
    showArrows: true,
    arrowScrollOnHover: true,
    horizontalArrowPositions: 'split',
    hijackInternalLinks: false
}
);

目前这似乎对我有用，现在我只需要重新编辑一些css就可以了。

Answer 2

我找到了另一种解决方法：

我已将以下代码添加到index.html：

$(function()
{
var api = $('.horizontal-only').jScrollPane(

{
    showArrows: true,
    arrowScrollOnHover: true,
    horizontalArrowPositions: 'split',
    hijackInternalLinks: false
}
).data('jsp');

$('#shopping').bind(
    'click',
    function()
    {
        api.getContentPane().load(
            'pages/shopping.html',
            function()
            {
                api.reinitialise();
            }
        );
        return false;
    }
);
});

我还将jsp加载到一个单独的div层中，因为它导致了一些样式冲突，我无法确定问题的位置，但这可行。

我还需要做的是从其他调用中隐藏新的div层所以基本上：

$(#scroller).hide();

谢谢，我确定这不是最好的方式，但由于我在这个问题上只有一个回复，这是一个问题，我认为我对一个菜鸟做得很好。

JscrollPane没有正确加载到div中

2 个答案: