jQuery 탭을 사용하려면 어떤 파일을 포함해야합니까?

Question

나는 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> 

자바 스크립트 :이 가능하게 할 수있는 방법을

$(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

탭에 대한 사용자 정의 다운로드를 수행 할 때 "위젯은 탭의 필요한 종속성입니다."라고 표시되어 위젯 코드가 필요한 경우 (아직 작성하지 않은 경우) 필요합니다. 여기

그것은 축소 된된다

/*! 
* 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).

당신이 페이지에 jQuery를 UI에 대한 하나.js을 포함하고이 방법, 종속 :) 또는

, 당신은이 같은 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.