README

版本 0.3.9-patch1

什么是Slit Slider小部件？

这是从知名的jQuery Slit Slider派生出的phundament3小部件。但我们有一个后端CRUD来管理您的Web应用程序中的所有滑块小部件。包括P3Media

支持Composer，便于安装此phundament3小部件。

[GitHub上的phundament3] (https://github.com/phundament/app)
[GitHub上的p3Media] (https://github.com/schmunk42/p3media)
[GitHub上的yii-slit-slider] (https://github.com/quexer69/yii-slit-slider)

快速入门

Composer

如果您已经安装了composer

composer.phar require quexer69/yii-slit-slider

或者

在composer.json中添加包 quexer69/yii-slit-slider

!!! 您需要为yii-slit-slider迁移设置数据库连接 !!!

设置

[SETUP] 在app/config/main.php中编辑

必需

'modules' => array(
        'slitSlider' => array(
            'class' => 'vendor.quexer69.yii-slit-slider.SlitSliderModule',
            'imagePresets' => array(
                'slitSlider-crop-16-9-jpg' => 'Picture 16:9 cropped 2000x700px (JPG)',
                'slitSlider-crop-16-9-png' => 'Picture 16:9 cropped 2000x700px (PNG)',
            ),
        ),
        ...
        'p3media' => array(
            'class' => 'vendor.phundament.p3media.P3MediaModule',
            'params' => array(
                ...
                'presets' => array(
                    ...
                    'slitSlider-crop-16-9-jpg' => array(
                            'name' => 'Picture 16:9 cropped 2000x700px (JPG)',
                            'commands' => array(
                                'resize' => array(2000, 700, 7), // crop
                                'quality' => '85',
                            ),
                            'type' => 'jpg',
                    ),
                    'slitSlider-crop-16-9-png' => array(
                            'name' => 'Picture 16:9 cropped 2000x700px (PNG)',
                            'commands' => array(
                                'resize' => array(2000, 700, 7), // crop
                                'quality' => '85',
                            ),
                            'type' => 'png',
                    ),
                    ...
                ),
            ),
        ),

请向slitslider模块添加imagePresets。此数组的索引必须是真实的p3media->params->presets！

在app/config/console.php中编辑以添加slit-slider迁移 ($ yiic migrate)

必需

'migrate' => array(
        'modulePaths' => array(
            ...
            'slitSlider' => 'vendor.quexer69.yii-slit-slider.migrations',
            ...
            ),
        ),

可选 （如果您已安装schmunk42/multi-theme，您可以指定SlitSlider后端应在哪个主题中显示）

'themeManager' => array(
            'class' => 'vendor.schmunk42.multi-theme.EMultiThemeManager',
            'basePath' => $applicationDirectory . '/themes',
            'baseUrl' => $baseUrl . '/themes',
            'rules' => array(
                ...
                '^slitSlider/(.*)' => 'backend2',
                ...
            )
        ),

运行小部件

slitSlider小部件的默认调用

    $this->widget('slitSlider.components.SlitSliderWidget');

slitSlider小部件的参数调用

    $this->widget(
       'vendor.quexer69.yii-slit-slider.SlitSliderWidget',
           array(
               'orientation'   => 'horizontal',    // default orientation if slit has no orientation set
               'imagePreset'   => 'slitslider',    // P3Media image preset for pictures
               'order'         => 'rank DESC',     // sort order of the slits
               'scaleable'     => '1',             // responsive or defined height and width
               'groupId'       => NULL,            // show all slits for a group_id
               'max_width'     => '2000px',        // needed for scalabel = 1 (true)
               'width'         => '100%',          // css width of the wrapper
               'height'        => '500px',         // can be set on scalabel = 0 (false)
           )
    );

如果滑块小部件的groupId为NULL -> 将在滑块中显示所有切片。
如果切片的groupId为NULL -> 该切片将在所有滑块中显示。
groupId 可以是数字或组名

或者通过P3WidgetContainer轻松添加

（您需要将slitSlider小部件添加到P3Widgets）

'p3widgets' => array(
        'params' => array(
            'widgets' => array(
                ...
                'slitSlider.components.SlitSliderWidget' => 'SlitSlider'
        ),
        ...

在任何页面模板上输出

    $this->widget('p3widgets.components.P3WidgetContainer',
        array(
            'id' => 'slitSlider',
            'varyByRequestParam' => P3Page::PAGE_ID_KEY
        )
    );

管理

现在您可以在P3Admin后端获得SlitSlider模块来配置您的滑块！！！

自定义属性

每个幻灯片也将有一些数据属性，我们将使用它们来控制每个幻灯片的特效。我们想要的数据属性如下

data-orientation
data-slice1-rotation
data-slice2-rotation
data-slice1-scale
data-slice2-scale

第一个，data-orientation应该是vertical或horizontal。我们需要知道在哪里“切片”幻灯片。它将水平或垂直切片。每个切片的data-slice1-rotation和data-slice2-rotation值将是旋转度数，而data-slice1-scale和data-slice2-scale值将是缩放值。

文档

Phundament的终极指南

数据库转储

转储模式

 app/yiic database dump init_slitSlider_tables --prefix=slider_ \
 --dbConnection=db --createSchema=1 \
 --insertData=0

转储数据

 app/yiic database dump replace_slider_data --prefix=slider_ \
 --dbConnection=db --createSchema=0 \
 --foreignKeyChecks=0 --truncateTable=1

quexer69 / yii-slit-slider

维护者

详细信息