使用两个不同的按钮

时间：2017-03-31 05:06:29

标签： javascript dialog material-design-lite

我正在使用Material Design Lite，我想使用两个不同的按钮触发一个对话框。

我有一个按钮的工作示例，但我不知道如何使用第二个按钮触发它。

有什么想法吗？

(function() {
  'use strict';
  var dialogButton = document.querySelector('.dialog-button');
  var dialog = document.querySelector('#dialog');
  if (!dialog.showModal) {
    dialogPolyfill.registerDialog(dialog);
  }
  dialogButton.addEventListener('click', function() {
    dialog.showModal();
  });
  dialog.querySelector('button:not([disabled])')
    .addEventListener('click', function() {
      dialog.close();
    });
}());
body {
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;
}

.mdl-dialog {
  border: none;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
  width: 280px;
}

.mdl-dialog__title {
  padding: 24px 24px 0;
  margin: 0;
  font-size: 2.5rem;
}

.mdl-dialog__actions {
  padding: 8px 8px 8px 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.mdl-dialog__actions>* {
  margin-right: 8px;
  height: 36px;
}

.mdl-dialog__actions>*:first-child {
  margin-right: 0;
}

.mdl-dialog__actions--full-width {
  padding: 0 0 8px 0;
}

.mdl-dialog__actions--full-width>* {
  height: 48px;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  padding-right: 16px;
  margin-right: 0;
  text-align: right;
}

.mdl-dialog__content {
  padding: 20px 24px 24px 24px;
  color: rgba(0, 0, 0, 0.54);
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.2/dialog-polyfill.min.css" rel="stylesheet">
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="stylesheet">

<button class="mdl-button mdl-button--raised mdl-js-button dialog-button">Show Dialog (working)</button>

<br />
<br />

<button class="mdl-button mdl-button--raised mdl-js-button dialog-button">Show Dialog (not working)</button>

<br />
<br />

<p>
  Remember that the Dialog component requires the <a href="https://github.com/GoogleChrome/dialog-polyfill">Dialog polyfill</a> in order to function. It takes advantage of the native dialog element to provide the most robust experience possible.
</p>

<dialog id="dialog" class="mdl-dialog">
  <h3 class="mdl-dialog__title">MDL Dialog</h3>
  <div class="mdl-dialog__content">
    <p>
      This is an example of the Material Design Lite dialog component. Please use responsibly.
    </p>
  </div>
  <div class="mdl-dialog__actions">
    <button type="button" class="mdl-button">Close</button>
  </div>
</dialog>


<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.2/dialog-polyfill.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>

3 个答案:

答案 0 :(得分：0)

如果查询返回多个结果，则javascript querySelector返回第一个。因此，您需要为每个按钮创建单独的ID以将操作绑定到每个按钮。

＆＃13;
＆＃13; 
namespace Base\Controller;

use Zend\Mvc\Controller\AbstractActionController;
use Zend\View\Model\ViewModel;
use Zend\Paginator\Paginator;
use Zend\Paginator\Adapter\ArrayAdapter;

abstract class AbstractController extends AbstractActionController
{

    /**
     *  Entity manager
     * @var
     */
    protected $em;
    /** Entity
     * @var
     */
    protected $entity;
    /**
     * Controller
     * @var
     */
    protected $controller;
    /**
     * @var
     */
    protected $route;
    /**
     * @var
     */
    protected $service;
    /**
     * @var
     */
    protected $form;

    private $configTable;
    /**
     * AbstractController constructor.
     */
    abstract function __construct();
...
/**
     * 
     * @return \Zend\Http\Response
     */
    public function excluirAction()
    {
        $service = $this->getServiceLocator()->get($this->service);
        $id = $this->params()->fromRoute('id',0);
        // Abstract service
        if ($service->remove(array('id' => $id))) {
            $this->flashMessenger()->addSuccessMessage('Success');
        } else {
            $this->flashMessenger()->addErrorMessage('Error');
        }

        return $this->redirect()->toRoute($this->route, array('controller' => $this->controller));

    }
＆＃13; 
(function() {
  'use strict';
  var dialogButton1 = document.querySelector('#dialog-button-1');
  var dialogButton2 = document.querySelector('#dialog-button-2');

  var dialog = document.querySelector('#dialog');
  if (!dialog.showModal) {
    dialogPolyfill.registerDialog(dialog);
  }
  dialogButton1.addEventListener('click', function() {
    dialog.showModal();
  });
  dialogButton2.addEventListener('click', function() {
    dialog.showModal();
  });
  dialog.querySelector('button:not([disabled])')
    .addEventListener('click', function() {
      dialog.close();
    });
}());
＆＃13; 
body {
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;
}

.mdl-dialog {
  border: none;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
  width: 280px;
}

.mdl-dialog__title {
  padding: 24px 24px 0;
  margin: 0;
  font-size: 2.5rem;
}

.mdl-dialog__actions {
  padding: 8px 8px 8px 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.mdl-dialog__actions>* {
  margin-right: 8px;
  height: 36px;
}

.mdl-dialog__actions>*:first-child {
  margin-right: 0;
}

.mdl-dialog__actions--full-width {
  padding: 0 0 8px 0;
}

.mdl-dialog__actions--full-width>* {
  height: 48px;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  padding-right: 16px;
  margin-right: 0;
  text-align: right;
}

.mdl-dialog__content {
  padding: 20px 24px 24px 24px;
  color: rgba(0, 0, 0, 0.54);
}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

一个for循环，使用queryselectorall循环使用相同选择器的btns数。

我首先检查了我的想法的概念是否可以通过在页面控制台中运行它来实现

for (i = 0; i != document.querySelectorAll('._card').length; i++) {
    document.querySelectorAll('._card')[i].addEventListener('click', function(args) {
        console.log(args);
    });
}

然后，一旦我知道它有效，我就将这个概念应用到您问题中的代码片段中，并提出了这个问题，

＆＃13;
＆＃13; 
(function() {
  'use strict';
  var dialogButton = document.querySelectorAll('.dialog-button');
  var dialog = document.querySelector('#dialog');
  if (!dialog.showModal) {
    dialogPolyfill.registerDialog(dialog);
  }
  for (var i = 0; i != dialogButton.length; i++) {
    dialogButton[i].addEventListener('click', function() {
        dialog.showModal();
    });
  }
  dialog.querySelector('button:not([disabled])')
    .addEventListener('click', function() {
      dialog.close();
    });
}());
＆＃13; 
body {
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;
}

.mdl-dialog {
  border: none;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
  width: 280px;
}

.mdl-dialog__title {
  padding: 24px 24px 0;
  margin: 0;
  font-size: 2.5rem;
}

.mdl-dialog__actions {
  padding: 8px 8px 8px 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.mdl-dialog__actions>* {
  margin-right: 8px;
  height: 36px;
}

.mdl-dialog__actions>*:first-child {
  margin-right: 0;
}

.mdl-dialog__actions--full-width {
  padding: 0 0 8px 0;
}

.mdl-dialog__actions--full-width>* {
  height: 48px;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  padding-right: 16px;
  margin-right: 0;
  text-align: right;
}

.mdl-dialog__content {
  padding: 20px 24px 24px 24px;
  color: rgba(0, 0, 0, 0.54);
}
＆＃13; 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.2/dialog-polyfill.min.css" rel="stylesheet">
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="stylesheet">

<button class="mdl-button mdl-button--raised mdl-js-button dialog-button" id="dialog-button-1">Show Dialog (working)</button>

<br />
<br />

<button class="mdl-button mdl-button--raised mdl-js-button dialog-button" id="dialog-button-2">Show Dialog (now working)</button>

<br />
<br />

<p>
  Remember that the Dialog component requires the <a href="https://github.com/GoogleChrome/dialog-polyfill">Dialog polyfill</a> in order to function. It takes advantage of the native dialog element to provide the most robust experience possible.
</p>

<dialog id="dialog" class="mdl-dialog">
  <h3 class="mdl-dialog__title">MDL Dialog</h3>
  <div class="mdl-dialog__content">
    <p>
      This is an example of the Material Design Lite dialog component. Please use responsibly.
    </p>
  </div>
  <div class="mdl-dialog__actions">
    <button type="button" class="mdl-button">Close</button>
  </div>
</dialog>


<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.2/dialog-polyfill.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
 Run
＆＃13;
＆＃13;
＆＃13;

你可能已经完成了ilgazer在上面的回答中所说的，但这需要使用许多不同的ID，正如你在评论中所说的那样你想要避免的。有了这个，您可以使用任意数量的btns并使用相同的选择器。

答案 2 :(得分：0)

您也可以在第二个按钮上添加一个onclick="dialog.showModal()"：

(function() {
  'use strict';
  var dialogButton = document.querySelector('.dialog-button');
  var dialog = document.querySelector('#dialog');
  if (!dialog.showModal) {
    dialogPolyfill.registerDialog(dialog);
  }
  dialogButton.addEventListener('click', function() {
    dialog.showModal();
  });
  dialog.querySelector('button:not([disabled])')
    .addEventListener('click', function() {
      dialog.close();
    });
}());
body {
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;
}

.mdl-dialog {
  border: none;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
  width: 280px;
}

.mdl-dialog__title {
  padding: 24px 24px 0;
  margin: 0;
  font-size: 2.5rem;
}

.mdl-dialog__actions {
  padding: 8px 8px 8px 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.mdl-dialog__actions>* {
  margin-right: 8px;
  height: 36px;
}

.mdl-dialog__actions>*:first-child {
  margin-right: 0;
}

.mdl-dialog__actions--full-width {
  padding: 0 0 8px 0;
}

.mdl-dialog__actions--full-width>* {
  height: 48px;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  padding-right: 16px;
  margin-right: 0;
  text-align: right;
}

.mdl-dialog__content {
  padding: 20px 24px 24px 24px;
  color: rgba(0, 0, 0, 0.54);
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.2/dialog-polyfill.min.css" rel="stylesheet">
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="stylesheet">

<button class="mdl-button mdl-button--raised mdl-js-button dialog-button">Show Dialog (working)</button>

<br />
<br />

<button class="mdl-button mdl-button--raised mdl-js-button dialog-button"  onclick="dialog.showModal()">Show Dialog (not working)</button>

<br />
<br />

<p>
  Remember that the Dialog component requires the <a href="https://github.com/GoogleChrome/dialog-polyfill">Dialog polyfill</a> in order to function. It takes advantage of the native dialog element to provide the most robust experience possible.
</p>

<dialog id="dialog" class="mdl-dialog">
  <h3 class="mdl-dialog__title">MDL Dialog</h3>
  <div class="mdl-dialog__content">
    <p>
      This is an example of the Material Design Lite dialog component. Please use responsibly.
    </p>
  </div>
  <div class="mdl-dialog__actions">
    <button type="button" class="mdl-button">Close</button>
  </div>
</dialog>


<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.2/dialog-polyfill.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>

相关问题
最新问题