Jquery EasyUI学习(一)之dialog对话框的学习

在学习Jquery EasyUI之前大家先要下载所需的东东哦！

jquery easyUI下载地址：http://www.jeasyui.com/download/index.php

Jquery easyUI中文API地址：http://api.btboys.com/easyui/#

                                               http://www.phptogether.com/juidoc/

现在我可以学习Jquery EasyUI了：

第一步引入所需的js和css文件：

    <%--jquery基础库--%>
    <script src="../jquery-easyui-1.3.1/jquery-1.8.0.min.js" type="text/javascript"></script>
   <%-- EasyUI基础库--%>
    <script src="../jquery-easyui-1.3.1/jquery.easyui.min.js" type="text/javascript"></script>
   <%-- EsayUI样式表--%>
    <link href="../jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet" type="text/css" />
   <%-- EasyUI中的图片样式--%>
    <link href="../jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" type="text/css" />
   <%-- EasyUI的国际化中文包--%>
    <script src="../jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

第二步html代码：

 <form id="form1" runat="server">
    <div style="">
        <div style="padding-left: 100px;">
            今天开始学习easyUI</div>
         <div class="easyui-dialog" title="第一个dialog" style="height: 200px; width: 400px">
            第一个dialog!这个通过class属性实现</div>
        <div id="div1" title="第二个dialog" style="height: 200px; width: 400px">
            第二个dialog!这个通过jquery实现</div>
        <div id="div2" title="第三个dialog" style="height: 200px; width: 400px; text-align: center">
            用户名:<input id="Text1" type="text" /><br />
            密码:<input id="Text2"  type="password" />
        </div>
        <div id="div4"  title="第四个dialog" style="height: 200px; width: 400px; text-align: center">
        这个dialog可以最大化和最小化!可以折叠，也可以自定义拖拽大小！
        </div>
    </div>
    </form>

第三步jquery代码：

    <script type="text/javascript">
        $(function () {
            $('#div1').dialog();
            //注意：dialog方法中参数形式，它是写在{}中的
            $('#div2').dialog({
            //工具栏
                toolbar: [{
                    text: '新增',
                    iconCls: 'icon-add',
                    handler: function () {
                        alert('add');
                    }
                }, {
                    text: '保存',
                    iconCls: 'icon-save',
                    handler: function () {
                        alert('save');
                    }
                }], 
               //按钮
                buttons: [{
                    text: '确定',
                    iconCls: 'icon-ok',
                    handler: function () {
                        alert("用户名：" + $('#Text1').val() + "\n密码：" + $('#Text2').val());
                    }
                }, {
                    text: '取消',
                    handler: function () {
                        $('#div2').dialog('close');
                    }
                }]

            });
            $('#div4').dialog({
            minimizable: true,//最小化，默认false
            maximizable: true, //最大化，默认false
            collapsible: true, //可折叠，默认false
            resizable: true//可缩放，即可以通脱拖拉改变大小，默认false
            });
        });
    </script>

 

我也是刚开始学习jqueryEasyUI，写的不对的地方，还请大家多多包涵，也欢迎大家加入群：288458881进行讨论！