山路弯弯需坚持之jQuery EasyUI （二）

最新推荐文章于 2024-10-03 06:13:08 发布

Code_小生

最新推荐文章于 2024-10-03 06:13:08 发布

阅读量327

点赞数

分类专栏： jEasyUI 文章标签： jquery easyui 基础讲解课程表的小案例

本文链接：https://blog.csdn.net/tom_code/article/details/60877013

版权

jEasyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQueryEasyUI 基础

拖动–Draggable

通过标签创建一个可拖动的元素。需要给标签添加一个class类，值为easyui-draggable；
EasyUI的方式：

<div id="dd" class="easyui-draggable" data-options="handle:'#mountain'" style="width:100px;height:100px;">  
<div id="mountain" style="background:#ccc;">mountain</div></div>

也可以通过以前JS的方式：

<div id="dd" style="width:100px;height:100px;"> 
<div id="mountain" style="background:#ccc;">mountain</div> 
</div>

JS代码：

$('#dd').draggable({ 
handle:'#mountain' 
});

draggable的一个重要属性proxy，在拖动的时候使用的代理元素，当使用’clone’的时候，将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数,它将返回一个jquery对象。

$('#dd2').draggable({  // 克隆一个元素让它可以移动
        proxy:'clone'
    });
$('#dd3').draggable({
        proxy:function(source){
            var p = $('<div class="proxy">proxy</div>');
            p.appendTo('body');
            return p;
        }
    });

放置–Droppable

通过标签创建一个可拖动的元素。需要给标签添加一个class类，值为easyui-draggable；

<div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;"></div>

也可以通过javascript创建。
页面的代码：

<div id="dd" style="width:100px;height:100px;"></div>

JS中代码：

$('#dd').droppable({ 
accept:'#d1,#d3'  //可以接受d1、d3
});

备注：droppable的accept属性表示确定哪些可拖拽元素将被接受

搜索框–SearchBox

搜索框提示用户需要输入搜索的值。它可以结合一个菜单，允许用户选择不同的搜索类别。在用户按下回车键或点击组件右边的搜索按钮的时候会执行搜索操作。
1）使用标签创建。添加’easyui-searchbox’类到< input >标签。

<input id="ss" class="easyui-searchbox" style="width:300px" 
　　　　data-options="searcher:qq,prompt:'Please Input Value'"></input>

2）通过javascript创建
HTML

<input id="ss"></input> 
<div id="mm" style="width:120px"> 
<div data-options="name:'all',iconCls:'icon-ok'">All News</div> 
<div data-options="name:'sports'">Sports News</div> 
</div>

$('#ss').searchbox({ 
searcher:function(value,name){ 
alert(value + "," + name) 
}, 
menu:'#mm', 
prompt:'Please Input Value' 
});

可以通过它的setValue与getValue来设置或都返回一个搜索值;

调整大小–Resizable

通过给< div >标签添加class=”easyui-resizable” 属性来创建一个可以调整大小的窗口。

<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div>

也可以通过javascript来创建；
页面代码

<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div>

JS代码

$('#rr').resizable({ 
maxWidth:800,  //当调整大小时候的最大宽度
maxHeight:600  //当调整大小时候的最大高度
});

分页–pagination

分页控件允许用户导航页面的数据。它支持页面导航和页面长度选择的选项设置。用户可以在分页控件上添加自定义按钮，以增强其功能。
分页控件可以通过标签来创建，我们通过设置< div >标签的class=‘easyui-pagination’来创建。

<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>

通过javascript来创建；
HTML

<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>

JS：

$('#pp').pagination({ 
total:1000,   //总记录数，在分页控件创建时初始的值。
pageSize:30 　//页面大小
});

进度条–ProgressBar

进度条提供了一个反馈显示一个长时间运行的操作进展。可以更新的进展条，让用户知道当前正在执行操作。
创建进度条再次以两种方式：
1）使用标签创建：

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

2）使用Javascript创建进度条：
HTML代码

<div id="p" style="width:400px;"></div>

JS代码：

$('#p').progressbar({ 
value: 60 
});

扩展：获取当前值和设置一个新的值到进度条控件：

var value = $('#p').progressbar('getValue');  //获取进度条的值
if (value < 100){ 
    value += Math.floor(Math.random() * 10); 
    $('#p').progressbar('setValue', value);  //设置进度条的值
}

案列演示：制作一个进度条
HTML：

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin:20px 0;">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="start()">Start</a>
    </div>
    <div id="p" class="easyui-progressbar" style="width:200px;height:15px;"></div>
</body>
</html>

JS代码：

function start(){
    var value = $('#p').progressbar('getValue');
    if (value < 100){
        value += Math.floor(Math.random() * 10);
        $('#p').progressbar('setValue', value);
        setTimeout(arguments.callee, 200);
    }
};

提示框–Tooltip

当用户将鼠标移动到元素上的时候，将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。
1）通过标签创建提示框，给元素添加一个”easyui-tooltip”的类名，无需任何Javascript代码。

<a href="javascript:void(0)" title="This is the tooltip message." class="easyui-tooltip">我是提示框，移动到我这里有提示</a>

2）通过Javascript创建提示框；
HTML代码

<a id="dd" href="javascript:void(0)">Click here</a>

JS代码

$('#dd').tooltip({    
      position: 'right',   //显示的位置 
      content: '<span style="color:#fff">This is the tooltip message.</span>',   // 显示的内容 
      onShow: function(){        
          $(this).tooltip('tip').css({            
                  backgroundColor: '#666',            
                  borderColor: '#666'        
           });    
}});

通过show与hide方法来实现提示框的显示与隐藏。

小的案列–课程表的制作

整合案例的内容主要针对学校课程安排，应用拖放的组件完成课程安排；
实现之后的效果图：
这里写图片描述
1）首先设计学校安排的课程：

<div class="left">
   <table>
      <tr><td><div class="item">语文</div></td></tr>
      <tr><td><div class="item">数学</div></td></tr>
      <tr><td><div class="item">英语</div></td></tr>
      <tr><td><div class="item">政治</div></td></tr>
      <tr><td><div class="item">历史</div></td></tr>
      <tr><td><div class="item">物理</div></td></tr>
      <tr><td><div class="item">化学</div></td></tr>
      <tr><td><div class="item">体育</div></td></tr>
  </table></div>

2）设计时间安排：

<div class="right">
            <table>
                <tr>
                    <td class="blank"></td>
                    <td class="title">周一</td>
                    <td class="title">周二</td>
                    <td class="title">周三</td>
                    <td class="title">周四</td>
                    <td class="title">周五</td>
                </tr>
                <tr>
                    <td class="time">08:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">09:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">10:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">11:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">12:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">13:00</td>
                    <td class="lunch" colspan="5">阳光午餐</td>
                </tr>
                <tr>
                    <td class="time">14:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">15:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">16:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
            </table>
        </div>
    </div>

3）拖动左侧的学校科目：

$('.left .item').draggable({
        revert:true,
        proxy:'clone'
    });

4）放置学校科目在表格里面

$('.right td.drop').droppable({
        onDragEnter:function(){
            $(this).addClass('over');
        },
        onDragLeave:function(){
            $(this).removeClass('over');
        },
        onDrop:function(e,source){
            $(this).removeClass('over');
            if ($(source).hasClass('assigned')){
                $(this).append(source);
            } else {
                var c = $(source).clone().addClass('assigned');
                $(this).empty().append(c);
                c.draggable({
                    revert:true
                });
            }
        }
    });