{"id":226,"date":"2011-08-21T07:23:50","date_gmt":"2011-08-21T12:23:50","guid":{"rendered":"http:\/\/www.compdigitec.com\/labs\/?p=226"},"modified":"2011-08-21T07:23:50","modified_gmt":"2011-08-21T12:23:50","slug":"creating-jquery-ui-tabs","status":"publish","type":"post","link":"http:\/\/www.compdigitec.com\/labs\/2011\/08\/21\/creating-jquery-ui-tabs\/","title":{"rendered":"Creating jQuery UI Tabs"},"content":{"rendered":"

jQuery UI Tabs<\/a> are an easy way to make tabs in your web applications or web sites easily with less code. Consider the following tab structure:<\/p>\n

\r\n<div id="tabgroup">\r\n\t<ul>\r\n\t\t<li><a href="#tab1">Tab 1<\/a><\/li>\r\n\t\t<li><a href="#tab2">Tab 2<\/a><\/li>\r\n\t\t<li><a href="#tab3">More Tabs<\/a><\/li>\r\n\t<\/ul>\r\n\t<div id="tab1">Hello<\/div>\r\n\t<div id="tab2">World<\/div>\r\n\t<div id="tab3">from jQuery UI Tabs<\/div>\r\n<\/div>\r\n<\/pre>\n
To turn this into a fully featured functioning tab system, all one has to execute in the <head> is this provided you have included jQuery and jQuery UI with any CSS in your <head> (default CSS can be included like such: <link rel=”stylesheet” type=”text\/css” href=”http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.9\/themes\/ui-lightness\/jquery-ui.css” \/><\/strong>):<\/p>\n
\r\njQuery(document).ready(function() {\r\n\tjQuery("#tabgroup").tabs();\r\n});\r\n<\/pre>\n
\"\"<\/a><\/p>\n
This tab structure also degrades reasonably without JavaScript – one is able to view the contents of all of the tabs and the anchor links are usable – unlike some other tab techniques.<\/p>","protected":false},"excerpt":{"rendered":"
jQuery UI Tabs are an easy way to make tabs in your web applications or web sites easily with less code. Consider the following tab structure: To turn this into a fully featured functioning tab system, all one has to execute in the <head> is this provided you have included jQuery and jQuery UI with […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[757,701,755,756,758],"_links":{"self":[{"href":"http:\/\/www.compdigitec.com\/labs\/wp-json\/wp\/v2\/posts\/226"}],"collection":[{"href":"http:\/\/www.compdigitec.com\/labs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.compdigitec.com\/labs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.compdigitec.com\/labs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.compdigitec.com\/labs\/wp-json\/wp\/v2\/comments?post=226"}],"version-history":[{"count":0,"href":"http:\/\/www.compdigitec.com\/labs\/wp-json\/wp\/v2\/posts\/226\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.compdigitec.com\/labs\/wp-json\/wp\/v2\/media?parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.compdigitec.com\/labs\/wp-json\/wp\/v2\/categories?post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.compdigitec.com\/labs\/wp-json\/wp\/v2\/tags?post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}