应该包含哪些文件来使用jQuery选项卡?

时间:2010-06-29 12:42:30

标签: jquery jquery-ui tabs jquery-ui-tabs jquery-tabs

我还有另一个使用jQuery的wtf时刻。

我正在导入以下文件(等等)

<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个小时没有让它工作。有什么想法吗?

2 个答案:

答案 0 :(得分: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(请务必更改网址中的版本)。 You can see a question with links to that here

答案 1 :(得分: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);
;