duice.ui.Dialog

duice-ui-dialog.markdown

duice.ui.Dialog

A Pen by chomookun on CodePen.

License.

index.html

<button onclick="javascript:openUserDialog();">
 openUserDialog();
</button>

<button onclick="javascript:openUserDialogWithListener();">
  openUserDialogWithListener();
</button>

<dialog>
  <div id="userDialog">
    <table class="userTable">
      <tbody>
        <tr>
          <th>id</th>
          <td><label data-duice="Label" data-duice-bind="user.id"></label></td>
        </tr>
        <tr>
          <th>name</th>
          <td><input data-duice="TextField" data-duice-bind="user.name"/></td>
        </tr>
        <tr>
          <th>message</th>
          <td><textarea data-duice="TextArea" data-duice-bind="user.message"></textarea></td>
        </tr>
      </tbody>
    </table>
    <div style="text-align:right;">
      <button onclick="javascript:alert(JSON.stringify(user.toJson()));">
        alert(JSON.stringify(user.toJson()));
      </button>
    </div>
  </div>
</dialog>

script.js

// Defines user map data object
var user = new duice.data.Map({
	id:"apple",
  	name:"Apple",
  	message: "Hi~ My name is Apple."
});

// open dialog
function openUserDialog() {
	new duice.ui.Dialog('Dialog Title', document.getElementById('userDialog'))
  	.open();
}

// open dialog with listener
function openUserDialogWithListener() {
	new duice.ui.Dialog('Dialog Title', document.getElementById('userDialog'))
  	.beforeOpen(function() {
  		return confirm('open dialog?');
  	})
  	.afterOpen(function() {
  		alert('after open');
  	})
  	.beforeClose(function() {
  		return confirm('close dialog?');
  	})
  	.afterClose(function() {
  		alert('after close');
  	})
  	.open();
}

/////////////////////////////////////////
////////////////////////////////////////

scripts

<script src="http://duice.oopscraft.net/src/duice.js"></script>

style.css

* {
  margin:0px;
  padding:0px;
  font-size:1em;
  line-height:2;
}

table.userTable {
  width: 400px;
  border: solid 1px #ccc;
  border-collapse: collapse;
}
table.userTable th {
  border: dotted 1px #eee;
  background-color:#eee;
}
table.userTable td {
  border: dotted 1px #eee;
}

styles

<link href="http://duice.oopscraft.net/src/duice.css" rel="stylesheet" />