jquery easyui学习笔记(1)

发布时间:2020-07-30编辑:脚本学堂
本文介绍了jquery easyui的使用方法,有关jquery easyui的实例代码,有需要的朋友参考下。

例子,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.jb200.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>