easyUI学习笔记_基础

来源：互联网发布：随机梯度下降算法讲解编辑：程序博客网时间：2024/06/05 17:03

1.easyUI介绍

easyui是一种基于jQuery的用户界面插件集合。【要想操作EasyUI,必须先导入JQ的核心JS文件】

2.easyUI外部文件引入

easyui.css
EasyUI的核心css文件 导入css文件的时候，需要将图片目录一并导入
icon.css
EasyUI图标相关的css文件 导入css文件的时候，需要将图片目录一并导入
demo.css
用户自定义的样式文件，开发的时候可以不用导入
jquery.min.js
它是jquery的核心js文件，只不过处于安全考虑隐藏了其版本号！
jquery.easyui.min.js
它是EasyUI核心的js文件，它必须放在jquery的核心js文件之后！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>EasyUI模板代码</title>        <link rel="stylesheet" type="text/css" href="css/easyui.css">        <link rel="stylesheet" type="text/css" href="css/icon.css">        <script type="text/javascript" src="js/jquery.min.js"></script>        <script type="text/javascript" src="js/jquery.easyui.min.js"></script>    </head>    <body>    </body></html>

3.easyUI的组件使用方式

3.1easyUI组件的创建

HTML方式创建组件(静态)

定义一个class属性，值为：easyui-组件名称

<标签名 id="w" class="easyui-组件名称" data-options="属性名1:'属性值1',属性名:'属性值2',...,属性名n:'属性值n'">            The window content.</标签名>

JS方式创建组件(动态)

先得定义一个div（显示组件）
然后使用js代码
$(“选择器”).组件名称({
…
})

<标签名 id="btn"></标签名>$("#btn").组件名称({    属性名1:'属性值1',    属性名2:'属性值2',    ...    属性名n:'属性值n'    });

3.2easyUI事件的添加

定义的位置：在创建组件的内部

$("#p").panel({    //定义属性    title:"这是我的一个Panel",    width:300,    height:150,    closable:true,    tools:[{            iconCls:'icon-add',            handler:function(){alert('add')}        },{            iconCls:'icon-edit',            handler:function(){alert('edit')}        }],    //添加一个事件            onBeforeClose:function(){                alert("面板即将关闭……");            }        });

3.3easyUI方法的调用

<input type="button" value="设置新标题">    //为这个按钮绑定一个事件，操作EasyUI相关的方法    //书写一个方法(设置一个新的标题)【方法在创建组建的外部操作的，方法需要在手册中查询即可】    $("input:first").click(function(){        //alert("abc");        //$("选择器").组件名("方法名","方法参数");        $("#p").panel("setTitle","新标题Niubility");    });

4.easyUI组件之window

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>EasyUI入门_window组件</title>        <link rel="stylesheet" type="text/css" href="css/easyui.css">        <link rel="stylesheet" type="text/css" href="css/icon.css">        <script type="text/javascript" src="js/jquery.min.js"></script>        <script type="text/javascript" src="js/jquery.easyui.min.js"></script>    </head>    <body>        <!--             属性介绍                 class：定义的方式easyui-组件名称                title：组件的标题                data-options：定义所有EasyUI的样式都放到这个属性中去(style里面的内容都可以放进去)【多个样式之间使用逗号隔开】                iconCls:'icon-save' ：定义了组件的图标         -->        <div id="w" class="easyui-window" title="商品信息" data-options="iconCls:'icon-save',width:'500px',height:'200px',padding:'10px'">            The window content.        </div>    </body></html>

阅读全文

0 0