如何使用 jQuery EasyUI Mobile 设计登录对话框？

如果你正在开发一个移动应用，你可能需要一个登录对话框让用户登陆。使用 jQuery EasyUI Mobile 可以轻松创建一个漂亮的登录对话框。

步骤1：引入必要的文件

在你的HTML页面中引入下面的CSS和JavaScript文件：

<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="jquery.easyui.mobile.css">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.easyui.mobile.js"></script>

请替换文件路径为你自己的路径。

步骤2：创建HTML代码

创建一个HTML div 元素，作为登录对话框的容器：

<div id="dlgLogin" class="easyui-dialog">
    <div style="padding: 20px 60px 20px 60px;">
        <form id="fmLogin" method="post">
            <div style="margin-bottom:10px">
                <input name="username" class="easyui-textbox" required="true" label="Username:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="password" class="easyui-passwordbox" required="true" label="Password:" style="width:100%">
            </div>
            <div style="text-align:center;padding:5px">
                <button type="submit" class="easyui-linkbutton" style="width:80px">Login</button>
            </div>
        </form>
    </div>
</div>

步骤3：使用 JavaScript 初始化登录对话框

在文档加载完成后，使用下面的JavaScript代码初始化登录对话框：

$(document).ready(function(){
    $('#dlgLogin').dialog({
        title: 'Login',
        width: 300,
        height: 250,
        closed: true,
        modal: true,
        buttons:[{
            text:'Login',
            iconCls:'icon-ok',
            handler:function(){
                $('#fmLogin').submit();
            }
        },{
            text:'Cancel',
            iconCls:'icon-cancel',
            handler:function(){
                $('#dlgLogin').dialog('close');
            }
        }]
    });
});

就这样，你的登录对话框已经创建成功了。