jQuery甘特不初始化

我不太清楚爲什麼我的jQuery甘特不工作 - 我已經按照網站上看到的確切例子。這是到目前爲止我的代碼：jQuery甘特不初始化

$(function() { 

    "use strict"; 

    $(".gantt").gantt({ 
     source: [{ 
      name: "Sprint 0", 
      desc: "Analysis", 
      values: [{ 
       from: "/Date(1320192000000)/", 
       to: "/Date(1322401600000)/", 
       label: "Requirement Gathering", 
       customClass: "ganttRed" 
      }] 
     }, { 
      name: " ", 
      desc: "Scoping", 
      values: [{ 
       from: "/Date(1322611200000)/", 
       to: "/Date(1323302400000)/", 
       label: "Scoping", 
       customClass: "ganttRed" 
      }] 
     }, { 
      name: "Sprint 1", 
      desc: "Development", 
      values: [{ 
       from: "/Date(1323802400000)/", 
       to: "/Date(1325685200000)/", 
       label: "Development", 
       customClass: "ganttGreen" 
      }] 
     }, { 
      name: " ", 
      desc: "Showcasing", 
      values: [{ 
       from: "/Date(1325685200000)/", 
       to: "/Date(1325695200000)/", 
       label: "Showcasing", 
       customClass: "ganttBlue" 
      }] 
     }, { 
      name: "Sprint 2", 
      desc: "Development", 
      values: [{ 
       from: "/Date(1326785200000)/", 
       to: "/Date(1325785200000)/", 
       label: "Development", 
       customClass: "ganttGreen" 
      }] 
     }, { 
      name: " ", 
      desc: "Showcasing", 
      values: [{ 
       from: "/Date(1328785200000)/", 
       to: "/Date(1328905200000)/", 
       label: "Showcasing", 
       customClass: "ganttBlue" 
      }] 
     }, { 
      name: "Release Stage", 
      desc: "Training", 
      values: [{ 
       from: "/Date(1330011200000)/", 
       to: "/Date(1336611200000)/", 
       label: "Training", 
       customClass: "ganttOrange" 
      }] 
     }, { 
      name: " ", 
      desc: "Deployment", 
      values: [{ 
       from: "/Date(1336611200000)/", 
       to: "/Date(1338711200000)/", 
       label: "Deployment", 
       customClass: "ganttOrange" 
      }] 
     }, { 
      name: " ", 
      desc: "Warranty Period", 
      values: [{ 
       from: "/Date(1336611200000)/", 
       to: "/Date(1349711200000)/", 
       label: "Warranty Period", 
       customClass: "ganttOrange" 
      }] 
     }], 
     navigate: "scroll", 
     scale: "weeks", 
     maxScale: "months", 
     minScale: "days", 
     itemsPerPage: 10, 
     onItemClick: function (data) { 
      alert("Item clicked - show some details"); 
     }, 
     onAddClick: function (dt, rowId) { 
      alert("Empty space clicked - add an item!"); 
     }, 
     onRender: function() { 
      if (window.console && typeof console.log === "function") { 
       console.log("chart rendered"); 
      } 
     } 
    }); 

    $(".gantt").popover({ 
     selector: ".bar", 
     title: "I'm a popover", 
     content: "And I'm the content of said popover." 
    }); 
});

我這裏包括一個鏈接來顯示它：http://jsfiddle.net/Zn2ML/

不知道爲什麼它看起來並不像這樣：http://taitems.github.com/jQuery.Gantt/

來源

2013-03-02 theshizy

你是親很容易丟失CSS文件。而你錯過了：\t'jquery.fn.gantt.js' – 2013-03-02 16:03:31

看來你缺少包括從javascript文件和css文件：從一個簡單的例子

http://taitems.github.com/jQuery.Gantt/

開始，做不要忘記像示例中那樣包含所有的CSS和JavaScript，然後開始執行代碼更新以使其符合您的需求。

來源

2013-03-02 16:13:20

http://jsfiddle.net/Zn2ML/2/我已經設法解決了一些問題 - 但圖標似乎缺失了...什麼是錯的：-S – theshizy 2013-03-02 16:21:45

你應該下載它們並把它們放到服務器的一個文件夾下，然後在css中指向它們，確保你所做的是合法的。 – 2013-03-04 17:36:50

http://taitems.github.io/jQuery.Gantt/img/icon_sprite.png包含在http://taitems.github.io/jQuery.Gantt/css/style.css中，但大多數瀏覽器仍然無法保存完整的網頁。 – 2013-05-02 12:51:39

見這個例子

圖標不加載此...

你的代碼

.fn-gantt .dataPanel { 
    margin-left: 0px; 
    border-right: 1px solid #DDD; 
    background-image: url(../img/grid.png); 
    background-repeat: repeat; 
    background-position: 24px 24px; 
}

變化爲：

.fn-gantt .dataPanel { 
    margin-left: 0px; 
    border-right: 1px solid #DDD; 
    background-image: url(http://taitems.github.com/jQuery.Gantt/img/grid.png); 
    background-repeat: repeat; 
    background-position: 24px 24px; 
}

jsFiddle example

來源

2013-03-02 16:39:42

但是，如果'taitems.github.com'出現故障，他會丟失圖像，所以最好的方法是下載並在本地使用它們。 – 2013-03-04 23:30:53

@MehdiKaramosly顯然，最好的解決方案是你說的，但我寫的快速選項...修復這個解決方案是非常簡單的:) – 2013-03-05 02:15:55

jQuery甘特不初始化

回答

相關問題