jQuery EasyUI使用教程:創(chuàng)建一個(gè)課程表
Kendo UI for jQuery——?jiǎng)?chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫!查看詳情>>>
本教程將為你展示如何使用jQuery EasyUI創(chuàng)建一個(gè)學(xué)校的課程表。我們將創(chuàng)建兩個(gè)表:學(xué)校的科目在左邊,時(shí)間表在右邊,你可以拖動(dòng)學(xué)??颇坎⑵浞旁跁r(shí)間表的單元格中。學(xué)校的科目是一個(gè)"div class='item'"元素,然而時(shí)間表單元格是一個(gè)"td class='drop'"元素。
顯示學(xué)??颇?/strong>
English Science
顯示時(shí)間表
Monday Tuesday Wednesday Thursday Friday 08:00
拖動(dòng)左側(cè)的學(xué)??颇?/strong>
$('.left .item').draggable({ revert:true, proxy:'clone' });
將學(xué)校的科目放在時(shí)間表的單元格中
$('.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 }); } } });
正如你所看到的代碼一樣,當(dāng)用戶在左側(cè)拖動(dòng)學(xué)??颇坎⑵浞诺綍r(shí)間表的單元格中時(shí),onDrop回調(diào)函數(shù)將會(huì)被調(diào)用。我們將左側(cè)拖動(dòng)的源元素復(fù)制并把它附加到時(shí)間表單元格上,當(dāng)把學(xué)??颇繌臅r(shí)間表的某個(gè)單元格拖動(dòng)到其他單元格時(shí),只需簡單地移動(dòng)它即可。
下載該EasyUI示例:easyui-timetable-demo.zip
購買最新正版授權(quán)!"咨詢在線客服"