easyui如何使用一介绍的是accordion、dateBox、dialog、comobobox、messager的使用方法，说的比较肤浅，目前还在学习如何使用过程中。
<link rel="stylesheet" type="text/css" href="<%=jsPath %>/jquery-easyui-1.2.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=jsPath %>/jquery-easyui-1.2.3/themes/icon.css">
<script type="text/javascript" src="<%=jsPath %>/jquery-easyui-1.2.3/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=jsPath %>/jquery-easyui-1.2.3/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#myDiv').accordion( {
width : 400,
height : 200,
fit : false
});
var dateBox = $('#myDateBox').datebox({
currentText:'today',
closeText:'close',
disable:false,
required:true,
missingMessage:'required',
formatter:formatDate,
onSelect:function(da){
alert("123");
}
});
function formatDate(date){
var returnStr = 'null';
if(date instanceof Date){
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
returnStr = year+"年"+month+"月"+day+"日";
}
return returnStr;
}
$('#myDialog').dialog({
title:'my Dialog',
collapsible:true,
minimizale:true,
maxmizable:true,
resizable:true,
width:500,
toolbar:[
{
text:'Add',iconCls:'icon-add',handler:function(){
alert('add');
}
},'-',{
text:'Save',iconCls:'icon-save',handler:function(){
alert('save');
}
},'-',{
text:'Ok',iconCls:'icon-ok',handler:function(){
alert('Ok');
}
},'-',{
text:'Cancel',iconCls:'icon-cancel',handler:function(){
$('#myDialog').dialog('close');
}
}
],
buttons:[{text:'确定',iconCls:'icon-ok'},{text:'关闭',iconCls:'icon-close',handler:function(){
$('#myDialog').dialog('close');
}
}
]
});
});
$.messager.defaults={ok:'确定',cancel:'取消'};
function disableDateBox(){
$('#myDateBox').datebox('disable');
}
function enableDateBox(){
$('#myDateBox').datebox('enable');
}
function loadData(){
$('#myCombobox').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
}
function show(){
$.messager.show({
title:'show',
msg:'you raise me up',
showType:'show'
});
}
function slide(){
$.messager.show({
title:'slide',
msg:'let you go',
timeout:5000,
showType:'slide'
});
}
</script>
</head>
<body>
<!-- accordion -->
<div id="myDiv" border="true">
<!--必须要有title属性，否则不会包含到accordion中去-->
<div title="标题一" style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="标题二" selected="true"
style="padding: 10px;">content2</div>
<div title="标题三">content3</div>
</div>
<div id="myDiv2" class="easyui-accordion" style="width:400px;height:200px;" fit="false">
<div title="测试1">123</div>
</div>
<!--end accordion -->
<!-- datebox -->
<div>
<a href="#" onclick="disableDateBox()">disable</a> <a href="#" onclick="enableDateBox()">enable</a>
<input id="myDateBox"></input>
</div>
<!-- end datebox -->
<!-- combox -->
<div>
<a href="#" onclick="loadData()">loadData</a>
<select id="myCombobox">
<option selected="selected">===请选择===</option>
<option>苹果</option>
<option>橘子</option>
<option>梨子</option>
<option>香蕉</option>
</select>
</div>
<!--end combobox-->
<!-- toolbar -->
<div id="myDialog"></div>
<!-- end toolbar -->
<!-- messager -->
<div>
<a href="#" onclick="show()">show</a>
<a href="#" onclick="slide()">slide</a>
</div>
<!-- end messager -->
</body>
分享到：
相关推荐
1. **组件库**：EasyUI 提供了多种预定义的 UI 组件，如 `datagrid`（数据表格）、`form`（表单）、`dialog`（对话框）、`menu`（菜单）、`tabs`（标签页）等，这些组件具有良好的交互性和可定制性，可以满足不同...
资源名称：Jquery easyui 使用说明内容简介：Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的...
这个名为"EasyUI使用的demo"的项目是为初学者准备的一个实例，它展示了EasyUI在实际应用中的基本用法，包括系统布局、数据操作以及窗口间通信等多个方面。 1. **整体布局**：EasyUI提供了多种布局模式，如`grid`、`...
1. **EasyUI 的基本概念** EasyUI 提供了一套完整的组件库，包括布局、表格、表单、菜单、对话框等，这些组件都遵循一致的设计风格，使得开发人员可以快速构建符合现代设计标准的用户界面。 2. **安装与引入** 要...
在本文中，我们将深入探讨如何在EasyUI框架中有效地使用时间控件，以及如何解决时间格式化的问题。EasyUI是一个基于jQuery的轻量级前端开发框架，它提供了一系列丰富的组件，帮助开发者快速构建用户界面。时间控件是...
EasyUI图标大全是一款针对EasyUI框架的图标资源集合，提供了丰富的图标选择，使得开发者在构建基于EasyUI的用户界面时可以更加便捷地定制和美化应用。EasyUI是一个轻量级的JavaScript库，它基于jQuery，专门用于快速...
1. **jQuery EasyUI 主要组件** - **dialog**：对话框组件，用于弹出信息或者进行交互操作。 - **datagrid**：数据网格，用于展示结构化的数据，支持排序、分页、过滤等功能。 - **form**：表单组件，可与服务器...
1. **EasyUI 1.4.4 版本**：这是 EasyUI 的一个稳定版本，发布于2013年左右。虽然现在已经有了更新的版本，但1.4.4仍然广泛应用于许多项目中，因为它具有良好的兼容性和稳定性。在使用时，需要注意的是，较旧的版本...
使用tp+easyui 实现的一套库存管理系统，使用auth类实现权限管理。至于其他的功能都是基础的功能，用来入门。 使用tp+easyui 实现的一套库存管理系统，使用auth类实现权限管理。至于其他的功能都是基础的功能，用来...
1. **EasyUI 组件使用**：实例中可能包含了各种 EasyUI 组件的示例，如数据网格（datagrid）、表单（form）、对话框（dialog）、菜单（menu）等，这些组件的使用方式和配置可以通过查看源代码学习。 2. **CSS 和 ...
EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，帮助开发者快速构建用户界面。这个"easyui官方离线文档"包含了丰富的资源，包括demo、源码、演示以及针对现代前端框架如Vue、Angular和React的...
总的来说，"easyui_demo" 提供了一个了解和学习 EasyUI 的良好平台，对于初学者来说，可以通过分析和修改这些示例，快速掌握 EasyUI 的使用方法，并将其应用到自己的项目中。对于有经验的开发者，这些示例也可以作为...
使用easyUI创建一个CRUD的应用 使用easyUI创建一个CRUD DataGrid 使用easyUI展开行详细编辑form创建CRUD应用 使用jQuery easyUI 创建一个 RSS Feed阅读器 Drag and Drop easyUI 基础的拖动和放置 使用...
1. **基础概念**：首先，你会了解到 EasyUI 的核心概念，包括它的设计理念、组件体系和依赖关系。理解这些基础知识对于后续的学习至关重要。 2. **组件使用**：EasyUI 提供了多种组件，如 DataGrid（数据网格）、...
EasyUI Tree 使用方式详解 EasyUI Tree 是一款功能強大且灵活的树状选择控件，它可以实现多种选择方式，例如多选、checkbox 勾选、新增或删除节点、拖曳移动节点等。以下是 EasyUI Tree 的使用方式详解。 一、套件...
jQuery EasyUI 是一款基于 jQuery 的轻量级前端框架，它为开发者提供了丰富的组件和便捷的API，用于快速构建用户界面。1.3.6版本是该框架的一个稳定版本，包含了多个文档和代码资源，便于学习和开发。在这个压缩包中...
总的来说，"使用easyui表格数据动态生成饼图"是一个涉及前端数据展示和可视化综合能力的项目，它要求开发者熟悉EasyUI和ECharts这两个库，以及基本的JavaScript和JSON处理技能。通过这个过程，开发者不仅可以提升...
EasyUI InsdepTheme是一款基于EasyUI的皮肤美化版本，它为开发者提供了更加美观且自定义的界面风格。EasyUI是一个轻量级的JavaScript框架，主要用于构建Web应用的用户界面，它基于jQuery，提供了丰富的组件和易用的...
EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件和插件，如对话框、表单、菜单、树形结构等，帮助开发者快速构建用户界面。在本压缩包中，包含的是三套精美的 EasyUI 皮肤，这些皮肤可以改变 ...