实例讲解easyUI中怎么使用窗口messager
- 学习交流
- 关注:7.13K次
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")();这两句代码的意思是获取表单中输入的值。
特别提示
要记得代码要输入正确,关键地方是失之毫厘差之千里的。
- 文章版权属于文章作者所有,转载请注明 https://miaozhigu.com/zh-hans/jy/jiaoliu/l7x9z5.html