site/src/pages/service/tabs/01.haml site/src/pages/service/tabs/02.haml site/src/pages/service/tabs/03.haml @@ -1,5 +1,8 @@ var tabs = new Ojay.Tabs('#container1 .tab'); tabs.setup(); -var gallery = new Ojay.ImageTabs('#thumbnails a.thumb', '#container2'); -gallery.setup(); +var ajaxTabs = new Ojay.AjaxTabs('#links a', '#container2'); +ajaxTabs.setup(); + +var imageTabs = new Ojay.ImageTabs('#thumbnails a.thumb', '#container3'); +imageTabs.setup(); site/site/javascripts/test/tabs.js @@ -2,17 +2,23 @@ :plain <style type="text/css"> - #container1 {margin-bottom:30px; border:1px solid #ccc; clear:both;} - #container1 .tab {clear:both; padding:9px;} + #container1, #container2 {margin-bottom:30px; border:1px solid #ccc; clear:both; max-width:500px} + #container1 .tab, #container2 .tab {clear:both; padding:9px;} #container1 .tab P {margin:0 0 1em 0;} + .toggles {margin:0; padding:0 0 0 10px; *zoom:1;} - .toggles LI {float:left; cursor:pointer; list-style:none; margin:0 5px -1px 0; border:1px solid #ccc; padding:9px; _position:relative;} - .toggles LI.selected {border-bottom-color:#fff; background-color:#fff;} + .toggles li {float:left; cursor:pointer; list-style:none; margin:0 5px -1px 0; border:1px solid #ccc; padding:9px; _position:relative;} + .toggles li.selected {border-bottom-color:#fff; background-color:#fff;} + + #links {} + #links li {margin-bottom:0; border:none; padding:0;} + #links li a {display:block; margin-bottom:-1px; border:1px solid #ccc; padding:9px; _position:relative; outline:none; text-decoration:none; font-weight:bold;} + #links li a.selected {border-bottom-color:#fff;} - #container2 {width:192px; height:192px; border:1px solid #666; padding:32px;} + #container3 {width:192px; height:192px; border:1px solid #666; padding:32px;} #thumbnails {margin:6px 0 30px 0; padding:0;} - #thumbnails LI {float:left; margin:0 6px 0 0; border:1px solid #666; padding:0; list-style:none;} + #thumbnails li {float:left; margin:0 6px 0 0; border:1px solid #666; padding:0; list-style:none;} #thumbnails .thumb {display:block; outline:none; text-decoration:none;} #thumbnails .thumb IMG {display:block; margin:0; border:none; padding:0;} #thumbnails .selected {opacity:0.5;} @@ -38,10 +44,24 @@ %q A great many people think they are thinking when they are merely rearranging their prejudices. %cite William James + %h2 - %code Ojay.ImageTabs + %code Ojay.AjaxTabs +%ul#links.toggles + %li + %a{:href => "/service/tabs/01.html"} G + %li + %a{:href => "/service/tabs/02.html"} E + %li + %a{:href => "/service/tabs/03.html"} B #container2 + + +%h2 + %code Ojay.ImageTabs + +#container3 %ul#thumbnails %li %a.thumb{:href => "/images/tabs/godel.jpg"} site/src/pages/test/tabs.haml fa98144096311a7a25c8aa5e553bf8e1e02c258e Benedict Eastaugh benedict@eastaugh.net http://github.com/ionfish/ojay/commit/b126ef23911eb2207637f7902287900bb9ce1430 b126ef23911eb2207637f7902287900bb9ce1430 2009-10-07T08:36:19-07:00 2009-10-07T08:36:19-07:00 Test case for Ojay.AjaxTabs. 3b738a3fd3906045174386886dfb06a886c748c5 Benedict Eastaugh benedict@eastaugh.net