0

Kelvin Luck によって JScrollbar Plugin を埋め込もうとしています。hereからJQuery-Ajaxで構築されたテンプレートを使用しています。

私は妹の結婚式のウェブサイトを開発しています。このプラグインがなくても問題なく動作しています。ただし、ブラウザのデフォルトの代わりにカスタム スクロールペインを使用したいと考えていました。.jscrollpane() アクション レジスタを配置する際にいくつかの順列を行った後でも、この非機能的な結果が得られます。

現在、私の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要約すると、フェッチされたページが div よりも大きい場合、overflow:auto;CSS プロパティがブラウザーのデフォルトではなく見栄えの良いスクロールバーを使用するように、jscrollpane を設定しようとしています。

私はどこで間違っていますか。私が行っているこのプロジェクトは、Jquery を使用した初めての経験であるため、プラグインが Web サイトでどのように使用されているかよくわかりません。初心者のためのヘルプ、誰か。

4

2 に答える 2

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();
于 2012-12-31T20:15:46.773 に答える
0

JScrollPane は、AJAX を介してコンテンツが変更された後、おそらく再初期化する必要があります。

$(document).ready(function() {
    $('#contentHolder').jScrollPane({
        showArrows: true,
        autoReinitialise: true
    });
});
于 2012-04-23T20:55:05.867 に答える