amilna/yii2-sequence-widget

适用于 Yii2 的 Sequencejs 小部件

安装次数: 716

依赖项: 1

建议者: 0

安全: 0

星标: 1

关注者: 3

分支: 1

开放问题: 0

语言:JavaScript

类型:yii2-extension

0.0.2 2015-02-23 02:52 UTC

This package is not auto-updated.

Last update: 2024-09-28 16:52:54 UTC


README

基于 Sequencejs 的可定制插件,适用于 Yii2。

安装

安装此扩展的首选方式是通过 composer

运行以下命令之一:

php composer.phar require "amilna/yii2-sequence-widget" "*"

或者

"amilna/yii2-sequence-widget" : "*"

将其添加到您应用程序的 composer.json 文件的 require 部分。

由于此扩展仍在开发阶段,请确保在 composer.json 文件中添加以下行。

使用方法

在视图中

use amilna\sequencejs\SequenceJs;

echo SequenceJs::widget([
		'dataProvider'=>$dataProvider, // active data provider
		'targetId'=>'sequence',	//id of rendered sequencejs (the container will constructed by the widget with the given id)
		'imageKey'=>'front_image', //model attribute to be used as image
		'backgroundKey'=>'image', //model attribute to be used as background
		'theme' => 'parallax', //available themes: default, parallax, modern
 
 		'css' => 'test.css', // url of css to overide default css relative from @web	
  
		// example to overide default themes
		'itemView'=>function ($model, $key, $widget) {					
						$type = ['aeroplane','balloon','kite'];
						$html = '<li>
									<div class="info">
										<h2>'.$model->title.'</h2>
										<p>'.$model->description.'</p>
									</div>
									<img class="sky" src="'.$model->image.'" alt="Blue Sky" />
									<img class="'.$type[$key%3].'" src="'.$model->front_image.'" alt="Aeroplane" />
								</li>';
										
						return $html;
					}, 
		
		
		//	example to overide default options	more options on http://sequencejs.com
		'options'=>[
				'autoPlay'=> true,
				'autoPlayDelay'=> 3000,
				'cycle'=>true,						
				'nextButton'=> true,
				'prevButton'=> true,
				'preloader'=> true,
				'navigationSkip'=> false
			],
		
		//	example to use widget without active data provider (the target selector should already rendered)
		'targets' => [
			'.sequencejs' => [
				'autoPlay'=> true,
				'autoPlayDelay'=> 3000,
				'cycle'=>true,						
				'nextButton'=> true,
				'prevButton'=> true,
				'preloader'=> true,
				'navigationSkip'=> false
			],
		],
		 						
 	]);