EasyUI简单入门:easyUI使用的两种方式
easyUI的使用主要有两种方式,一种是在HTML标签中声明class来使用easyUI样式,一种是编写js代码。这两种方式,我都会介绍到,先来看第一种方式。
1、在HTML标签中声明class来使用easyUI样式
2、使用JS来控制样式
<%-- Created by IntelliJ IDEA. User: mac Date: 2021/3/2 Time: 下午5:29 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!-- 引入JQuery --> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1/jquery.min.js"></script> <!-- 引入EasyUI --> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1/jquery.easyui.min.js"></script> <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 --> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1/locale/easyui-lang-zh_CN.js"></script> <!-- 引入EasyUI的样式文件--> <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1/themes/default/easyui.css" type="text/css"/> <!-- 引入EasyUI的图标样式文件--> <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1/themes/icon.css" type="text/css"/> <html> <head> <title>Title</title> </head> <body> <%--通过class改变样式--%> <a class="easyui-linkbutton">超链接</a> <%--通过data-options给样式加上图标--%> <a class="easyui-linkbutton" data-options="iconCls:'icon-add'">超链接</a> <%--js控制样式--%> <a id="btn">超链接</a> </body> <script type="text/javascript"> $("#btn").linkbutton({ iconCls:'icon-add' }) </script> </html>