Question

我尝试在自己的WordPress主题上使用jScrollPane。但它没有出现。我不知道，问题是什么......我只看到旧的灰色标准滚动条

的functions.php

//Register jScrollPane
///////////////////////////////////////////////////////////

add_action( 'wp_enqueue_scripts', 'jscrollpane_libs' );  
function jscrollpane_libs()  
{  
    // Register each script, setting appropriate dependencies  
    wp_register_script('jscrollpane', get_template_directory_uri() . '/scroll/jquery.jscrollpane.min.js');
    wp_register_script('mousewheel', get_template_directory_uri() . '/scroll/jquery.mousewheel.js');

    // Register each style, setting appropriate dependencies 
    wp_register_style('jscrollcss',   get_template_directory_uri() . '/scroll/jquery.jscrollpane.css');
}

//Register jQuery 1.8
///////////////////////////////////////////////////////////

wp_deregister_script('jquery');
if(!is_admin()) { 
     wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
     wp_enqueue_script('jquery');
}

的header.php

<script type="text/javascript">
        $(function()
        {
            $('.nivo-caption').jScrollPane();
        });
</script>

Answer 1

您是否也在标题中调用了wp_enqueue_script()？尝试使用functions.php文件中的wp_register_script()替换wp_enqueue_script()以检查它是否正常工作。

更新：现在看来脚本正确包含在内，可能问题可能是标题框中的内容是动态的。一旦发生变化，jScrollPane可以选择reinitialize内容框。也许您的代码看起来类似于以下内容。

$(function() {
    var pane = $('.nivo-caption');
    pane.jScrollPane();
    var api = pane.data('jsp');
    $('.nivo-control').click(function(){
        api.reinitialise();
    });
});

Answer 2

首先，don't dequeue WordPress bundled jQuery。

在functions.php中它应该像：

add_action( 'wp_enqueue_scripts', 'jscrollpane_libs' );  

function jscrollpane_libs()
{
    $js = get_template_directory_uri() . '/js';
    $css = get_template_directory_uri() . '/css';

    wp_register_script( 'jsp-lib', "$js/jquery.jscrollpane.min.js" );
    wp_register_script( 'jsp-mouse', "$js/jquery.mousewheel.js" );
    wp_register_script(
        'jsp-main', 
        "$js/demo.js", 
        array( 'jquery', 'jsp-lib', 'jsp-mouse' ), // <--- Dependencies
        false,
        true // <--- In footer
    );

    wp_register_style( 'jsp-css', "$css/jquery.jscrollpane.css" );

    wp_enqueue_script( 'jsp-main' );
    wp_enqueue_style( 'jsp-css' );
}

文件demo.js：

jQuery(document).ready(function($) // <---- Proper enclosure to use in WordPress
{
   $('.scroll-pane').jScrollPane();
});

我们的帖子有这个HTML：

<div class="scroll-pane">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
        eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
        mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
        consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
        bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
        semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
        quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
        eu lacus semper viverra.
    </p>
</div>

jQuery jScrollPane没有出现（Wordpress）

2 个答案: