基于jQury的UI框架 easyUI

最新推荐文章于 2024-05-13 09:37:53 发布

弗里曼的小伙伴

最新推荐文章于 2024-05-13 09:37:53 发布

阅读量2.4k

点赞数

分类专栏： WEB 文章标签： ui easyui jquery javascript js

本文链接：https://blog.csdn.net/sf2gis2/article/details/49248269

版权

基于jQury的UI框架 easyUI

sf2gis@163.com

2015年8月6日

2015年9月25日重构

2015年10月15日属性事件读写

1 目标：在页面构造类似桌面的控件，生成易于使用和布局的界面。

2 原理：使用jQuery和javascript、CSS、HTML构造不同标签的样式模仿桌面控件。

3 流程:加入easyUI的js库和css样式，构建控件。

3.1 加入css和js。

3.2 构建easyUI的容器：以easy-控件名为class的div。

示例：

<divclass="easyui-layout" style="height:100%;width:100%">

<div data-options="region:'north',title:'northtitle',split:true" style="height:20%">north</div>

<div data-options="region:'south',title:'southtitle',split:true" style="height:200px">south</div>

<div class="test">this iscenter</div>

</div>

3.3 设置属性：data-options兼容html5的属性（从V1.3开始）。

data-options中以JSON格式设置。

示例：

<div data-options="region:'south',title:'southtitle',split:true" style="height:200px">south</div>

4 方法：组织架构：jQuery标准插件格式。

参见：jQuery.docx插件部件。

所有控件由属性、方法和事件组成。

4.1 属性和事件作为控件的属性存在。事件以onEvent函数存在。两者的默认实现都在$.fn.plugin.defaults下定义。

参考：http://blog.csdn.net/baronyang/article/details/44706257

4.1.1属性读取：$(id).easyui-type（‘options’）[属性]

$('#showcharts').linkbutton('options')['selected']

4.1.2属性设置：$(id).easyui-type（｛属性：值｝）

$('#showcharts').linkbutton({

iconCls : 'icon-add',

text : '显示图表'

})

4.1.3事件设置：属性设置或bind（jquery模式）

4.1.3.1 属性设置（推荐）：$(id).easyuiType({事件名：响应函数})

$('#pg').propertygrid({onLoadSuccess:function(e){}});

4.1.3.2 jQuery绑定：$(id).常用事件（响应函数)或者$(id).bind(通用事件，响应函数)

$('#showcharts').click(showCharts);

$('#showcharts').bind('click',showCharts);

示例：

console.debug($.fn.dialog.defaults)

示例：linkbutton属性读写、事件绑定

//easyUITest.html

<!DOCTYPE html">

<!--

@author: sf2gis@163.com

@date: 2015-10-14 15:03

-->

<html>

<head>

<metacontent="text/html; charset=utf-8" />

<linkrel="stylesheet" type="text/css"

href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<linkrel="stylesheet" type="text/css"href="css/home.css" />

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<scripttype="text/javascript" src="js/home.js"></script>

<scripttype="text/javascript"src="js/highcharts.js"></script>

<scripttype="text/javascript"src="js/highcharts-3d.js"></script>

<title>Insert titlehere</title>

</head>

<body>

<a id="showcharts"class="easyui-linkbutton"

style="width: 100px; float: right;"

data-options="disabled:false,toggle:true,selected:false,iconCls:'icon-add'">显示图表</a>

$(document).ready(function() {

//toggle pie

// $('#showcharts').click(showCharts);

$('#showcharts').bind('click',showCharts);

});

function showCharts() {

if($('#showcharts').linkbutton('options')['selected']) {

$('#showcharts').linkbutton({

iconCls :'icon-add',

text : '显示图表'

});

} else {

$('#showcharts').linkbutton({

iconCls : 'icon-remove',

text : '隐藏图表'

});

}

</script>

</body>

</html>

4.2 所有的方法由$.fn.plugin.methods定义，可以扩展。格式为function(jq,args)。调用格式为$.pluginName(methodName,args)。

示例：

console.debug($.fn.dialog.methods)

参考：http://www.jeasyui.com/documentation/index.php

4.3 使用easy构建框架：href加载其它页面

加载的HTML页面只加载body中的内容；如果无HTML结构，则全部加载。因此推荐将加载页面去掉HTML结构。

加载JSP时，可以将JSP代码正常加入。

参考：

http://zhidao.baidu.com/link?url=TSl4cd-EofsVQKFqJvp7mGm3GO6mJaX6SnTjkTXeuLhkLHIfv3mutoF8qcgjk_RG29t8fGaETYx3u7u_vfphBK

4.4 图标iconCls:指定icon的class属性

所有的icon的class属性在themes\icon.css文件中指定。图标文件在themes\icons目录中。

参考：

http://zhidao.baidu.com/link?url=DMWiUGzMLbNkPDL33We0FzX27jpFdNqvb4dqYOafiV3rNDGQDP-A_ph-JKllkvDcgi2lC_g7x_PGRjXgKtIOuECAatWPXaJk13tzw44Ts7i

//icons目录

//icons.css

.icon-blank{

background:url('icons/blank.gif') no-repeat center center;

}

.icon-add{

background:url('icons/edit_add.png') no-repeat center center;

}

.icon-edit{

background:url('icons/pencil.png') no-repeat center center;

}

.icon-clear{

background:url('icons/clear.png') no-repeat center center;

}

.icon-remove{

background:url('icons/edit_remove.png') no-repeat centercenter;

}

.icon-save{

background:url('icons/filesave.png') no-repeat center center;

}

.icon-cut{

background:url('icons/cut.png') no-repeat center center;

}

.icon-ok{

background:url('icons/ok.png') no-repeat center center;

}

.icon-no{

background:url('icons/no.png') no-repeat center center;

}

.icon-cancel{

background:url('icons/cancel.png') no-repeat center center;

}

.icon-reload{

background:url('icons/reload.png') no-repeat center center;

}

.icon-search{

background:url('icons/search.png') no-repeat center center;

}

.icon-print{

background:url('icons/print.png') no-repeat center center;

}

.icon-help{

background:url('icons/help.png') no-repeat center center;

}

.icon-undo{

background:url('icons/undo.png') no-repeat center center;

}

.icon-redo{

background:url('icons/redo.png') no-repeat center center;

}

.icon-back{

background:url('icons/back.png') no-repeat center center;

}

.icon-sum{

background:url('icons/sum.png') no-repeat center center;

}

.icon-tip{

background:url('icons/tip.png') no-repeat center center;

}

.icon-filter{

background:url('icons/filter.png') no-repeat center center;

}

.icon-man{

background:url('icons/man.png') no-repeat center center;

}

.icon-lock{

background:url('icons/lock.png') no-repeat center center;

}

.icon-more{

background:url('icons/more.png') no-repeat center center;

}

.icon-mini-add{

background:url('icons/mini_add.png') no-repeat center center;

}

.icon-mini-edit{

background:url('icons/mini_edit.png') no-repeat center center;

}

.icon-mini-refresh{

background:url('icons/mini_refresh.png') no-repeat centercenter;

}

.icon-large-picture{

background:url('icons/large_picture.png') no-repeat centercenter;

}

.icon-large-clipart{

background:url('icons/large_clipart.png') no-repeat centercenter;

}

.icon-large-shapes{

background:url('icons/large_shapes.png') no-repeat centercenter;

}

.icon-large-smartart{

background:url('icons/large_smartart.png') no-repeat

最低0.47元/天解锁文章

弗里曼的小伙伴

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
基于jQury的UI框架 easyUI

基于jQury的UI框架 easyUIsf2gis@163.com2015年8月6日2015年9月25日重构2015年10月15日属性事件读写1 目标：在页面构造类似桌面的控件，生成易于使用和布局的界面。2 原理：使用jQuery和javascript、CSS、HTML构造不同标签的样式模仿桌面控件。3 流程:加入easyUI的js库和css样式，构建控件。3.1
复制链接

扫一扫