{% extends base %}

{% block body %}

	{% include test/component/example_nav.html %}

{% init html1 = """
<div class="x-dialog" id="dialog1">
    <div class="card">
        <p>第一行</p>
        <p>第二行</p>
        <textarea></textarea>
    </div>
</div>

<button class="btn btn-default" onclick="openDialog1()">打开对话框</button>
<button class="btn link-style" onclick="xnote.showCode(this);" data-code-id="html1">展示代码</button>

<script>
    function openDialog1() {
        var html = $("#dialog1").html();
        xnote.openDialog("标题", html, ["好的", "取消"], [function () {
            xnote.alert("你确认了操作");
        }]);
    };
</script>
""" %}

{% init html2 = """
<button class="btn btn-default" id="alertBtn">alert</button>
<button class="btn btn-default" id="toastBtn">toast</button>
<button class="btn btn-default" id="promptBtn">prompt</button>
<button class="btn btn-default" id="promptTextareaBtn">promptTextareaBtn</button>

<button class="btn link-style" onclick="xnote.showCode(this);" data-code-id="html2">展示代码</button>


<script>
    $("#alertBtn").click(function () {
        xnote.alert("alert测试!");
    });
    $("#toastBtn").click(function () {
        xnote.toast("toast测试");
    });
    $("#promptBtn").click(function () {
        xnote.prompt("prompt测试");
    });
    $("#promptTextareaBtn").click(function () {
        xnote.promptTextarea("prompt多行文本测试", "默认值");
    });
</script>
""" %}

{% init html3 = """
<div class="x-dialog" id="dialog3">
    <div class="dialog-body">
        <div class="card">
            <p>第一行</p>
            <p>第二行</p>
            <textarea></textarea>
        </div>
    </div>
    <div class="dialog-footer">
        <div class="float-right">
            <button class="btn large" onclick="dialog3Confirm(this)">确定</button>
            <button class="btn large btn-default" onclick="xnote.dialog.closeByElement(this)">关闭</button>
        </div>
    </div>
</div>

<button class="btn btn-default" onclick="openDialog3()">打开对话框</button>
<button class="btn link-style" onclick="xnote.showCode(this);" data-code-id="html3">展示代码</button>

<script>
function openDialog3 () {
    var html = $("#dialog3").html();
    xnote.openDialog("标题", html);
};

function dialog3Confirm(target) {
    xnote.toast("点击了确认");
    xnote.dialog.closeByElement(target);
}
</script>
""" %}

<div class="card">
	<p>对话框自定义HTML</p>
	{% raw html1 %}
	<pre class="marked-code hide" id="html1">{{html1}}</pre>
</div>

<div class="card">
	<p>对话框自定义HTML</p>
	{% raw html3 %}
	<pre class="marked-code hide" id="html3">{{html3}}</pre>
</div>

<div class="card">
	<p>对话框自定义HTML</p>
	{% raw html2 %}
	<pre class="marked-code hide" id="html2">{{html2}}</pre>
</div>

{% include test/page/example_script.html %}

{% end %}