Joomla 3插件addScript没有加载任何东西

I am writing a simple joomla plugin.. that basically detects a class and loads a bunch of css and JavaScript not need on other pages.. But its not loading anything at all... please advice me where i am going wrong with this..

heres the PHP:

class plgContentScrollbar extends JPlugin{
    public function __construct(& $subject, $config){
        parent::__construct($subject, $config);
        $this->loadLanguage();
    }
    function onScrollbarPrepare(){
        $app = JFactory::getApplication();
        $bodySite   = JResponse::getBody();
        $scroll =  strpos($bodySite,'scroll-pane');
        if($scroll !== false) {
            $this->onCreateScrollbar();
        }
        return true;
    }
    function onCreateScrollbar(){
        $pluginUrl = JURI::base(true) . '/plugins/content/scrollbar/';
        $document =& JFactory::getDocument();
        $document->addStyleSheet('<link href="'.$urlPlugin.'css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />');
        $document->addScript('<script type="text/javascript" src="'.$urlPlugin.'js/knockout-2.2.1.js"></script>');
        $document->addScript('<script type="text/javascript" src="'.$urlPlugin.'js/jquery.mousewheel.js"></script>');
        $document->addScript('<script type="text/javascript" src="'.$urlPlugin.'js/jquery.jscrollpane.min.js"></script>');
        $script = 'jQuery(document).ready(function(e) {
            ko.bindingHandlers.jScrollPane = {
                init: function(element, valueAccessor) {
                    var options = valueAccessor() || {};
                    $(element).jScrollPane(options); 
                    $(window).resize(function() {
                        var scroll = $(element).data("jsp");
                        if (scroll) {
                            scroll.reinitialise();
                        };
                    };
                };
            };

            var ViewModel = function() {}
            var pane;
            var remove = function() {
                pane = $("#pane").detach();
            };
            var add = function() {
                $("#content").append(pane);
                $(window).trigger("resize");
            };
            ko.applyBindings(new ViewModel());
        });';
        $style = '.scroll-pane{width: 100%;height: 500px;overflow: auto;}
                .jspVerticalBar {width: 26px;background-color:transparent;}
                .jspVerticalBar .jspArrowUp {background:url(arrow_up.png) no-repeat;width:26px;height:14px;}
                .jspVerticalBar .jspArrowDown {background:url(arrow_down.png) no-repeat;width:26px;height:14px;}
                .jspTrack {background:none;}
                .jspDrag {width:2px;margin-left:13px;background:#000000;}';
        $document->addStyleDeclaration($style);
        $document->addStyleDeclaration($script);
    }

any help greatly appreciated.. Thanks..

You are putting the whole script tag in to the function, Which is not correct see this link : Adding JavaScript and Add StyleSheet You just need to provide the url of the that file location.

Try like this:

$pluginUrl = JURI::base(true) . '/plugins/content/scrollbar/';
$document  = JFactory::getDocument();
$document->addStyleSheet($urlPlugin.'css/jquery.jscrollpane.css');
$document->addScript($urlPlugin.'js/knockout-2.2.1.js');
$document->addScript($urlPlugin.'js/jquery.mousewheel.js');
$document->addScript($urlPlugin.'js/jquery.jscrollpane.min.js');

Update : Also see this link for declaration of script. I will prefer to use it like the second example shown there. Here is the link.

JDocument/addScriptDeclaration