dojox.widget.rotator.Controller

Dojo AutoRotator 控制器使用指南

最新推荐文章于 2021-06-19 07:47:14 发布

qingqingzijinxin

最新推荐文章于 2021-06-19 07:47:14 发布

阅读量408

点赞数

分类专栏： dojo学习文章标签： dijit dojo

dojo学习专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何使用 Dojo Toolkit 中的 AutoRotator 和 Controller 组件来创建带有控制按钮的轮播效果。提供了配置参数说明及示例代码。

Introduction

Displays a series of controls that send actions to a Rotator or AutoRotator. The Controller supports the following controls:

Next pane
Previous pane
Play/Pause toggler
Numbered tabs
Titled tabs
Information

You may specify any of these controls in any order. You may also have multiple Controllers tied to a single Rotator instance.

The Controller’s DOM node may also be styled for positioning or other styled preferences.

Usage

Parameter	Type	Description
rotator	string	The name of an instance of a Rotator widget defined by data-dojo-id.
commands	string	A comma-separated list of commands. The default value is “prev,play/pause,info,next”.

The “commands” parameter accepts the following commands:

Command Name	Description
prev	An icon button to go to the previous pane.
next	An icon button to go to the next pane.
play/pause	A play and pause toggle icon button.
info	Displays the current and total panes. (ie “1 / 4”)
titles	Displays each pane’s title as a tab. (ie “Home Services Contact Blog”)

Examples

<!DOCTYPE html>
<html >
<head>

	<link rel="stylesheet" href="themes/claro/claro.css">
	<style type="text/css">
		.rotator{
			background-color:#fff;
			border:solid 1px #e5e5e5;
			width:400px;
			height:180px;
			overflow:hidden;
		}
		.pane{
			background-color:#fff;
			width:400px;
			height:180px;
			overflow:hidden;
			padding: 10px;
		}
		.pane0{
			background-color:#fff79e;
		}
		.pane1{
			background-color:#ffd4a0;
		}
		.pane2{
			background-color:#ffa0a0;
		}
	</style>
	<script>dojoConfig = {parseOnLoad: true}</script>
	<script src='dojo/dojo.js'></script>
	
	<script>
		dojo.require("dojox.widget.AutoRotator");
		dojo.require("dojox.widget.rotator.Controller");
		dojo.require("dojox.widget.rotator.Fade");

dojo.ready(function(){
    var myAutoRotatorInstance1 = new dojox.widget.AutoRotator(
        {
            transition: "dojox.widget.rotator.fade",
            duration: 2500,
            pauseOnManualChange: true,
            suspendOnHover: true,
            panes: [
                { className: "pane pane0", 
					innerHTML: "<h3>Dojo</h3><p>Tons of features like CSS-based queries, event handling,animations, Ajax, class-based programming, and a package system</p>" },
                { className: "pane pane1", 
					innerHTML: "<h3>Dijit</h3><p>Dojo's themeable, accessible, easy-to-customize UI Library</p>" },
                { className: "pane pane2", 
					innerHTML: "<h3>DojoX</h3><p>Dojo eXtensions</p>" }
            ]

        },
        dojo.byId("myAutoRotator1")
    );

    new dojox.widget.rotator.Controller(
        { rotator: myAutoRotatorInstance1 },
        dojo.byId("myRotatorController")
    );
});
	</script>
</head>
<body class="claro">
    <div id="myAutoRotator1" class="rotator"></div>
	<div id="myRotatorController"></div>

	<button onclick="dojo.publish('myAutoRotator1/rotator/control', ['prev']);">Prev</button>
	<button onclick="dojo.publish('myAutoRotator1/rotator/control', ['next']);">Next</button>
</body>
</html>

exampl2:

<!DOCTYPE html>
<html >
<head>

	<link rel="stylesheet" href="../../../_static/js/dojo/../dijit/themes/claro/claro.css">
	<style type="text/css">
		.rotator{
			background-color:#fff;
			border:solid 1px #e5e5e5;
			width:400px;
			height:100px;
			overflow:hidden;
		}
		.pane{
			background-color:#fff;
			width:400px;
			height:100px;
			overflow:hidden;
		}
		.pane0{
			background-color:#fff79e;
		}
		.pane1{
			background-color:#ffd4a0;
		}
		.pane2{
			background-color:#ffa0a0;
		}
	</style>
	<script>dojoConfig = {parseOnLoad: true}</script>
	<script src='dojo/dojo.js'></script>
	
	<script>
		dojo.require("dojox.widget.AutoRotator");
		dojo.require("dojox.widget.rotator.Controller");
		dojo.require("dojox.widget.rotator.Fade");
	</script>
</head>
<body class="claro">
    <div data-dojo-type="dojox.widget.AutoRotator" class="rotator" id="myAutoRotator2" data-dojo-id="myAutoRotatorInstance2" data-dojo-props="transition:'dojox.widget.rotator.crossFade', duration:2500">
    <div class="pane pane0">Pane 0</div>
    <div class="pane pane1">Pane 1</div>
    <div class="pane pane2">Pane 2</div>
</div>

<h3>Default Controller</h3>
<div data-dojo-type="dojox.widget.rotator.Controller" data-dojo-props="rotator:myAutoRotatorInstance2"></div>

<h3>Prev, Numbers, Next</h3>
<div data-dojo-type="dojox.widget.rotator.Controller" data-dojo-props="rotator:myAutoRotatorInstance2, commands:'prev,#,next'"></div>
</body>
</html>