Какие файлы должны быть включены, чтобы использовать вкладки jQuery?

У меня есть еще один момент с 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 часа, но это не сработало. Есть идеи?

Источник

2 ответа

Решение

Когда я делаю пользовательскую загрузку только для вкладок, он говорит: "Виджет - это необходимая зависимость от вкладок", так что, похоже, вам нужен (если вы этого еще не сделали) код виджета.

Вот это минимизировано:

/*!
 * 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);
;
Источник

Проще использовать jQuery UI как пакет, если вам нужен только его небольшой набор, вы можете настроить загрузку здесь.

Таким образом, вы включаете один .js для jQuery UI на странице, не пытаясь выяснить зависимости:)

Кроме того, вы можете включить полную библиотеку из CDN, такую ​​как Google, например:

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

Если вы используете тему по умолчанию, они также содержат CSS (обязательно измените версию в URL). Вы можете увидеть вопрос со ссылками на это здесь.

Источник
Другие вопросы по тегам