{"id":6086,"date":"2013-08-31T15:45:34","date_gmt":"2013-08-31T15:45:34","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6086"},"modified":"2013-08-31T15:45:34","modified_gmt":"2013-08-31T15:45:34","slug":"easytabs","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/","title":{"rendered":"Easytabs"},"content":{"rendered":"<p>EasyTabs es un plugin jQuery ligero que te proporciona la funcionalidad completa para mostrar tabs, dejando el estilo o aspecto a tu gusto.<\/p>\n<p>El c\u00f3digo de marcado o HTML es muy sencillo. Tan solo tienes que a\u00f1adir una lista con los tabs o pesta\u00f1as que deseas y sus contenedores identificados mediante un id:<\/p>\n<pre>&lt;div id=\"tab-container\" class='tab-container'&gt;\r\n\u00a0\u00a0\u00a0 &lt;ul class='etabs'&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li class='tab'&gt;&lt;a href=\"#tabs1-html\"&gt;HTML Markup&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li class='tab'&gt;&lt;a href=\"#tabs1-js\"&gt;Required JS&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li class='tab'&gt;&lt;a href=\"#tabs1-css\"&gt;Example CSS&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0 &lt;\/ul&gt;\r\n\u00a0\u00a0\u00a0 &lt;div class='panel-container'&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div id=\"tabs1-html\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;!--YOUR CONTENT TAB FOR HTML Markup--&gt;\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;\/div&gt;\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;div id=\"tabs1-js\"&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;!--YOUR CONTENT TAB FOR Required JS--&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;\/div&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;div id=\"tabs1-css\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;!--YOUR CONTENT TAB FOR Example CSS--&gt;\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;\/div&gt;\r\n\u00a0\u00a0\u00a0 \u00a0&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>En la cabecera de la p\u00e1gina ser\u00e1 necesario que a\u00f1adas la librer\u00eda jQuery, el plugin y su llamada:<\/p>\n<pre>&lt;script src=\"js\/jquery-1.7.1.min.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt; \r\n&lt;script src=\"js\/jquery.easytabs.min.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready( function() {\r\n\u00a0\u00a0 \u00a0$('#tab-container').easytabs({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0animationSpeed: 'normal',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0transitionIn: 'slideDown',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0transitionOut: 'slideUp'\r\n\u00a0\u00a0 \u00a0});\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>En este ejemplo concreto estamos llamando al plugin con algunos par\u00e1metros de animaci\u00f3n y transici\u00f3n. Puedes ver todas las opciones disponibles <a href=\"http:\/\/os.alfajango.com\/easytabs\/#configuration\" target=\"_blank\">aqu\u00ed<\/a>.<\/p>\n<p>El maquetado de las pesta\u00f1as es muy sencillo. Solo tienes que descargar los archivos de la p\u00e1gina oficial donde te vendr\u00e1 un paquete con los estilos b\u00e1sicos que ser\u00e1 muy sencillo editar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6091\" alt=\"easytabs\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/08\/easytabs.png\" width=\"599\" height=\"164\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/08\/easytabs.png 599w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/08\/easytabs-300x82.png 300w\" sizes=\"auto, (max-width: 599px) 100vw, 599px\" \/><\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/easytabs\/examples\/demo.html\" target=\"_blank\">Ver ejemplo b\u00e1sico<\/a><\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/easytabs\/examples\/demo_edited.html\" target=\"_blank\">Ver ejemplo editado<\/a><\/p>\n<p><a href=\"http:\/\/os.alfajango.com\/easytabs\/\" target=\"_blank\">Ver m\u00e1s documentaci\u00f3n y descarga<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>EasyTabs es un plugin jQuery ligero que te proporciona la funcionalidad completa para mostrar tabs, dejando el estilo o aspecto a tu gusto. El c\u00f3digo de marcado o HTML es muy sencillo. Tan solo tienes que a\u00f1adir una lista con los tabs o pesta\u00f1as que deseas y sus contenedores identificados mediante un id: &lt;div id=\u00bbtab-container\u00bb [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[88],"class_list":["post-6086","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-tabs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Easytabs - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"EasyTabs es un plugin jQuery ligero que te proporciona la funcionalidad completa para mostrar tabs, dejando el estilo o aspecto a tu gusto.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Easytabs - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"EasyTabs es un plugin jQuery ligero que te proporciona la funcionalidad completa para mostrar tabs, dejando el estilo o aspecto a tu gusto.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2013-08-31T15:45:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/\",\"name\":\"Easytabs - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png\",\"datePublished\":\"2013-08-31T15:45:34+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"EasyTabs es un plugin jQuery ligero que te proporciona la funcionalidad completa para mostrar tabs, dejando el estilo o aspecto a tu gusto.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png\",\"width\":200,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Easytabs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Easytabs - Jose Aguilar Blog","description":"EasyTabs es un plugin jQuery ligero que te proporciona la funcionalidad completa para mostrar tabs, dejando el estilo o aspecto a tu gusto.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Easytabs - Jose Aguilar Blog","og_description":"EasyTabs es un plugin jQuery ligero que te proporciona la funcionalidad completa para mostrar tabs, dejando el estilo o aspecto a tu gusto.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2013-08-31T15:45:34+00:00","og_image":[{"width":200,"height":200,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/","url":"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/","name":"Easytabs - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png","datePublished":"2013-08-31T15:45:34+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"EasyTabs es un plugin jQuery ligero que te proporciona la funcionalidad completa para mostrar tabs, dejando el estilo o aspecto a tu gusto.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/easytabs\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png","width":200,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/easytabs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Easytabs"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6086","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6086"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6086\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5283"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}