博客

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

  • Post category:jquery

以下是使用jQuery EasyUI Mobile设计登录对话框的完整攻略：

  1. 首先，需要在HTML文件中引入jQuery EasyUI Mobile库。可以通过以下代码实现：
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery EasyUI Mobile Example</title>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/mobile.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
  1. 接下来，需要在HTML中添加一个<div>元素，并在其中添加一个<form>元素，用于制作登录对话框可以通过以下代码实现：
<div id="dlg" class="easyui-dialog" style="width:300px;height:200px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
  <form id="fm" 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>
  </form>
</div>
<div id="dlg-buttons">
  <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="submitForm()">Login</a>
  <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="closeDialog()">Cancel</a>
</div>

在这个代码中，我们使用了easyui-dialog类来定义对话框的样式，easyui-textbox和easy-passwordbox类用于定义文本框和密码框的样式。同时，我们添加了一个<form>元素，用于包含登录表单。在这个示例中，我们使用了jQuery EasyUI Mobile内置的样式。

3.后需要在JavaScript中添加代码以正确显示登录对话框。通过以下代码实现：

function openDialog() {
  $('#dlg').dialog('open').dialog('setTitle', 'Login');
  $('#fm').form('clear');
}

function closeDialog() {
  $('#dlg').dialog('close');
}

function submitForm() {
  $('#fm').form('submit', {
    url: 'login.php',
    onSubmit: function() {
      return $(this).form('validate');
    },
    success: function(result) {
      var result = eval('(' + result + ')');
      if (result.success) {
        location.href = 'index.php';
      } else {
        $.messager.alert('Error', result.msg, 'error');
      }
    }
  });
}

这样，就可以成功使用jQuery EasyUI Mobile设计登录对话框了。

以下是两个示例说明：

  1. 示例1：使用jQuery EasyUI Mobile设计登录对话框
<div id="dlg" class="easyui-dialog" style="width:300px;height:200px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
  <form id="fm" 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>
  </form>
</div>
<div id="dlg-buttons">
  <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="submitForm()">Login</a>
  <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="closeDialog()">Cancel</a>
</div>

在这个示例中，我们制作了一个登录对话框。easyui-dialog类用于定义对话框的样式，easyui-textbox和easyui-password类用于定义文本框和密码框的样式。同时，我们添加了一个<form>元素，用于包含登录表单。在这个示例中，我们使用了jQuery EasyUI Mobile内置的样式。

  1. 示例2：使用jQuery EasyUI Mobile设计登录对话框并自定义主题
<div id="dlg" class="ui-dialog" style="width:300px;height:200px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons" data-options="iconCls:'icon-login',theme:'mytheme'">
  <form id="fm" 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>
  </form>
</div>
<div id="dlg-buttons">
  <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="submitForm()">Login</a>
  <a href="#" class="ui-linkbutton" iconCls="icon-cancel" onclick="closeDialog()">Cancel</a>
</div>

在这个示例中，我们使用了data-options属性来自定义主和图标。data-options属性用于设置控制组的主题和图标。同时，我们添加了一个<form>元素，用于包含登录表单。在这个示例中，我们将登录对话框的主题设置为自定义主题，并制作了一个登录对话框。

Tags: