miloslavkostir/dialog-control

Nette 框架的模态窗口

v1.0 2015-03-14 21:05 UTC

This package is auto-updated.

Last update: 2024-09-28 12:58:43 UTC


README

DialogControl 是用于在 Nette 框架 中创建模态窗口的组件。

需求

DialogControl 需要 Nette 框架 2.0.0 或更高版本以及 PHP 5.3 或更高版本。

安装

使用 composer 安装

$ composer require miloslavkostir/dialog-control

并且从 vendor/miloslavkostir/dialog-control/resources 加载 CSS 文件。

入门

1. 在表示者中创建控件

protected function createComponentDialog(){
	return new \MiloslavKostir\DialogControl\DialogControl;
}

2. 将控件放入模板

{control dialog} 

使用方法

#### 在模态窗口中显示 "Hello world" 您必须初始化窗口(初始化的最佳位置是操作方法)

// presenter
public function defaultAction(){
	$this->getComponent('dialog')->init('show-message', function($dialog){
		$dialog->message('Hello world')->open();
	});
}
<!-- template -->
<a n:href="this dialogDo => show-message">Show message</a>

点击 "显示消息",您应该看到模态窗口。

#### 自初始化或触发 第二个参数的回调在第一个参数的值等于查询 URL 中参数 'dialogDo' 的值时执行。这是自初始化。但您也可以通过另一个事件触发窗口

// presenter
public function defaultAction(){
	if(!$this->user->isLoggedIn()){
		// You can write init(NULL, function($dialog){...}); or just init(function($dialog){...});
		$this->getComponent('dialog')->init(NULL, function($dialog){  
			$dialog->message('You are'n logged in', 'error')->open();
		});
	}
}

#### 不只是消息 message() 方法不是您可以使用的唯一方法。试试这个

$this->getComponent('dialog')->init(NULL, function($dialog){

	$dialog->html(Nette\Utils\Html::el('span')->setClass('error')->setText('This is error'));  // adds HTML element (see Nette\Utils\Html)
	$dialog->message('In fact, message() is shortcut for html()', 'error', 'span');  // the same as html() above
	$dialog->control($this['myForm']);  // adds control for instant render
	
	$dialog->open();  // opens window and render all set elements 
}

#### 渲染块 如果您需要手动渲染窗口,您可以使用 method block()。第一个参数是块的名称,第二个参数是文件的路径。第二个参数是可选的,然后您必须在构造函数中指定包含对话模板的目录。

$this->getComponent('dialog')->init('show-block', function($dialog){
	$dialog->block('loginDialog', 'path/to/loginDialog.latte')->open();
}

如果您想在这个块中渲染控件,您必须在 DialogControl 组件中创建控件。使用 createControl() 来完成。

// presenter
protected function createComponentLoginForm(){
	$form = new \Nette\Application\UI\Form;
			
	$form->addText('login', 'Login');
	$form->addPassword('password', 'Password');
	$form->addSubmit('submit');
	...	
	return $form;
}
	
	
$this->getComponent('dialog')->init('show-block', function($dialog){
	$dialog->block('loginDialog', 'path/to/loginDialog.latte')
			->createControl('loginForm', $this->createComponentLoginForm())
			->open();
}
{* template loginDialog.latte *}
{block loginDialog}
	<h2>Login</h2>
	{form loginForm}
		{label login}{input login}<br>
		{label password}{input password}<br>
		{input submit}<br>
	{/form}
{/block}

#### 高级使用 整个 DialogControl 可以移动到自己的类中。然后您将使用 configure 方法而不是回调

namespace Components;

use Nette;      

class AdvancedDialogControl extends \MiloslavKostir\DialogControl\DialogControl {

	protected function configure($presenter){
		$this->block('advancedDialog', __DIR__.'/advancedDialogControl.latte');
		$this->open();
	}
	
	
	protected function createComponentSomeForm(){
		$form = new Nette\Application\UI\Form;
		
		$form->addText('name', 'Your name');
		$form->addSubmit('submit');
		$form->onSuccess[] = $this->someFormSucceeded;
		
		return $form;
	}
	
	
	public function someFormSucceeded($form){
		$this->presenter->flashMessage('My name is '.$form->value->name);
		$this->redirect('this');
	}
	
}

advancedDialogControl.latte

{block advancedDialog}
	<h2>Advanced usage of DialogControl</h2>
	{form someForm}
		{label name}{input name}<br>
		{input submit}<br>
	{/form}
{/block}

在表示者中

protected function createComponentAdvancedDialog(){
	return new \Components\AdvancedDialogControl();
}

public function defaultAction(){
	$this->getComponent('advancedDialog')->init('show');
	// or trigger
	if(!$this->user->isLoggedIn()){
		$this->getComponent('advancedDialog')->init();
	}
}