我的腳本只在jfiddle上工作，但不在本地機器上

-3

我在Jsfiddle上有一個代碼，但沒有在實時項目上顯示我已考慮外部資源。 Jfiddle有一個選項卡菜單，每個選項卡都顯示不同的圖表，如條形圖或餅圖或折線圖。我的腳本只在jfiddle上工作，但不在本地機器上

我把css和js文件放在同一頁面上，也放在不同的頁面上，而不是在其他選項卡上顯示js功能。

請讓我知道我嘗試的解決方案，但它不工作。

<div id="TabbedPanels1" class="TabbedPanels"> 
    <ul class="TabbedPanelsTabGroup"> 
     <li class="TabbedPanelsTab" tabindex="0">Tab 1</li> 
     <li class="TabbedPanelsTab" tabindex="0">Tab 2</li> 
    </ul> 
    <div class="TabbedPanelsContentGroup"> 
     <div class="TabbedPanelsContent"> 
      <div id="jQueryVisualizeChart1"></div> 
      <br /> 
      <table id="table1"> 
       <caption>2010 Employee Sales by Department</caption> 
       <thead> 
        <tr> 
         <td></td> 
         <th scope="col">food</th> 
         <th scope="col">auto</th> 
         <th scope="col">household</th> 
         <th scope="col">furniture</th> 
         <th scope="col">kitchen</th> 
         <th scope="col">bath</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <th scope="row">Mary</th> 
         <td>190</td> 
         <td>160</td> 
         <td>40</td> 
         <td>120</td> 
         <td>30</td> 
         <td>70</td> 
        </tr> 
        <tr> 
         <th scope="row">Tom</th> 
         <td>3</td> 
         <td>40</td> 
         <td>30</td> 
         <td>45</td> 
         <td>35</td> 
         <td>49</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
     <div class="TabbedPanelsContent"> 
      <div id="jQueryVisualizeChart2"></div> 
      <br /> 
      <table id="table2"> 
       <caption>2010 Employee Sales by Department</caption> 
       <thead> 
        <tr> 
         <td></td> 
         <th scope="col">food</th> 
         <th scope="col">auto</th> 
         <th scope="col">household</th> 
         <th scope="col">furniture</th> 
         <th scope="col">kitchen</th> 
         <th scope="col">bath</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <th scope="row">Mary</th> 
         <td>190</td> 
         <td>160</td> 
         <td>40</td> 
         <td>120</td> 
         <td>30</td> 
         <td>70</td> 
        </tr> 
        <tr> 
         <th scope="row">Tom</th> 
         <td>3</td> 
         <td>40</td> 
         <td>30</td> 
         <td>45</td> 
         <td>35</td> 
         <td>49</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div>

(function() { // BeginSpryComponent 

    if (typeof Spry == "undefined") window.Spry = {}; 
    if (!Spry.Widget) Spry.Widget = {}; 

    Spry.Widget.TabbedPanels = function (element, opts) { 
     this.element = this.getElement(element); 
     this.defaultTab = 0; // Show the first panel by default. 
     this.tabSelectedClass = "TabbedPanelsTabSelected"; 
     this.tabHoverClass = "TabbedPanelsTabHover"; 
     this.tabFocusedClass = "TabbedPanelsTabFocused"; 
     this.panelVisibleClass = "TabbedPanelsContentVisible"; 
     this.focusElement = null; 
     this.hasFocus = false; 
     this.currentTabIndex = 0; 
     this.enableKeyboardNavigation = true; 
     this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT; 
     this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT; 

     Spry.Widget.TabbedPanels.setOptions(this, opts); 

     if (typeof (this.defaultTab) == "number") { 
      if (this.defaultTab < 0) this.defaultTab = 0; 
      else { 
       var count = this.getTabbedPanelCount(); 
       if (this.defaultTab >= count) this.defaultTab = (count > 1) ? (count - 1) : 0; 
      } 

      this.defaultTab = this.getTabs()[this.defaultTab]; 
     } 

     if (this.defaultTab) this.defaultTab = this.getElement(this.defaultTab); 

     this.attachBehaviors(); 
    }; 

    Spry.Widget.TabbedPanels.prototype.getElement = function (ele) { 
     if (ele && typeof ele == "string") return document.getElementById(ele); 
     return ele; 
    }; 

    Spry.Widget.TabbedPanels.prototype.getElementChildren = function (element) { 
     var children = []; 
     var child = element.firstChild; 
     while (child) { 
      if (child.nodeType == 1 /* Node.ELEMENT_NODE */) children.push(child); 
      child = child.nextSibling; 
     } 
     return children; 
    }; 

    Spry.Widget.TabbedPanels.prototype.addClassName = function (ele, className) { 
     if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1)) return; 
     ele.className += (ele.className ? " " : "") + className; 
    }; 

    Spry.Widget.TabbedPanels.prototype.removeClassName = function (ele, className) { 
     if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)) return; 
     ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), ""); 
    }; 

    Spry.Widget.TabbedPanels.setOptions = function (obj, optionsObj, ignoreUndefinedProps) { 
     if (!optionsObj) return; 
     for (var optionName in optionsObj) { 
      if (ignoreUndefinedProps && optionsObj[optionName] == undefined) continue; 
      obj[optionName] = optionsObj[optionName]; 
     } 
    }; 

    Spry.Widget.TabbedPanels.prototype.getTabGroup = function() { 
     if (this.element) { 
      var children = this.getElementChildren(this.element); 
      if (children.length) return children[0]; 
     } 
     return null; 
    }; 

    Spry.Widget.TabbedPanels.prototype.getTabs = function() { 
     var tabs = []; 
     var tg = this.getTabGroup(); 
     if (tg) tabs = this.getElementChildren(tg); 
     return tabs; 
    }; 

    Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function() { 
     if (this.element) { 
      var children = this.getElementChildren(this.element); 
      if (children.length > 1) return children[1]; 
     } 
     return null; 
    }; 

    Spry.Widget.TabbedPanels.prototype.getContentPanels = function() { 
     var panels = []; 
     var pg = this.getContentPanelGroup(); 
     if (pg) panels = this.getElementChildren(pg); 
     return panels; 
    }; 

    Spry.Widget.TabbedPanels.prototype.getIndex = function (ele, arr) { 
     ele = this.getElement(ele); 
     if (ele && arr && arr.length) { 
      for (var i = 0; i < arr.length; i++) { 
       if (ele == arr[i]) return i; 
      } 
     } 
     return -1; 
    }; 

    Spry.Widget.TabbedPanels.prototype.getTabIndex = function (ele) { 
     var i = this.getIndex(ele, this.getTabs()); 
     if (i < 0) i = this.getIndex(ele, this.getContentPanels()); 
     return i; 
    }; 

    Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function() { 
     return this.currentTabIndex; 
    }; 

    Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function (ele) { 
     return Math.min(this.getTabs().length, this.getContentPanels().length); 
    }; 

    Spry.Widget.TabbedPanels.addEventListener = function (element, eventType, handler, capture) { 
     try { 
      if (element.addEventListener) element.addEventListener(eventType, handler, capture); 
      else if (element.attachEvent) element.attachEvent("on" + eventType, handler); 
     } catch (e) {} 
    }; 

    Spry.Widget.TabbedPanels.prototype.cancelEvent = function (e) { 
     if (e.preventDefault) e.preventDefault(); 
     else e.returnValue = false; 
     if (e.stopPropagation) e.stopPropagation(); 
     else e.cancelBubble = true; 

     return false; 
    }; 

    Spry.Widget.TabbedPanels.prototype.onTabClick = function (e, tab) { 
     this.showPanel(tab); 
     return this.cancelEvent(e); 
    }; 

    Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function (e, tab) { 
     this.addClassName(tab, this.tabHoverClass); 
     return false; 
    }; 

    Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function (e, tab) { 
     this.removeClassName(tab, this.tabHoverClass); 
     return false; 
    }; 

    Spry.Widget.TabbedPanels.prototype.onTabFocus = function (e, tab) { 
     this.hasFocus = true; 
     this.addClassName(tab, this.tabFocusedClass); 
     return false; 
    }; 

    Spry.Widget.TabbedPanels.prototype.onTabBlur = function (e, tab) { 
     this.hasFocus = false; 
     this.removeClassName(tab, this.tabFocusedClass); 
     return false; 
    }; 

    Spry.Widget.TabbedPanels.KEY_UP = 38; 
    Spry.Widget.TabbedPanels.KEY_DOWN = 40; 
    Spry.Widget.TabbedPanels.KEY_LEFT = 37; 
    Spry.Widget.TabbedPanels.KEY_RIGHT = 39; 



    Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function (e, tab) { 
     var key = e.keyCode; 
     if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode)) return true; 

     var tabs = this.getTabs(); 
     for (var i = 0; i < tabs.length; i++) 
     if (tabs[i] == tab) { 
      var el = false; 
      if (key == this.previousPanelKeyCode && i > 0) el = tabs[i - 1]; 
      else if (key == this.nextPanelKeyCode && i < tabs.length - 1) el = tabs[i + 1]; 

      if (el) { 
       this.showPanel(el); 
       el.focus(); 
       break; 
      } 
     } 

     return this.cancelEvent(e); 
    }; 

    Spry.Widget.TabbedPanels.prototype.preorderTraversal = function (root, func) { 
     var stopTraversal = false; 
     if (root) { 
      stopTraversal = func(root); 
      if (root.hasChildNodes()) { 
       var child = root.firstChild; 
       while (!stopTraversal && child) { 
        stopTraversal = this.preorderTraversal(child, func); 
        try { 
         child = child.nextSibling; 
        } catch (e) { 
         child = null; 
        } 
       } 
      } 
     } 
     return stopTraversal; 
    }; 

    Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function (tab, panel) { 
     var self = this; 
     Spry.Widget.TabbedPanels.addEventListener(tab, "click", function (e) { 
      return self.onTabClick(e, tab); 
     }, false); 
     Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function (e) { 
      return self.onTabMouseOver(e, tab); 
     }, false); 
     Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function (e) { 
      return self.onTabMouseOut(e, tab); 
     }, false); 

     if (this.enableKeyboardNavigation) { 

      var tabIndexEle = null; 
      var tabAnchorEle = null; 

      this.preorderTraversal(tab, function (node) { 
       if (node.nodeType == 1 /* NODE.ELEMENT_NODE */) { 
        var tabIndexAttr = tab.attributes.getNamedItem("tabindex"); 
        if (tabIndexAttr) { 
         tabIndexEle = node; 
         return true; 
        } 
        if (!tabAnchorEle && node.nodeName.toLowerCase() == "a") tabAnchorEle = node; 
       } 
       return false; 
      }); 

      if (tabIndexEle) this.focusElement = tabIndexEle; 
      else if (tabAnchorEle) this.focusElement = tabAnchorEle; 

      if (this.focusElement) { 
       Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function (e) { 
        return self.onTabFocus(e, tab); 
       }, false); 
       Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function (e) { 
        return self.onTabBlur(e, tab); 
       }, false); 
       Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function (e) { 
        return self.onTabKeyDown(e, tab); 
       }, false); 
      } 
     } 
    }; 

    Spry.Widget.TabbedPanels.prototype.showPanel = function (elementOrIndex) { 
     var tpIndex = -1; 

     if (typeof elementOrIndex == "number") tpIndex = elementOrIndex; 
     else // Must be the element for the tab or content panel. 
     tpIndex = this.getTabIndex(elementOrIndex); 

     if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount()) return; 

     var tabs = this.getTabs(); 
     var panels = this.getContentPanels(); 

     var numTabbedPanels = Math.max(tabs.length, panels.length); 

     for (var i = 0; i < numTabbedPanels; i++) { 
      if (i != tpIndex) { 
       if (tabs[i]) this.removeClassName(tabs[i], this.tabSelectedClass); 
       if (panels[i]) { 
        this.removeClassName(panels[i], this.panelVisibleClass); 
        panels[i].style.display = "none"; 
       } 
      } 
     } 

     this.addClassName(tabs[tpIndex], this.tabSelectedClass); 
     this.addClassName(panels[tpIndex], this.panelVisibleClass); 
     panels[tpIndex].style.display = "block"; 

     this.currentTabIndex = tpIndex; 
    }; 

    Spry.Widget.TabbedPanels.prototype.attachBehaviors = function (element) { 
     var tabs = this.getTabs(); 
     var panels = this.getContentPanels(); 
     var panelCount = this.getTabbedPanelCount(); 

     for (var i = 0; i < panelCount; i++) 
     this.addPanelEventListeners(tabs[i], panels[i]); 

     this.showPanel(this.defaultTab); 
    }; 

})(); 

$(function() { 
    $('#table1').visualize({ 
     type: 'bar', 
     height: '260px', 
     width: '420px', 
     appendTitle: true, 
     lineWeight: 4, 
     colors: ['#be1e2d', '#666699', '#92d5ea', '#ee8310', '#8d10ee', '#5a3b16', '#26a4ed', '#f45a90', '#e9e744'] 
    }).appendTo('#jQueryVisualizeChart').trigger('visualizeRefresh1'); 

}); 
$(function() { 
    $('#table2').visualize({ 
     type: 'line', 
     height: '300px', 
     width: '420px', 
     appendTitle: true, 
     lineWeight: 4, 
     colors: ['#be1e2d', '#666699', '#92d5ea', '#ee8310', '#8d10ee', '#5a3b16', '#26a4ed', '#f45a90', '#e9e744'] 
    }).appendTo('#jQueryVisualizeChart').trigger('visualizeRefresh2'); 

}); 

var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");

.dwpeAd { 
    color: #333; 
    background-color: #F4F3Ea; 
    position:fixed; 
    right: 20px; 
    top: 20px; 
    padding: 5px; 
} 
.visualize { 
    margin: 20px 0 0 30px; 
} 
.TabbedPanels { 
    overflow: hidden; 
    margin: 0px; 
    padding: 0px; 
    clear: none; 
    width: 100%; 
} 
.TabbedPanelsTabGroup { 
    margin: 0px; 
    padding: 0px; 
} 
.TabbedPanelsTab { 
    position: relative; 
    top: 1px; 
    float: left; 
    padding: 4px 10px; 
    margin: 0px 1px 0px 0px; 
    font: bold 0.7em sans-serif; 
    background-color: #DDD; 
    list-style: none; 
    border-left: solid 1px #CCC; 
    border-bottom: solid 1px #999; 
    border-top: solid 1px #999; 
    border-right: solid 1px #999; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    cursor: pointer; 
} 
.TabbedPanelsTabHover { 
    background-color: #CCC; 
} 
.TabbedPanelsTabSelected { 
    background-color: #EEE; 
    border-bottom: 1px solid #EEE; 
} 
.TabbedPanelsTab a { 
    color: black; 
    text-decoration: none; 
} 
.TabbedPanelsContentGroup { 
    clear: both; 
    border-left: solid 1px #CCC; 
    border-bottom: solid 1px #CCC; 
    border-top: solid 1px #999; 
    border-right: solid 1px #999; 
    background-color: #EEE; 
} 
.TabbedPanelsContent { 
    overflow: hidden; 
    padding: 4px; 
} 
.TabbedPanelsContentVisible { 
} 
.VTabbedPanels { 
    overflow: hidden; 
    zoom: 1; 
} 
.VTabbedPanels .TabbedPanelsTabGroup { 
    float: left; 
    width: 10em; 
    height: 20em; 
    background-color: #EEE; 
    position: relative; 
    border-top: solid 1px #999; 
    border-right: solid 1px #999; 
    border-left: solid 1px #CCC; 
    border-bottom: solid 1px #CCC; 
} 
.VTabbedPanels .TabbedPanelsTab { 
    float: none; 
    margin: 0px; 
    border-top: none; 
    border-left: none; 
    border-right: none; 
} 
.VTabbedPanels .TabbedPanelsTabSelected { 
    background-color: #EEE; 
    border-bottom: solid 1px #999; 
} 
.VTabbedPanels .TabbedPanelsContentGroup { 
    clear: none; 
    float: left; 
    padding: 0px; 
    width: 30em; 
    height: 20em; 
} 
/* Styles for Printing */ 
@media print { 
    .TabbedPanels { 
     overflow: visible !important; 
    } 
    .TabbedPanelsContentGroup { 
     display: block !important; 
     overflow: visible !important; 
     height: auto !important; 
    } 
    .TabbedPanelsContent { 
     overflow: visible !important; 
     display: block !important; 
     clear:both !important; 
    } 
    .TabbedPanelsTab { 
     overflow: visible !important; 
     display: block !important; 
     clear:both !important; 
    } 
}

來源

2013-10-05 user2841252

請多解釋一下，你的問題是什麼 –

我不知道人們爲什麼投這個票。我將jsfiddle的所有css，js和html文件複製到我的項目中，但它不顯示與jsfiddle相同的輸出。我想要同樣的標籤菜單出現在我的項目上，但它不一樣。當我單擊jsfiddle中的第二個選項卡時，它會晃動圖表，但是在我的真實項目上單擊第二個選項卡時它不會顯示圖表。我很迷惑爲什麼它是這樣的。你能不能讓我知道。 – user2841252

這是有線的，因爲我試過編輯JSFiddle代碼，但它似乎像系統拒絕我的請求。 – Yotam

我想你沒有複製左側菜單上的 '外部資源'。

來源

2013-10-05 15:17:15

是的我已經做到了，我把它放在頁面的頁眉上，但沒有迴應.. – user2841252

我的腳本只在jfiddle上工作，但不在本地機器上

回答

相關問題