jQuery EasyUI使用教程:创建一个课程表

jQuery EasyUI最新版下载>

本教程将为你展示如何使用jQuery EasyUI创建一个学校的课程表。我们将创建两个表:学校的科目在左边,时间表在右边,你可以拖动学校科目并将其放在时间表的单元格中。学校的科目是一个"div class='item'"元素,然而时间表单元格是一个"td class='drop'"元素。

显示学校科目


显示时间表


  Monday Tuesday Wednesday Thursday Friday
08:00          

拖动左侧的学校科目

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

将学校的科目放在时间表的单元格中

$('.right td.drop').droppable({
accept: '.item',
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
});
}
}
});

正如你所看到的代码一样,当用户在左侧拖动学校科目并将其放到时间表的单元格中时,onDrop回调函数将会被调用。我们将左侧拖动的源元素复制并把它附加到时间表单元格上,当把学校科目从时间表的某个单元格拖动到其他单元格时,只需简单地移动它即可。

 

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

php编程基础教程.pptx|php编程培训,php,编程,基础,教程,pptx
php编程基础教程.pptx

历史上的今天:03月03日

10 个CSS小技巧

10 个CSS小技巧CSS 大约有两百个属性。很多属性都是相互关联的,理清楚每一个属性细节是不可能的。所以,本文分享一些有用的 CSS 小技巧,方便开发者和设计师参考。1. 打字效果网页设计变得越来越有创意。在 CSS 动画的协调下,你的网页会像活的一样。在这个例子中,我们将使用 animation 和 @keyframes 属性去实现打字效果。具体来说,在这个演示中,我们通过 steps() 属

网页设计与制作教程 | CSS基础知识

网页设计与制作教程 | CSS基础知识初识CSS。CSS是Cascading Style Sheets的缩写,中文译名为层叠样式表,它是一种用于控制网页样式并允许将样式信息与网页内容分离的标记性语言。其中的样式指的就是格式,对网页来说,像文字的大小、颜色以及~~~~~~~~~~位置等都是网页显示信息的样式;层叠是指当在HTML文件中同时引用多个定义好的样式文件时,若多个样式文件间定义的样式发生了冲

鲜为人知的CSS实用技巧

鲜为人知的CSS实用技巧今天来看几个鲜为人知但很实用的 CSS 技巧!1. 毛玻璃特效可以使用 CSS 中的 backdrop-filter 属性来实现毛玻璃特效:.login { backdrop-filter: blur(5px);}实现效果如下:backdrop-filter 属性可以为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素_背后_的所有元素,为了看到

2023 PostgreSQL菜鸟教程

2023 PostgreSQL菜鸟教程什么是PostgreSql~~~~~~~~~~PostgreSQL是一个功能强大的开源对象关系型数据库系统,他使用和扩展了SQL语言,并结合了许多安全存储和扩展最复杂数据工作负载的功能。PostgreSQL的起源可以追溯到1986年,作为加州大学伯克利分校POSTGRES项目的一部分,并且在核心平台上进行了30多年的积极开发。PostgresSQL凭借其经过验

HTML/ CSS 入门

HTML/ CSS 入门前言现在我们来学习一些基础的 HTML/ CSS 知识。希望阅读完这篇文章能达到编写简单页面的程度。目录:HTML/ CSS 的发明;HTML 基础;CSS 基础;页面是如何渲染的;Part 1. HTML/ CSS 的发明1989 年 3 月,互联网还只属于少数人。《图解 HTTP》同年,蒂姆·伯纳斯·李(Tim Berners-Lee)提出了一种能让远隔两地的研究者们共

热门专题

易捷尔单招|易捷尔单招,易捷尔单招培训,易捷尔单招报名,易捷尔单招考试,易捷尔单招培训学校,易捷尔单招分数
易捷尔单招
昆明网站建设|昆明网站建设,昆明网站开发,昆明网站建设公司,昆明网站建设价格,昆明网站设计,昆明网站制作,网页设计,高端网站建设,高端网站设计
昆明网站建设
金诺幼儿园(春城路金诺幼儿园)|昆明官渡区幼儿园,幼儿园报名,官渡区幼儿园,春城路幼儿园,幼儿园招生,学前班,昆明幼儿园,金诺幼儿园,环城南路幼儿园,石井路幼儿园
金诺幼儿园(春城路金诺幼儿园)
安徽中源管业|安徽中源管业,安徽中源管业mpp电力管,安徽中源管业cpvc电力管,安徽中源管业pe穿线管,安徽中源管业电力管,安徽中源管业排水管,安徽中源管业通信管,安徽中源管业管材
安徽中源管业
大理科技管理学校|大理科技管理中等职业技术学校,大理市科技管理中等职业技术学校
大理科技管理学校
小程序开发|微信小程序,小程序开发,小程序,小程序制作,微信小程序开发,小程序公司,小程序开发公司,分销,三级分销系统,分销系统
小程序开发
综合高中|云南综合高中,昆明综合高中,综合高中能考本一吗,综合高中和普通高中的区别,综合高中是什么意思,综合高中能参加全国统一高考吗,综合高中可以考哪些大学,综合高中的学籍是什么
综合高中
卓越综合高中|卓越综合高中
卓越综合高中

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部