EasyUI 学习与总结

来源：互联网发布：b2c商城网站源码下载编辑：程序博客网时间：2024/05/18 01:02

EasyUI 简介

easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能.
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。

EasyUI 使用

去官网下载即可：EasyUI 下载链接

需要引入下面css和js方可使用

<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css" />        <link rel="stylesheet" type="text/css" href="css/themes/icon.css" />        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>        <script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>

学习历程

EasyUI主要由css和js两种渲染方式，主要以js渲染为主。而layout布局常用css，方便渲染，通过看视频的一些知识点知道重点需要学什么，然后参照EasyUI文档进行学习，不懂的地方就观看视频。主要学习一些方法、属性和事件等，写法基本一致，不多说。

登录验证

<style type="text/css">        #login{            padding-top: 6px;        }        p{            padding: 0 0 4px 25px;        }    </style>    <body>        <div id="login">            <p>管理员账号：<input id="manager" type="text" /></p>            <p>管理员密码：<input id="password" type="password" /></p>            <div>                <a id="btn" class="easyui-linkbutton" style="width: 40px;" href="#">登录</a>            </div>        </div>    </body></html><script type="text/javascript">    $("#login").dialog({        title: '管理员登录',        iconCls:'icon-lock',        width: 300,        height: 150,        modal: true,        collapsible:true,        buttons:'#btn',    })    $("#manager").validatebox({        required:true    })    $("#password").validatebox({        required:true    })    $("#btn").click(function(){        if(!$("#manager").validatebox('isValid')){            $("#manager").focus();        }else if(!$("#password").validatebox('isValid')){            $("#password").focus();        }else{            alert(3);        }    })</script>

总结

知道EasyUI的基本使用，要学习融入实际的开发中，才有学习它的价值，不然也是浪费时间，明天除了进行基础学习并且按照需求文档开发，严格要求自己。独立思考很重要，要学习如何独立解决问题。

阅读全文

0 0