程序员开发实例大全宝库

网站首页 > 编程文章 正文

用extjs写一个登录界面（用javascript写一个登录页面）

zazugpt 2024-09-06 02:03:39 编程文章 161 ℃ 0 评论

先上效果图：

这是一个用ext3.2.0、js、html、css写的一个还算好看的登录界面。

源代码已上传，下载地址请点击：点击打开链接

其主要难点在如何使用extjs来画一个界面，接下来我们就主要看一下其中的html和js吧：


  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>登录界面</title>
  7. <link rel="stylesheet" type="text/css" href="ext3.2.0/resources/css/ext-all.css"/>
  8. <script type="text/javascript" src="ext3.2.0/adapter/ext/ext-base.js"></script>
  9. <script type="text/javascript" src="ext3.2.0/ext-all.js"></script>
  11. <script type="text/javascript" src="login.js"></script>
  12. <script type="text/javascript" src="loginToDo.js"></script>
  14. <link rel="stylesheet" type="text/css" href="login.css"/>
  15. </head>
  16. <body onkeydown="keyLogin(event);">
  17. </body>
  18. </html>

这里面主要是导入页面所需的js和css文件，当然还有一个亮点就是body标签上的 onkeydown事件属性，主要用于监听键盘实现我们js中的enter键提交功能。然后看一下extjs的语言风格吧：


  2. Ext.onReady(function () {
  4. // 创建“登录”面板
  5. var loginPanel = new Ext.Panel({
  6. // 设置面板的位置、宽高、样式
  7. // 注意：此处我用的是相对布局relative（用于比较两者的区别）
  8. id: 'loginPan',
  9. x: 363,
  10. y: 0,
  11. width: 396,
  12. height: 480,
  13. baseCls: '',
  14. defaults: {
  15. border: false
  16. },
  17. // 添加面板里面的物品
  18. items: [
  19. {
  20. // 第一件：logo图
  21. id: 'loginLogo',
  22. height: 160,
  23. frame: false,
  24. bodyStyle: 'padding-top:10px',
  25. html: '<img src="images/fly_icon.png">'
  26. },
  27. {
  28. // 第二件：登录的表单
  29. id: 'loginForm',
  30. defaultType: 'textfield',
  31. frame: false,
  32. defaults: {
  33. allowBlank: false
  34. },
  35. // 添加表单里面的物品：两个输入框
  36. items: [
  37. {
  38. id: "username",
  39. cls: "text_field",
  40. inoutType: 'text',
  41. width: 330,
  42. height: 28,
  43. blankText: '账号不能为空',
  44. emptyText: '请输入账号',
  45. },
  46. {
  47. id: "password",
  48. cls: "text_field",
  49. inputType: 'password',
  50. width: 330,
  51. height: 28,
  52. emptyText: '请输入密码',
  53. blankText: '密码不能为空',
  54. }]
  55. },
  56. {
  57. // 第三件：忘记密码
  58. id: 'loginForget',
  59. html: "<a href='forget_pwd.html' target='_blank'>忘记密码？</a>",
  60. },
  61. {
  62. // 第四件：登录按钮
  63. id: 'loginBtn',
  64. html: '<button id="btn_login">马上登录</button>',
  65. }
  66. ],
  67. });
  69. // 创建“注册”面板
  70. var registerPanel = new Ext.Panel({
  71. // 设置面板的位置、宽高、样式
  72. // 注意：此处我用的是绝对布局absolute（用于比较两者的区别）
  73. id: 'registerPan',
  74. x: 0,
  75. y: 46,
  76. width: 800,
  77. height: 389,
  78. baseCls: '',
  79. layout: 'absolute',
  80. defaults: {
  81. border: false
  82. },
  83. // 添加面板里面的物品
  84. items: [
  85. {
  86. // 第一件：标题
  87. id: 'registerTitleLabel',
  88. xtype: 'label',
  89. x: 47,
  90. y: 50,
  91. text: '还没有账号？',
  92. }, {
  93. // 第二件：正文
  94. id: 'registerContentLabel',
  95. xtype: 'label',
  96. x: 47,
  97. y: 135,
  98. text: '这是在注册面板下面的正文内容。里面的内容可以随便写，比如当前我们再一个窗口下面建立了两个面板。而两个面板的布局是分别用相对布局和绝对布局来实现的。相比较而言，我觉得用绝对布局会简单粗暴，更直接，更方便。总之，你们自己体会一下吧。',
  99. }, {
  100. // 第三件：注册按钮
  101. id: 'registerBtn',
  102. xtype: 'button',
  103. x: 47,
  104. y: 280,
  105. html: '<button id="btn_register" >马上注册</button>'
  106. }],
  108. });
  110. // 创建窗口，从而让内容达到居中效果
  111. var centerWindow = new Ext.Window({
  112. baseCls: '',
  113. width: 800,
  114. height: 480,
  115. layout: 'absolute',
  116. closable: false,
  117. draggable: false,
  118. resizable: false,
  119. shadow: false,
  120. border: false,
  121. items: [registerPanel, loginPanel],
  122. });
  124. // 显示窗口
  125. centerWindow.show();
  127. // 添加浏览器缩放自动居中效果
  128. Ext.EventManager.onWindowResize(function () {
  129. centerWindow.center();
  130. });
  131. });

这里要说的是：1、注意给属性加标记，能用id就用id，cls只是一个封装过的class，和原生的class还是有区别的，比如给一个cls元素的height、padding定义样式并不起作用。详见：关于extjs中的cls ≠ class

2、在ext中建议用绝对定位，由于它底层是一个个的table、div块，如果用相对定位的话偶尔是有偏差的，所以还是绝对定位方便直接啊。

3、window自带居中效果，可以利用这一点让元素在屏幕中居中。但是当浏览器缩放的时候，这个window并不会动，每次都需要重新刷新一下才会改变一下。所以，在以上代码的最后我们用给这个centerWindow添加了一个窗口自适应居中的效果。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表