c-mdui-a
Version:
A fast way to build an application based on Material Design UI(MDUI).
193 lines (166 loc) • 8.32 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>可扩展面板 - 通过 JavaScript 调用 - MDUI 框架示例,Material Design 示例</title>
<link rel="stylesheet" href="../assets/mdui-v0.4.2/css/mdui.min.css"/>
<link rel="stylesheet" href="../assets/demo/css/demo.css"/>
</head>
<body>
<div class="preview-container"></div>
<div class="editor-panel">
<div class="editor-controls mdui-p-x-1">
<div class="editor-control-html mdui-ripple editor-control-active" onclick="Editor.toogleHTML();">HTML</div>
<div class="editor-control-css mdui-ripple " onclick="Editor.toogleCSS();">CSS</div>
<div class="editor-control-js mdui-ripple editor-control-active" onclick="Editor.toogleJS();">JavaScript</div>
<div class="editor-controls-drag"></div>
<div class="editor-controls-run mdui-btn mdui-btn-icon mdui-ripple mdui-m-x-1 mdui-text-color-black-secondary" mdui-tooltip="{content: '运行 Ctrl + Enter'}" onclick="Editor.run();"><i class="mdui-icon material-icons">play_arrow</i></div>
<label class="editor-controls-live-mode mdui-switch mdui-m-x-1" mdui-tooltip="{content: '实时预览'}" onchange="Editor.toogleLiveMode();">
<input type="checkbox" checked/>
<i class="mdui-switch-icon"></i>
</label>
<!--<div class="mdui-controls-download mdui-btn mdui-btn-icon mdui-ripple mdui-m-x-1" mdui-tooltip="{content: '下载'}" onclick="Editor.download();"><i class="mdui-icon material-icons">file_download</i></div>-->
</div>
<div class="editor-container editor-container-html">
<div class="editor-container-label">HTML</div>
<pre id="editor-ace-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>可扩展面板 - 通过 JavaScript 调用</title>
<link rel="stylesheet" href="../assets/mdui-v0.4.2/css/mdui.min.css"/>
</head>
<body style="padding-top: 24px;">
<div class="mdui-container">
<div class="mdui-row">
<div class="mdui-col-sm-9 mdui-m-b-3">
<div class="mdui-panel" id="panel">
<div class="mdui-panel-item" id="item-1">
<div class="mdui-panel-item-header">First</div>
<div class="mdui-panel-item-body">
<p>First content</p>
<p>First content</p>
<p>First content</p>
<p>First content</p>
<p>First content</p>
<p>First content</p>
</div>
</div>
<div class="mdui-panel-item" id="item-2">
<div class="mdui-panel-item-header">Second</div>
<div class="mdui-panel-item-body">
<p>Second content</p>
<p>Second content</p>
<p>Second content</p>
<p>Second content</p>
<p>Second content</p>
<p>Second content</p>
</div>
</div>
<div class="mdui-panel-item" id="item-3">
<div class="mdui-panel-item-header">Third</div>
<div class="mdui-panel-item-body">
<p>Third content</p>
<p>Third content</p>
<p>Third content</p>
<p>Third content</p>
<p>Third content</p>
<p>Third content</p>
</div>
</div>
</div>
</div>
<div class="mdui-col-sm-3">
<button id="open-1" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">open first</button>
<button id="open-2" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">open second</button>
<button id="open-3" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-3">open third</button>
<button id="close-1" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">close first</button>
<button id="close-2" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">close second</button>
<button id="close-3" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-3">close third</button>
<button id="toggle-1" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">toggle first</button>
<button id="toggle-2" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">toggle second</button>
<button id="toggle-3" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-3">toggle third</button>
<button id="open-all" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">open all</button>
<button id="close-all" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">close all</button>
</div>
</div>
</div>
<script src="../assets/mdui-v0.4.2/js/mdui.min.js"></script>
</body>
</html>
</pre>
</div>
<div class="editor-container editor-container-css">
<div class="editor-container-label">CSS</div>
<pre id="editor-ace-css"></pre>
</div>
<div class="editor-container editor-container-js">
<div class="editor-container-label">JavaScript</div>
<pre id="editor-ace-js">var inst = new mdui.Panel('#panel');
// open
document.getElementById('open-1').addEventListener('click', function () {
inst.open(0);
});
document.getElementById('open-2').addEventListener('click', function () {
inst.open('#item-2');
});
document.getElementById('open-3').addEventListener('click', function () {
inst.open(document.getElementById('item-3'));
});
// close
document.getElementById('close-1').addEventListener('click', function () {
inst.close('#item-1');
});
document.getElementById('close-2').addEventListener('click', function () {
inst.close(document.getElementById('item-2'));
});
document.getElementById('close-3').addEventListener('click', function () {
inst.close(2);
});
// toggle
document.getElementById('toggle-1').addEventListener('click', function () {
inst.toggle('#item-1');
});
document.getElementById('toggle-2').addEventListener('click', function () {
inst.toggle('#item-2');
});
document.getElementById('toggle-3').addEventListener('click', function () {
inst.toggle('#item-3');
});
// all
document.getElementById('open-all').addEventListener('click', function () {
inst.openAll();
});
document.getElementById('close-all').addEventListener('click', function () {
inst.closeAll();
});
// event
var item1 = document.getElementById('item-1');
item1.addEventListener('open.mdui.panel', function () {
console.log('item 1 open');
});
item1.addEventListener('opened.mdui.panel', function () {
console.log('item 1 opened');
});
item1.addEventListener('close.mdui.panel', function () {
console.log('item 1 close');
});
item1.addEventListener('closed.mdui.panel', function () {
console.log('item 1 closed');
});</pre>
</div>
</div>
<script src="../assets/mdui-v0.4.2/js/mdui.min.js"></script>
<script src="../assets/ace-1.2.6/ace.js"></script>
<script src="../assets/ace-1.2.6/ext-language_tools.js"></script>
<script src="../assets/demo/js/live-editor.js"></script>
<script>
var Editor = new LiveEditor();
</script>
</body>
</html>