您的位置：首页 > 产品设计 > UI/UE

easyui 入门

2015-10-24 15:47 459 查看
http://www.cnblogs.com/tangge/p/3214496.html

1.页面引用.

jquery,easyui,主题easyui.css,图标ico.css,语言zh_CN.js

<script src="Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>

<script src="Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>

<link href="Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />

<link href="Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />

<script src="Scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>


2.parser组件panel组件

<body>

<div id="p" class="easyui-panel" title="My Panel"

style="width: 500px; height: 150px; padding: 10px; background: #fafafa;"

data-options="iconCls:'icon-save',closable:true,

collapsible:true,minimizable:true,maximizable:true">

<p>panel content.</p>

<p>panel content.</p>

</div>

<input type="button" name="" onclick="$('#p').panel('open')" value="显示" />

<input type="button" name="" onclick="$('#p').panel('close')" value="关闭" />

<input type="button" name="" onclick="$('#p').panel('destroy')" value="销毁" />

</body>







3.Form表单的验证(validate)提交
隐藏行号 复制代码 ？index.html

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title></title>


<script src="Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>


<script src="Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>


<link href="Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />


<link href="Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />


<script src="Scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>


<script type="text/javascript">


var LoginAndRegDialog;


var LoginInputForm;


$(function () {


//对话框dialog


LoginAndRegDialog = $("#LoginAndRegDialog").dialog({


closable: false,


modal: true,


buttons: [{


text: '登录',


iconCls: 'icon-ok',


handler: function () {


//***先验证（根据自己的需求）


if (LoginInputForm.form('validate')) {


//表单form提交


LoginInputForm.submit();


}


}




}, {


text: '取消',


handler: function () {


$('#LoginInputForm').form('clear');


}


}]


});




//表单的提交要求


LoginInputForm = $('#LoginInputForm').form({


    url: '/Login.ashx',


    onSubmit: function () {


        // do some check   


        // return false to prevent submit;   


    },


    success: function (data) {


        //alert(data);


        console.info(data);


        $.messager.show({


title: '提示',


msg: data


})


    },


});












})


</script>


</head>


<body>




<div id="LoginAndRegDialog" title="用户登录" style="width: 250px; height: 200px;">


<form id="LoginInputForm" method="post">


<table style="margin-top: 20px">


    <tr>


        <th>用户名：</th>


        <td>


<!--直接使用验证规则class="easyui-validatebox"-->


<input name="name" class="easyui-validatebox" data-options="required:true" />


        </td>


    </tr>


    <tr>


        <th align="right">密码：</th>


        <td>


<input name="password" type="password" />


        </td>


    </tr>


</table>


</form>


</div>




</body>


</html>




隐藏行号 复制代码 ？Login.ashx

public void ProcessRequest(HttpContext context)


{


context.Response.ContentType = "text/html";


string username = context.Request["name"];


string password = context.Request["password"];


context.Response.Write(username + "你好,你的密码是：" + password);




}





jQuery EasyUI 1.3 中文帮助手册

easyUI1.3.chm.7z


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航