Question

我正在使用this JQuery插件，我希望能够动态加载插件的配置，而不是从插件文件中更改它，这是插件的选项：

        $.Slitslider.defaults = {
            // transitions speed
            speed : 800,
            // if true the item's slices will also animate the opacity value
            optOpacity : false,
            // amount (%) to translate both slices - adjust as necessary
            translateFactor : 230,
            // maximum possible angle
            maxAngle : 25,
            // maximum possible scale
            maxScale : 2,
            // slideshow on / off
            autoplay : false,
            // keyboard navigation
            keyboard : true,
            // time between transitions
            interval : 4000,
            // callbacks
            onBeforeChange : function( slide, idx ) { return false; },
            onAfterChange : function( slide, idx ) { return false; }
    };

在他们的演示文件中，他们提供了这段代码：

 <script type="text/javascript">        
                    $(function() {

                            var Page = (function() {

                                    var $nav = $( '#nav-dots > span' ),
                                            slitslider = $( '#slider' ).slitslider( {
                                                    onBeforeChange : function( slide, pos ) {

                                                            $nav.removeClass( 'nav-dot-current' );
                                                            $nav.eq( pos ).addClass( 'nav-dot-current' );

                                                    }
                                            } ),

                                            init = function() {

                                                    initEvents();

                                            },
                                            initEvents = function() {

                                                    $nav.each( function( i ) {

                                                            $( this ).on( 'click', function( event ) {

                                                                    var $dot = $( this );

                                                                    if( !slitslider.isActive() ) {

                                                                            $nav.removeClass( 'nav-dot-current' );
                                                                            $dot.addClass( 'nav-dot-current' );

                                                                    }

                                                                    slitslider.jump( i + 1 );
                                                                    return false;

                                                            } );

                                                    } );

                                            };

                                            return { init : init };

                            })();

                            Page.init();


                    });
            </script>

所以我只是想能够从php文件中动态加载插件的配置，我找到的唯一解决方案就是自己更改插件文件中的选项，所以我需要加载所有文件来自php文件的脚本html标签！这是一个糟糕的解决方案，并且肯定有一个更清洁的解决方案

谢谢

Answer 1

我找到了解决方案：

        <script type="text/javascript"> 
        $(function() {

            var Page = (function() {

                var $nav = $( '#nav-dots > span' ),
                    slitslider = $( '#slider' ).slitslider( {
                        onBeforeChange : function( slide, pos ) {

                            $nav.removeClass( 'nav-dot-current' );
                            $nav.eq( pos ).addClass( 'nav-dot-current' );

                        },

                        autoplay : true,

                        /* parameters goes here */
                    } ),
......
</script>

动态加载JQuery插件配置

1 个答案: