miloslavkostir / dialog-control
Nette 框架的模态窗口
v1.0
2015-03-14 21:05 UTC
Requires
- php: >=5.3.2
- nette/nette: >=2.0
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(); } }