jQuery Easy UI之旅---基础篇

　　最近因为项目需要，开始学习jQuery EasyUI。在此记录下我的学习之旅。

　　废话，不所说，先上代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="js/EasyUI/easyloader.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    <script type="text/javascript" src="js/EasyUI/jquery.easyui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/pagination.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/searchbox.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/menubutton.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/menu.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/linkbutton.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/progressbar.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/tooltip.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/icon.css" />
    <style type="text/css">
        #tbody_content td
        {
            border:1px solid black;
            text-align:center;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //动态加载js文件
            $("#btnShow").click(function () {
                var name = $("#txt_name").val();
                using("../Home/home.js", function () {
                    showName(name);
                });
            });
            //拖动
            $("#div1").draggable(
            {
                handle:'#title',
                proxy: 'clone',
                revert: false,//设置为true，则拖动停止之后返回原来的位置
                cursor: 'auto',
                //axis:'h',//设置拖动的方向，v是只能垂直拖动，h是只能水平拖动,null则可以同时在水平以及垂直方向拖动，默认为null
                onStartDrag: function () {
                    $(this).draggable('options').cursor = 'not-allowed';
                    //$(this).draggable('proxy').addClass('dp');
                },
                onStopDrag: function () {
                    $(this).draggable('options').cursor = 'auto';
                }
            });
            $("#div2").droppable(
            {
                accept: "#d1,#d2",
                onDrop: function (e, source) {
                    alert($(source).html());
                }
            });
            $("#d1").draggable(
            {
                proxy: 'clone',
                revert: false,
                cursor: 'auto',
            });
            $("#d3").draggable(
            {
                proxy: 'clone',
                revert: false,
                cursor: 'auto',
            });
            //可调整大小
            $("#div3").resizable(
            {
                maxHeight: 200,
                maxWidth: 200,
                minHeight: 50,
                minWidht: 50,
                //disabled: true,//此值为true，则不能调整大小，默认为false
                edge: 4,//边框大小，默认为5
                handles:"n"//设置调整方位n,s,e,w,ne,se,nw,sw,all
            });
            //分页,需要引入pagination.css文件
            $("#pageList").pagination(
            {
                total: 100,
                pageSize: 10,
                displayMsg:"共{total}条，此页显示第{from}条到{to}条",
                //layout: ['first', 'links', 'last'],//自定义显示那些控件
                onSelectPage: function (index, num) {
                    var ths = this;
                    $(this).pagination("loading");
                    $.ajax("PageHandler.ashx",
                    {
                        type: "POST",
                        dataType: "json",
                        data: "pageIndex="+index,
                        async:true,
                        success: function (obj) {
                            //alert("1");
                            if (obj.state == "ok") {
                                var html = "";
                                var datas = obj.data;
                                for (var i = 0; i < datas.length; i++) {
                                    html += "<tr><td>" + i.toString() + "</td><td>" +datas[i].msg+"</td><tr>";
                                }
                                $("#tbody_content").html(html);
                                $(ths).pagination("loaded");
                            } else {
                                //alert("加载失败！");
                                $(ths).pagination("loaded");
                            }
                        }
                    });
                },
                onRefresh: function (index, num) {
                    alert("刷新之后" + 1);
                },
                onBeforeRefresh: function (index, num) {
                    alert("刷新之前" + index);
                },
                onChangePageSize: function (size) {
                    alert("改变了页面大小" + size);
                }
            });
            //第六个小例子，搜索框,需要引入linkbutton.css,menu.css,menubutton.css,searchbox.css
            $("#txtSearch").searchbox(
            {
                width: 300,
                height: 30,
                prompt: "请输入搜索内容",
                menu:"#menu",
                searcher: function (value,name) {
                    alert("你选择的种类是：" + name + "，输入的搜索内容是：" + value);
                }
            });
            //进度条,需要引入progressbar.css
            $("#progressbar").progressbar(
            {
                width:"100px",
                value: 1,
                onChange: function (newValue,oldValue) {
                    $("#newValue").html("新值：" + newValue);
                    $("#oldValue").html("旧值：" + oldValue);
                }
            });
            $("#btnStart").click(function () {
                var i = 1;
                
                var fun = window.setInterval(function () {
                    if (i >= 100) {
                        window.clearInterval(fun);//执行完毕，销毁该方法对象
                    }
                    i = i + 10;
                    $("#progressbar").progressbar("setValue", i);
                }, 1000);//每1秒执行1次
                
            });
            //提示框，需要引入tooltip.css
            $("#mytooltip").tooltip({
                position: 'top',
                content: '<span style="color:#fff">This is the tooltip message.</span>',
                showDelay: 200,
                hideDelay: 100,
                showEvent: "mouseenter",
                hideEvent: "mouseleave",
                onShow: function () {
                    $(this).tooltip('tip').css({
                        backgroundColor: '#666', borderColor: '#666'
                    });
                }
            });
        });
        
    </script>
</head>
<body>
        <center>
            <!--第一个easyUI的小例子，使用using动态加载js文件，并调用其中的方法-->
            <input type="text" id="txt_name" />&nbsp;&nbsp;&nbsp;
            <input type="button" id="btnShow" value="测试" />
            <br />
            <br />
            <!--第二个小例子，拖动框,通过js的方式-->
            <div id="div1" style="width:300px;height:100px;">
                <div id="title" style="margin:0 auto;width:100%;height:23px;background:#808080;">这是标题</div>
                <div style="text-align: center; margin: 0 auto; width: 100%; height: 23px;background:#00ffff;">这是内容</div>
            </div>
            <br />
            <br />
            <!--第三个例子,放置-->
            <div id="div2" style="width:100px;height:100px;background:#ffd800;">
            </div>
            <!--将d3拖放置div2中，不会触发放置事件，说明，d3是不被接收的元素-->
            <div id="d3" style="background:#808080;width:30px;height:30px;">d3</div>
            <!--将d1拖放置div2中，会触发放置事件，说明，d1是被接收的元素-->
            <div id="d1" style="background:#808080;width:30px;height:30px;">d1</div>
            <br />
            <br />
            <!--第四个例子，可调整大小-->
            <div id="div3" style="width:100px;height:100px;background:#0094ff;">
            </div>
            <br />
            <br />
            <!--第五个例子，分页需要引入pagination.css-->
            <div style="width:300px;height:200px;">
                <table border="0" cellpadding="0" cellspacing="0">
                    <thead>
                        <tr>
                            <td style="border:1px solid black;width:40%;text-align:center;">序号</td>
                            <td style="border: 1px solid black; width: 60%; text-align: center;">信息</td>
                        </tr>
                    </thead>
                    <tbody id="tbody_content">
                        
                    </tbody>
                </table>
            </div>
            <div id="pageList" style="background:#efefef;border:1px solid #ccc;"></div>
            <br />
            <br />
            <!--第六个小例子，搜索框;需要引入linkbutton.css,menu.css,menubutton.css,searchbox.css-->
            <input id="txtSearch" />
            <div id="menu" style="width:100px;">
                <div data-options="name:'all',iconCls:'icon-ok'">所有分类</div>
                <div data-options="name:'sport'">运动</div>
                <div data-options="name:'elec'">科技</div>
            </div>
            <br />
            <br />
            <!--第七个小例子,进度条-->
            <div id="progressbar" style="width:300px"></div><input type="button" id="btnStart" value="开始"/>
            <br />
            <span id="newValue"></span><span id="oldValue"></span>
            <br />
            <br />
            <!--第八个小例子，提示框未实现-->
            <a id="mytooltip" href="#">鼠标移动到这里</a>
            <!--使用标签实现-->
            <a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
        </center>
</body>
</html>

　　基础篇的内容其实并不多，加载，拖动，调整大小，分页，搜索框，进度条，提示框。由于比较简单，单纯看API其实就可以了，这里就不详细说明，需要注意的地方是，要记得引入相应的css文件，其中一些控件是关联其他控件的，所有还要记得引入关联的css文件......

　　后面将会持续更新，easyUI 其他篇的学习记录......

　　有需要的，可以点击下载项目源代码

posted @ 2015-04-06 21:44  尋找一個證明  阅读(145)  评论(0)    收藏  举报