实例讲解easyUI中怎么使用窗口messager

栏目: 学习交流 / 发布于: / 人气:7.77K

easyUI是最为常用的WEB前端开发框架之一，也是在众多前端框架中比较容易学习的。easyUI中包含很多的组件，将组件整合到一起可以开发出不同的前端页面。现在我们以实际例子讲解easyUI中如何使用消息窗口messager。

操作方法

（01）新建文档双击桌面上的Dreamweaver软件图标，一般学习前端都是用Dreamweaver软件。然后在软件主界面中找到：【文件】---【新建】---【php类型】文档。

（02）引入4个js文件首选下载并导入easyUI文件夹到站点或者www里面，找到文件夹中的4个js文件并拉到head头部内，4个js文件如下所示：<script type="text/javascript" src="easyui/"></script><script type="text/javascript" src="easyui/"></script><link rel="stylesheet" type="text/css" href="easyui/themes/"/><link rel="stylesheet" type="text/css" href="easyui/themes/default/"/>

（03）登陆界面然后在body主题中随便写个登陆界面。<body style="background:#C93;"> 用户名：<input name="username" type="text" id="username" /> <br/><br/> 密  码：<input name="password" type="password" id="password" /><br/> <input type="submit" value="登陆" onclick="loginCheck();" /></body>

（04）然后输入脚本代码，判断是否输入用户名和密码的话，可以采用消息窗口messager代码来进行判断，具体如下所示：<script type="text/javascript"> function loginCheck() {var username=$("#username")();var password=$("#password")();if(username==""||password==""){$t("消息提示","请输入用户名和密码！","error");} }</script>

（05）预览方法在Dreamweaver中找到【地球图标】，点击旁边的倒立三角形，选择【预览在360se】在360浏览器中预览。

（06）预览结果也可以在不同的浏览器中预览，显示的结果如下图所示。

（07）代码解析$t("操作提示","登录失败，用户名和密码不能为空！","error");是messager的使用方法，有三个参数，第一个参数是提示文字，第二个参数是提示的方法；第三个参数是icon，可以取值error、info、question、warning；

（08）var username=$("#username")();var password=$("#password")();这两句代码的意思是获取表单中输入的值。

特别提示

要记得代码要输入正确，关键地方是失之毫厘差之千里的。

Tags：EasyUI messager 实例讲解窗口