Question

我正在尝试嵌入JScrollbar Plugin by Kelvin Luck。我正在使用here中的JQuery-Ajax构建模板。

我正在为姐姐的婚礼开发一个网站。它是working fine without this plugin。但是我想使用自定义滚动窗格而不是浏览器默认值。即使在放置.jscrollpane（）动作寄存器的几个排列之后，我也得到了non functional result。

目前我的js文件是

    $(document).ready(function(){

/* This code is executed after the DOM has been completely loaded */


/* Defining an array with the tab text and AJAX pages: */
var Tabs = {
    'HOME'  : 'pages/page1.html',
    'Know the Groom'    : 'pages/page2.html',
    'Know the Bride'    : 'pages/page1.html',
    'Picture Gallery'   : 'pages/page4.html',
    'Events'    : 'pages/page4.html',
    'Give your wishes': 'pages/page2.html'
}

/* The available colors for the tabs: */
var colors = ['blue','green','red','orange'];

/* The colors of the line above the tab when it is active: */
var topLineColor = {
    blue:'lightblue',
    green:'lightgreen',
    red:'red',
    orange:'orange'
}

/* Looping through the Tabs object: */
var z=0;
$.each(Tabs,function(i,j){
    /* Sequentially creating the tabs and assigning a color from the array: */
    var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');

    /* Setting the page data for each hyperlink: */
    tmp.find('a').data('page',j);

    /* Adding the tab to the UL container: */
    $('ul.tabContainer').append(tmp);
})

/* Caching the tabs into a variable for better performance: */
var the_tabs = $('.tab');

the_tabs.click(function(e){
    /* "this" points to the clicked tab hyperlink: */
    var element = $(this);

    /* If it is currently active, return false and exit: */
    if(element.find('#overLine').length) return false;

    /* Detecting the color of the tab (it was added to the class attribute in the loop above): */
    var bg = element.attr('class').replace('tab ','');

    /* Removing the line: */
    $('#overLine').remove();

    /* Creating a new line with jQuery 1.4 by passing a second parameter: */
    $('<div>',{
        id:'overLine',
        css:{
            display:'none',
            width:element.outerWidth()-2,
            background:topLineColor[bg] || 'white'
        }}).appendTo(element).fadeIn('slow');

    /* Checking whether the AJAX fetched page has been cached: */

    if(!element.data('cache'))
    {   
        /* If no cache is present, show the gif preloader and run an AJAX request: */
        $('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

        $.get(element.data('page'),function(msg){
            //msg='<div class="scroll-pane">' + msg + '</div>'; // Add the scrollpane class to the fteched text
            $('#contentHolder').html(msg);

            /* After page was received, add it to the cache for the current hyperlink: */
            element.data('cache',msg);
        });
    }
    else $('#contentHolder').html(element.data('cache'));
    //$('.scroll-pane').jScrollPane({showArrows: true}); //Try to add the event register after the content is loaded
    e.preventDefault();
})

/* Emulating a click on the first tab so that the content area is not empty: */
the_tabs.eq(0).click();
});

，html文件是

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Happy Matromonial of Shubhi and Sunny</title>

<link rel="stylesheet" type="text/css" href="./script/main_styles.css" rel="stylesheet" media="all" />
<link rel="stylesheet" type="text/css" href="./script/jquery.jscrollpane.css" rel="stylesheet" media="all"  />

<script type="text/javascript" src="./script/jquery-1.7.1.js"></script>
<script type="text/javascript" src="./script/main_script.js"></script>
<script type="text/javascript" src="./script/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="./script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="./script/mwheelIntent.js"></script>
        <script type="text/javascript" >
            $(function()
            {
                $('#contentHolder').jScrollPane({showArrows: true});
            });
        </script>
</head>

<body>

<h1>This Website is under construction... Check every monday for changes.</h1>
<h2>View the <a href="./Activity_and_Change_log.html">Progress and change log. &raquo;</a></h2>

<div id="main">

<ul class="tabContainer">
<!-- The jQuery generated tabs go here -->
</ul>

<div class="clear"></div>

<div id="tabContent">

    <div id="contentHolder" >
        <!-- The AJAX fetched content goes here -->
    </div>  

</div>

</div>

总结一下，我试图在#contentHandler上设置jscrollpane，这样如果获取的页面大于div，overflow:auto; CSS属性应该使用更好看的滚动条而不是浏览器默认值。

我在哪里做错了。我正在做的这个项目是我第一次使用Jquery，所以我不熟悉插件在网站中的使用方式。任何帮助noob，某人。

Answer 1

看看这个页面： http://jscrollpane.kelvinluck.com/ajax.html

...由于jScrollPane的工作方式，您需要使用getContentPane API方法获取要添加内容的元素，然后在更改内容后重新初始化滚动窗口...

使用以下格式：

var element = $('#someIdHere').jScrollPane();
var api = element.data('jsp');
api.getContentPane().html(msg);
api.reinitialise();

它应该在你的JS文件中使用：

var element = $('#contentHolder').jScrollPane({showArrows: true});
var api = element.data('jsp');

if(!element.data('cache'))
{   
    /* If no cache is present, show the gif preloader and run an AJAX request: */
    api.getContentPane().html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');
    api.reinitialise();

    $.get(element.data('page'),function(msg){
        //msg='<div class="scroll-pane">' + msg + '</div>'; // Add the scrollpane class to the fteched text
        api.getContentPane().html(msg);
        api.reinitialise();

        /* After page was received, add it to the cache for the current hyperlink: */
        element.data('cache',msg);
    });
}
else {
    api.getContentPane().html(element.data('cache'));
    api.reinitialise();
}
e.preventDefault();

Answer 2

JScrollPane可能需要在通过AJAX更改内容后重新启动。

$(document).ready(function() {
    $('#contentHolder').jScrollPane({
        showArrows: true,
        autoReinitialise: true
    });
});

jscrollpane插件不适用于Jquery AJAX制作的模板

2 个答案: