archive-gh-me/ShadowEditor
1
0
Fork 0
mirror of https://github.com/tengge1/ShadowEditor.git synced 2026-01-25 15:08:11 +00:00
Code Issues Projects Releases Wiki Activity

模态框。

Browse Source
This commit is contained in:
liteng 2018-07-05 12:09:19 +08:00
parent 60049e2146
commit 4bb3baa61e
2 changed files with 53 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/ui/Modal.js
View File

@ -11,8 +11,8 @@ function Modal(options) {
options = options || {};
this.id = options.id || null;
this.width = options.width || 500;
this.height = options.height || 300;
this.width = options.width || '500px';
this.height = options.height || '300px';
};
Modal.prototype = Object.create(Container.prototype);
@ -30,20 +30,26 @@ Modal.prototype.render = function () {
this.parent.appendChild(this.dom);
this.dom.addEventListener('click', this.hide.bind(this));
this.container = document.createElement('div');
this.container.dom.style.width = this.width + 'px';
this.container.dom.style.height = this.height + 'px';
this.container.dom.style.padding = '8px';
this.container.dom.style.backgroundColor = '#ffffff';
this.container.dom.style.boxShadow = '0px 5px 10px rgba(0,0,0,0.5)';
this.container.style.width = this.width;
this.container.style.height = this.height;
this.container.style.padding = '8px';
this.container.style.backgroundColor = '#ffffff';
this.container.style.boxShadow = '0px 5px 10px rgba(0,0,0,0.5)';
this.dom.appendChild(this.container);
var _this = this;
this.children.forEach(function (n) {
var obj = XType.create(n);
obj.parent = _this.container;
obj.render();
});
};
Modal.prototype.show = function () {
this.dom.style.display = 'block';
this.dom.style.display = 'flex';
return this;
};

40
test/ui/22 ModalTest.html
View File

@ -6,6 +6,12 @@
<meta charset="utf-8">
<title>Modal Test</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
@ -14,12 +20,40 @@
<script>
var control = Shadow.UI.XType.create({
xtype: 'modal',
onChange: function () {
console.log(this.getValue());
}
width: '300px',
height: '200px',
children: [{
xtype: 'row',
children: [{
xtype: 'text',
text: 'Username'
}, {
xtype: 'input',
value: ''
}]
}, {
xtype: 'row',
children: [{
xtype: 'text',
text: 'Password'
}, {
xtype: 'input',
value: ''
}]
}]
});
control.render();
var button = Shadow.UI.XType.create({
xtype: 'button',
text: 'Push me',
onClick: function () {
control.show();
}
});
button.render();
</script>
</body>