master

分支 (2)

管理

管理

master

gh-pages

qbox
/
demo.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="aboc">
    <script type="text/javascript" src="js/qbox.js"></script>
    <style>
        body{
            padding: 0;margin: 0;}
        h3{margin: 0;padding: 0;background: #efefef;line-height: 60px;height: 60px;color: #666;font-size: 22px;text-indent: 20px;}
        dl{margin:10px 20px;}
        dl dt{line-height: 40px;font-family:"微软雅黑";}
        dl dd h5{font-weight: 600;font-size:14px;}
        dl dd pre{background: #ddd;padding: 5px;border-radius: 10px;}
        ul{margin-left: 0;}
        ul li{list-style: none;line-height: 3;}
    </style>
</head>
<body>

<h3>轻弹窗</h3>

<dl>
<dt>
演示1.<a href="javascript:void(0);" onclick="demo1()">只有一个确认</a>
</dt>
    <dd>
        <h5>代码</h5>
        <pre>
        box.alert("我出来了,点击确定弹出alert",function(d){
            if(d){
                alert("弹出了一个alert");
            }
        },{
            title:'自定义的提示标题'
        })
        </pre>
    </dd>
    <dt>演示2.<a href="javascript:void(0);" onclick="demo2()">有确认和取消</a></dt>
    <dd>
        <h5>代码</h5>
        <pre>
        box.confirm("确定和取消弹出的提示不一样哦",function(d){
            if(d){
                alert("yes");
            } else {
                alert("no")
            }
        },{
            title:'自定义的提示标题'
        })
        </pre>
    </dd>
    <dt>演示3. <a href="javascript:void(0);" onclick="demo4()">弹窗一次配置,多次有效</a> <a href="javascript:void(0);" onclick="demo5()">我和前面的兄弟一样哦</a></dt>
    <dd>
        <h5>代码</h5>
        <pre>
            var box3 = new qbox({title:'一次声明,都有效'});
    function demo4(){
        box3.alert("好吧,就是这样");
    }
    function demo5(){
        box3.alert("你看,是不是一样呢");
        </pre>
    </dd>
    <dt>演示4. <a  href="javascript:void(0);" onclick="demo6()">支持html代码</a></dt>
    <dd>
        <h5>代码</h5>
        <pre>function demo6(){
        var str = '设置等级:<select id="cool2"><option value="1级">1级</option><option value="2级">2级</option><option value="3级">3级</option></select>';
        box3.confirm(str,function(d){
            if(d){
                alert('你选择了'+document.getElementById('cool2').value);
                alert('请点关闭按钮关闭我');
            } else {
                alert('我要关闭了');
                return false;
            }
            return true;
        },{cancel:'关闭'});
    }</pre>
    </dd>
    <dt>演示5. <a href="javascript:void(0);" onclick="demo7()">有背景遮罩</a></dt>
    <dd>
        <h5>代码</h5>
        <pre>var box7 = new qbox({title:'有遮罩的提示',mask:true});
    function demo7(){
        box7.alert("就是这个样子");
    }</pre>
    </dd>
    <dt>演示6. <a href="javascript:void(0);" onclick="demo8()">提示框</a></dt>
    <dd>
        <h5>代码</h5>
        <pre>
function demo8(){
        new qbox().tips('这是提示',{
            second:2
        });
    }
        </pre>
    </dd>
</dl>
<ul>
	<li>演示地址: <a href="http://abocd.github.io/qbox/demo.html" target="_blank">http://abocd.github.io/qbox/demo.html</a></li>
</ul>
<script type="text/javascript">
    var box = new qbox();
    function demo1(){
        box.alert("我出来了,点击确定弹出alert",function(d){
            if(d){
                alert("弹出了一个alert");
            }
        },{
            title:'自定义的提示标题'
        })
    }
    function demo2(){
        box.confirm("确定和取消弹出的提示不一样哦",function(d){
            if(d){
                alert("yes");
            } else {
                alert("no")
            }
        },{
            title:'自定义的提示标题'
        })
    }

    var box3 = new qbox({title:'一次声明,都有效',themes:'default_box'});
    function demo4(){
        box3.alert("好吧,就是这样");
    }
    function demo5(){
        box3.alert("你看,是不是一样呢");
    }

    function demo6(){
        var str = '设置等级:<select id="cool"><option value="1级">1级</option><option value="2级">2级</option><option value="3级">3级</option></select>';
        box3.confirm(str,function(d){
            if(d){
                alert('你选择了'+document.getElementById('cool').value);
                alert('请点关闭按钮关闭我');
            } else {
                alert('我要关闭了');
                return false;
            }
            return true;
        },{cancel:'关闭'});
    }
    var box7 = new qbox({title:'有遮罩的提示',mask:true});
    function demo7(){
        box7.alert("就是这个样子");
    }
    function demo8(){
        new qbox().tips('这是提示',{
            second:2
        });
    }
</script>
</body>
</html>