• <menu id="w2i4a"></menu>
  • logo jQuery EasyUI使用教程

    文檔首頁>>jQuery EasyUI使用教程>>jQuery EasyUI使用教程:創(chuàng)建一個(gè)課程表

    jQuery EasyUI使用教程:創(chuàng)建一個(gè)課程表


    Kendo UI for jQuery——?jiǎng)?chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫!查看詳情>>>

    <jQuery EasyUI最新版下載>

    本教程將為你展示如何使用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)!"咨詢在線客服"

    掃碼咨詢


    添加微信 立即咨詢

    電話咨詢

    客服熱線
    023-68661681

    TOP
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();