Плагин jscrollpane не работает с шаблоном Jquery AJAX - PullRequest
0 голосов
/ 24 марта 2012

Я пытаюсь вставить JScrollbar Plugin от Кельвина Удачи .Я использую шаблон 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>

В заключение я пытаюсь установить jscrollpane для #contentHandler, чтобы, если извлекаемая страница была больше, чем div, CSS-свойство overflow:auto;используйте лучше выглядящие полосы прокрутки вместо браузера по умолчанию.

Где я делаю неправильно.Этот проект, которым я занимаюсь, - мой первый опыт работы с Jquery, поэтому я не знаю, как плагины используются на веб-сайте.Любая Помощь для noob, кто-то.

Ответы [ 2 ]

1 голос
/ 01 января 2013

Посмотрите на эту страницу: http://jscrollpane.kelvinluck.com/ajax.html

... Из-за того, как работает jScrollPane, вам нужно использовать метод API getContentPane, чтобы получить элемент, к которому вы добавляете контент, а затем повторно инициализировать область прокрутки после того, как вы изменили контент ...

Используйте этот формат:

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();
0 голосов
/ 24 апреля 2012

JScrollPane, вероятно, необходимо переустановить после изменения содержимого с помощью AJAX.

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