jscrollpane Plugin funktioniert nicht auf Jquery AJAX Vorlage

Ich versuche, JScrollbar Plugin by Kelvin Luck einzubetten. Ich verwende eine JQuery-Ajax-basierte Vorlage von here.jscrollpane Plugin funktioniert nicht auf Jquery AJAX Vorlage

Ich entwickle eine Website für die Hochzeit meiner Schwester. Es ist working fine without this plugin. Allerdings wollte ich ein benutzerdefiniertes Scrollfenster anstelle des Browserstandards verwenden. Auch nach mehreren Permutationen beim Platzieren des Action-Registers .jscrollpane() bekomme ich diese non functional result.

Derzeit Meine js Datei ist

$(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(); 
});

und die HTML-Datei ist

<!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>

In Zusammenfassung, ich versuche JScrollPane auf dem #contentHandler so eingestellt werden, dass, wenn geholt Seite ist größer als das div, die overflow:auto; CSS-Eigenschaft sollte besser aussehende Bildlaufleisten statt Browser-Standard verwenden.

Wo mache ich mich falsch. Dieses Projekt, das ich gerade mache, ist meine erste Erfahrung mit Jquery. Ich weiß also nicht, wie die Plugins in einer Website verwendet werden. Irgendeine Hilfe für Noob, jemand.

Quelle

2012-03-23 Abhinav Kulshreshtha

OK jetzt das Plugin funktioniert .. Aber im Fehlermodus. Hier wird das Standard-Scrollfenster des Browsers angezeigt. i geändert '$ (function() \t \t \t { \t \t \t \t $() JScrollPane ({showArrows: true}); \t \t \t 'Scroll-Scheibe.'.});' zu '$ ('Scroll-Scheibe') bereit ((function() \t \t \t { \t \t \t \t $() JScrollPane ({showArrows: true});. 'Scroll-Scheibe.'. 0 \t \t \t}); ' Jetzt kann mir jemand helfen, es normal zu arbeiten, anstatt Fallback-Modus. –

Die JScrollPane muss wahrscheinlich neu eingefügt werden, nachdem der Inhalt über AJAX geändert wurde.

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

Quelle

2012-04-23 20:55:05

hat diesen Code ausprobiert. immer noch im Fallback-Modus. Gibt es eine bestimmte Ordnerstruktur, damit das Plugin funktioniert?Ich habe das Skript und das Stylesheet unter ./script/

Werfen Sie einen Blick auf diese Seite: http://jscrollpane.kelvinluck.com/ajax.html

... Aufgrund der Art und Weise JScrollPane arbeitet Sie die getContentPane API-Methode verwenden müssen, um das Element zu erhalten, die Sie Inhalte hinzugefügt werden und neu initialisieren dann die scrollpane, sobald Sie den Inhalt ...
geändert haben

Verwenden Sie dieses Format:

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

Es soll so auf Ihrer JS-Datei verwendet werden:

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();

Quelle

2012-12-31 20:15:46

jscrollpane Plugin funktioniert nicht auf Jquery AJAX Vorlage

Antwort

Verwandte Themen