應該包含哪些文件才能使用jQuery選項卡？

Question

我還有另一個wtf與jQuery的時刻。

我進口下列文件（其中包括）

<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.ui.core.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.ui.tabs.min.js" type="text/javascript"></script> 

HTML：

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">test1</a></li> 
    <li><a href="#tabs-2">test2</a></li> 
    <li><a href="#tabs-3">test3</a></li> 
    </ul> 
    <div id="tabs-1"> 
    <p>test1 content</p> 
    </div> 
    <div id="tabs-2"> 
    <p>test2 content</p> 
    </div> 
    <div id="tabs-3"> 
    <p>test3 content</p> 
    </div> 
</div> 

的javascript：

$(document).ready(function() { 
    alert($("#tabs"));  // '[object Object]' 
    alert($("#tabs").tabs) // 'undefined' 
    $("#tabs").tabs();  // doesn't work 
    alert('working');  // doesn't reach this line 
}); 

我實在不明白這是如何都不可能困難，但我仍然設法花費2個小時而沒有得到它的工作。有任何想法嗎？

Answer 1

當我爲標籤頁自定義下載時，它只會顯示「Widget是Tabs需要的依賴項」，所以它看起來像你需要的（如果你還沒有）窗口部件代碼。

這已經過壓縮：

/*! 
* jQuery UI Widget 1.8.2 
* 
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) 
* Dual licensed under the MIT (MIT-LICENSE.txt) 
* and GPL (GPL-LICENSE.txt) licenses. 
* 
* http://docs.jquery.com/UI/Widget 
*/ 
(function(b){var j=b.fn.remove;b.fn.remove=function(a,c){return this.each(function(){if(!c)if(!a||b.filter(a,[this]).length)b("*",this).add(this).each(function(){b(this).triggerHandler("remove")});return j.call(b(this),a,c)})};b.widget=function(a,c,d){var e=a.split(".")[0],f;a=a.split(".")[1];f=e+"-"+a;if(!d){d=c;c=b.Widget}b.expr[":"][f]=function(h){return!!b.data(h,a)};b[e]=b[e]||{};b[e][a]=function(h,g){arguments.length&&this._createWidget(h,g)};c=new c;c.options=b.extend({},c.options);b[e][a].prototype= 
b.extend(true,c,{namespace:e,widgetName:a,widgetEventPrefix:b[e][a].prototype.widgetEventPrefix||a,widgetBaseClass:f},d);b.widget.bridge(a,b[e][a])};b.widget.bridge=function(a,c){b.fn[a]=function(d){var e=typeof d==="string",f=Array.prototype.slice.call(arguments,1),h=this;d=!e&&f.length?b.extend.apply(null,[true,d].concat(f)):d;if(e&&d.substring(0,1)==="_")return h;e?this.each(function(){var g=b.data(this,a),i=g&&b.isFunction(g[d])?g[d].apply(g,f):g;if(i!==g&&i!==undefined){h=i;return false}}):this.each(function(){var g= 
b.data(this,a);if(g){d&&g.option(d);g._init()}else b.data(this,a,new c(d,this))});return h}};b.Widget=function(a,c){arguments.length&&this._createWidget(a,c)};b.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",options:{disabled:false},_createWidget:function(a,c){this.element=b(c).data(this.widgetName,this);this.options=b.extend(true,{},this.options,b.metadata&&b.metadata.get(c)[this.widgetName],a);var d=this;this.element.bind("remove."+this.widgetName,function(){d.destroy()});this._create(); 
this._init()},_create:function(){},_init:function(){},destroy:function(){this.element.unbind("."+this.widgetName).removeData(this.widgetName);this.widget().unbind("."+this.widgetName).removeAttr("aria-disabled").removeClass(this.widgetBaseClass+"-disabled ui-state-disabled")},widget:function(){return this.element},option:function(a,c){var d=a,e=this;if(arguments.length===0)return b.extend({},e.options);if(typeof a==="string"){if(c===undefined)return this.options[a];d={};d[a]=c}b.each(d,function(f, 
h){e._setOption(f,h)});return e},_setOption:function(a,c){this.options[a]=c;if(a==="disabled")this.widget()[c?"addClass":"removeClass"](this.widgetBaseClass+"-disabled ui-state-disabled").attr("aria-disabled",c);return this},enable:function(){return this._setOption("disabled",false)},disable:function(){return this._setOption("disabled",true)},_trigger:function(a,c,d){var e=this.options[a];c=b.Event(c);c.type=(a===this.widgetEventPrefix?a:this.widgetEventPrefix+a).toLowerCase();d=d||{};if(c.originalEvent){a= 
b.event.props.length;for(var f;a;){f=b.event.props[--a];c[f]=c.originalEvent[f]}}this.element.trigger(c,d);return!(b.isFunction(e)&&e.call(this.element[0],c,d)===false||c.isDefaultPrevented())}}})(jQuery); 
; 

Answer 2

如果您只需要它的一個子集，就可以更容易地將jQuery UI作爲一個包使用，you can configure your download here。

這樣你包括一個.js的jQuery UI頁面上，而不是試圖找出依賴:)

或者，您可以包括從CDN，such as google's滿庫，就像這樣：

<script type="text/javscript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> 

如果您使用的是默認主題，它們也會託管CSS（請務必更改URL中的版本）。 You can see a question with links to that here。