代码改变世界

jQuery easyUI窗口的用法

2016-11-28 10:31  宇航员舒克  阅读(947)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- EasyUI框架包 -->

<!-- 1.导jQuery的JS包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<!-- 2.导入css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<!-- 3.导入图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
<!--4. EasyUI的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<!-- 5.本地语言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>


<script type="text/javascript">
$(function()
    {
            //alert("前面普通对话框，阻塞代码运行");    
        
            //弹出对话框
            //$.messager.alert('警告','警告消息！EasyUI非阻塞式对话框','warning',
            //function(){
                //回调函数，当窗口点击确定关闭时触发
            //    alert("回调函数被触发");
                
        //    }                    
        //);
    
            //alert("后面普通对话框，阻塞代码运行");
    $("#bt1").click(
    function()
    {
        //弹出确认对话框
        $.messager.confirm("确认","想好没亲",
        function(r)
        {
            if(r)
                {
                //执行删除
                alert("删除成功");
                }
            else
                {
                alert("取消删除");
                }
        }
        );
    }    
    );        
    
    //输入对话框
    $("#bt2").click(
        function()
        {
            //输入对话框
            $.messager.prompt("输入框","请输入内容",
            function(r)
            {
                if(r)
                    {
                        alert("你输入的内容是："+r);
                    }
            }
            );
            
        }
    );
    
    
    //进度对话框
    $("#bt3").click(
    function()
    {
        //进度条
        $.messager.progress(
        {
            title:"进度条",
            msg:"请稍后",
            text:"正在加载",
            interval:"100",
        }        
        );

    }    
    );
    
    //气泡对话框
    $("#bt4").click(
    function()
    {
        $.messager.show(
        {
            title:"这位同学：",
            msg:"别上网了，你妈叫你回家吃饭了",
            timeout:5000,
            height:200
            
        }        
        );
    }
    
    );
    
        
    ////打开窗口
    $("#bt5").click(
    function()
    {
        //调用窗口的方法
        $("#win1").window("open",{//open位方法名，{}内的表示以options的方式添加的属性样式
            width:100,
            height:400
        }        );
    }
    
    );
    
    //关闭窗口
    $("#bt6").click(
    function()
    {
        $("#win1").window("close");
    }
    );
    
    //js形式的窗口
    $("#bt7").click(
    function()
    {
        //新建窗口
        $("#win2").window(
        {
            width:400,
            height:300,
            title:"窗口标题",
            iconCls:"icon-save",
            content:"显示的内容..................你好啊"
        }        
        );
    }
    );
    
    //调整窗口大小
    $("#bt8").click(
            function()
            {
                $("#win1").window("resize",{
                    width:500,
                    height:400
                }        
                );
            }
            );
    
    //构造按钮
    $("#lb2").linkbutton(
    {
        text:"添加",
        width:80,
        iconCls:"icon-add"
    }
    );
    
    $("#lb1").click(
    function()
    {
        alert("按钮被点击");
    }
    );

    //dialog对话窗口
    $("#bt9").click(
    function()
    {
        $("#dl2").dialog({
            title:"窗口",
            width:"400",
            height:"200",
            content:"你大爷，是你二爷",
            toolbar:[{
                      text:"添加",            
                      iconCls:"icon-add",
                      handler:function(){
                          alert("添加数据");
                      }
                     },
                     {
                         text:"取消",
                         iconCls:"icon-clear"
                     },    
                    
                     
                     ],                                          
                     buttons:[
                              {
                                  text:"确定"
                              },
                              
                              {  text:"取消"
                              }
                              ]
                     
        });        
    }
    );
    
}        
);

</script>

</head>
<body>
<button id="bt1">删除</button>
<button id="bt2">输入</button>
<button id="bt3">进度条</button>
<button id="bt4">气泡</button>
<br><br>
<div id="win1" class="easyui-window" type="窗口1" style="height:200px; width:400px;"
 data-options="{collapsible:false,closed:true}"><!-- {}可有可没有 -->
窗口的内容
</div>
<button id="bt5">打开窗口</button>
<button id="bt6">关闭窗口</button>

<button id="bt7">新建窗口</button>
<div id="win2"></div>

<button id="bt8">调整窗口大小</button>
<button id="bt9">dialog对话框口</button>

<br><br>

<!-- date-options里面添加属性的东西 -->
<a id="lb1" href="#" class="easyui-linkbutton"
data-options="inconCls:'icon-search'"
style="width:80px"
>搜索</a>
<a id="lb2" href="#"></a>
<div id="dl1" class="easyui-dialog" title="窗口" style="width:400px;height:200px"
data-options="{
toolbar:[{text:'添加',iconCls:'icon-add',handler:function(){alert('你大爷')}},
{text:'删除',iconCls:'icon-save'},{text:'保存',iconCls:'icon-delete'}],
buttons:[{text:'确定'},{text:'取消',handler:function(){$('#dl1').dialog({closed:true})}
}]
}">
测试对话窗口</div>

<div id="dl2">21231</div>

<!-- panel -->
<div id="pan1" class="easyui-panel" title="面板" style="width:400px;height:200px"
data-options="collapsible:true,href:'test.html'">这是一个面板</div>
</body>
</html>