jquery easyui学习笔记(1)
例子，jquery easyui用法实例。
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<%--
1、引用jquery这里是jquery-1.8.0.min.js版本
2、jquery.easyui.min.js：easyui的主模块，该模块中包含了eastui中常用的控件，如dialog,messager等
3、themes/default/easyui.css：每个主题下的总样式文件，每个主题下有很多个样式文件，该文件包含了所有文件的样式，如果要单独使用某个控件的样式也可以单独引用该控件对应的样式
4、themes/con.css：控件图片的样式。
5、Scripts/locale/easyui-lang-zh_CN.js：引用中文语言包
6、easyloader.js：动态加载js,css文件已经加载外部的js或则css文件
注意：如果不用使用easyloader.js最好将1,2,3,4,5全部引用，而1,2是必须引用才能使用easyui,3,4,5如果不引用样式会显示不正确。
--%> www.jbxue.com
<script src="/Scripts/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/Scripts/easyloader.js" type="text/javascript" charset="utf-8"></script>
<%--<script src="/Scripts/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<link href="/Scripts/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/Scripts/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>--%>
<script charset="utf-8" language="javascript" type="text/javascript">
// $(function() {
// $("#scriptdd").dialog({
// title: "我是用JS弹出来的",
// collapsible: true,
// minimizable: true,
// maximizable: true,
// resizable: true,
// toolbar: [{
// text: '编辑', iconCls: 'icon-edit', handler: function() { alert('edit'); }
// }, { text: '删除', iconCls: 'icon-del'}],
// buttons: [{ text: '保存' }, { text: '取消', handler: function() { alert('不能删除'); } }],
// width:400,
// height:300
// });
// });
//只引用easyloader//通过 easyloader.load可以动态加载css,js文件 easyloader.load(文件名称或者文件数组,回调函数)
// easyloader.load('dialog', function() {
// $("#scriptdd").dialog({
// title: "我是用JS弹出来的",
// collapsible: true,
// minimizable: true,
// maximizable: true,
// resizable: true,
// toolbar: [{
// text: '编辑', iconCls: 'icon-edit', handler: function() { alert('edit'); }
// }, { text: '删除', iconCls: 'icon-del'}],
// buttons: [{ text: '保存' }, { text: '取消', handler: function() { alert('不能删除'); } }],
// width: 400,
// height: 300,
// modal:true
// });
//using 是easyloader.load的简写
using(['dialog', 'messager'], function() {
$("#scriptdd").dialog({
title: "我是用JS弹出来的",//标题
collapsible: true,//是否显示隐藏或折叠按钮，默认true
minimizable: true,//是否显示最小化，默认false
maximizable: true,//是否显示最大化默认是false,
resizable: true,//是否允许调整大小//默认false
toolbar: [{
text: '编辑', iconCls: 'icon-edit', handler: function() { alert('edit'); }
}, { text: '删除', iconCls: 'icon-del'}],
buttons: [{ text: '保存' }, { text: '取消', handler: function() { alert('不能删除'); } }],//要显示的工具栏
width: 400,//宽度
height: 300,//高度
modal: true//是否显示背景遮罩，该属性属于window中的属性,dialog继承至window
});
$.messager.alert('标题','保存成功')
});
</script>
<title>Index</title>
</head>
<body>
<div>
<!--在元素中直接写元素的属性页能实现easyui效果-->
<div id="dd" class="easyui-dialog" style="width:400px;height:200px;" >
my first easyui
</div>
<div id="scriptdd">我是用JS弹出来的</div>
</div>
</body>
</html>
您可能感兴趣的文章：
JQuery EasyUI使用笔记分享
jquery easyui学习笔记(1)
jquery easyui easyui-datetimebox 取消用户输入
jquery easyui通过class方式设置dialog
jquery easyui表单验证实例学习
Jquery easyui入门教程(1)
Jquery EasyUI的添加，修改，删除，查询等基本操作介绍
jQuery的UI组件 EasyUI
Jquery 学习笔记（一）
jquery easyui中combobox设为只读