1

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

函数.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');
}

头文件.php

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

2 回答 2

0

首先，不要将 WordPress 捆绑的 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>
于 2013-10-11T23:20:07.530 回答
0

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

更新：现在看来脚本已正确包含，问题可能是标题框中的内容是动态的。jScrollPane 有一个选项可以在内容发生更改后重新初始化内容框。也许您的代码将类似于以下内容。

$(function() {
    var pane = $('.nivo-caption');
    pane.jScrollPane();
    var api = pane.data('jsp');
    $('.nivo-control').click(function(){
        api.reinitialise();
    });
});
于 2013-10-11T21:18:34.633 回答