Ok, no problem. <br><div>I'm going to describe the beginner's way to make tabs with jQuery.</div><div><ol><li>Get ready: include in your environment all the things to make jQuery work properly</li><ul><li>add the libraries jQUIDevelopmentLibrary and jQDevelopmentLibrary</li>
</ul></ol></div><blockquote style="margin:0 0 0 40px;border:none;padding:0px"><blockquote style="margin:0 0 0 40px;border:none;padding:0px"><div>
there is 2 options (as far as I know):</div><div><ul><li>add them to the configuration of seaside localhost </li><ul><li>open a webbrowser --> localhost:8080/seaside --> config</li></ul><li>add them directly in your code (that's what I did):</li>
<ul><li>create an initialize method on the class side of the class starting your application:</li></ul></ul></div></blockquote></blockquote><blockquote style="margin:0 0 0 40px;border:none;padding:0px">
<blockquote style="margin:0 0 0 40px;border:none;padding:0px"><blockquote style="margin:0 0 0 40px;border:none;padding:0px"><blockquote style="margin:0 0 0 40px;border:none;padding:0px">
<div><div>initialize</div><div><span style="white-space:pre-wrap"> </span>super initialize.</div><div><span style="white-space:pre-wrap"> </span>WAKomEncoded startOn: 8080.</div>
<div><span style="white-space:pre-wrap"> </span>(self registerAsApplication: 'NameOfYourApplication')</div><div><span style="white-space:pre-wrap"> </span>preferenceAt: #sessionClass put: WUserSession;</div>
<div><span style="white-space:pre-wrap"> </span><span style="background-color:rgb(255, 255, 255)"><font color="#FF0000">addLibrary: JQDeploymentLibrary;</font></span></div>
<div><span style="background-color:rgb(255, 255, 255)"><font color="#FF0000"><span style="white-space:pre-wrap"> </span>addLibrary: JQUiDeploymentLibrary;<span style="white-space:pre-wrap"> </span></font></span></div>
<div><span style="white-space:pre-wrap"> </span>yourself.</div></div><div><br></div><div><font color="#FF0000">!!!! Don't forget to launch initialize manually in a Workspace of Seaside/Pharo !!!!</font></div>
<div><font color="#FF0000"> --> YourClass initialize. (doit = ctrl+d)</font></div></blockquote></blockquote></blockquote></blockquote><div><ol><ul><li>add the jQuery CSS</li><ul><li>Find the CSS: (there might be an easier way ^_^)</li>
<ul><li>I went on this webpage: <a href="http://localhost:8080/javascript/jquery-ui" target="_blank">http://localhost:8080/javascript/jquery-ui</a> (which is in your localhost:8080/seaside -->javascript-->jquery-ui)</li>
<li>View page source and look at the begin for the inclusion of the css:</li>
<li>click on the following link and copy the code in a .css file OR download the jquery-ui.css:<span style="font-family:monospace;font-size:medium;color:rgb(136, 18, 128);white-space:pre-wrap"><link <span>rel</span>="<span>stylesheet</span>" <span>type</span>="<span>text/css</span>" <span>href</span>="<a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" target="_blank">http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css</a>"/></span></li>
</ul><li><font face="monospace" size="3"><span style="white-space:pre-wrap">Add the CSS file to your project</span></font></li><ul><li><font face="monospace" size="3"><span style="white-space:pre-wrap">par exemple avec une classe WAFileLibrary: WAFileLibrary addFileAt:'C:/.../jquery-ui.css'</span></font></li>
</ul><li><span style="font-family:monospace;font-size:medium;white-space:pre-wrap">Download the pictures of the CSS if you want to have nice tabs </span></li></ul></ul></ol></div><blockquote style="margin:0 0 0 40px;border:none;padding:0px">
<div>2. The code for tabs: </div></blockquote><blockquote style="margin:0 0 0 40px;border:none;padding:0px"><div><div><br></div><div>renderContentOn:canvas</div></div></blockquote><blockquote style="margin:0 0 0 40px;border:none;padding:0px">
<div><div><br></div><div>canvas div</div></div><div><div> script: (canvas jQuery new tabs</div></div><div><div> selected: selectedTab;</div></div><div><div> onSelect: (canvas jQuery ajax </div></div>
<div>
<div> callbackTabs: [ :event | selectedTab := event at: #index.]));</div></div><div><div> with: [</div></div><div><div> canvas unorderedList: [</div></div><div><div> self berries keysAndValuesDo: [ :name :description |</div>
</div><div><div> canvas listItem: [</div></div><div><div> canvas anchor</div></div><div><div> url: (canvas jQuery ajax</div></div><div><div> html: [ :h | h render: description];</div>
</div><div><div> fullUrl);</div></div><div><div> with: name ] ] ] ]</div></div><div><br></div></blockquote><blockquote style="margin:0 0 0 40px;border:none;padding:0px">
berries (or whatever you want to display in the tabs)<div><div><span style="white-space:pre-wrap"> </span></div></div><div><div><span style="white-space:pre-wrap">^ Dictionary new</span></div>
</div><div><div><span style="white-space:pre-wrap"> at: 'Blackberry' put: 'The blackberry is an aggregate fruit from a bramble bush, genus Rubus in the rose family Rosaceae.';</span></div>
</div><div><div><span style="white-space:pre-wrap"> at: 'Raspberry' put: 'The raspberry is the edible fruit of a multitude of plant species in the subgenus Idaeobatus of the genus Rubus.';</span></div>
</div><div><div><span style="white-space:pre-wrap"> at: 'Blueberry' put: 'Blueberries are flowering plants in the genus Vaccinium, sect. Cyanococcus.'; </span></div></div><div><div><span style="white-space:pre-wrap"> at: 'Cloudberry' put: 'The cloudberry is a slow-growing alpine or sub-Arctic species of Rubus, producing amber-colored edible fruit.';</span></div>
</div><div><div><span style="white-space:pre-wrap"> at: 'Cranberry' put: 'Cranberries are a group of evergreen dwarf shrubs or trailing vines in the genus Vaccinium subgenus Oxycoccos, or in some treatments, in the distinct genus Oxycoccos.';</span></div>
</div><div><div><span style="white-space:pre-wrap"> yourself.</span></div></div></blockquote><div><div><span style="white-space:pre-wrap"><br></span></div></div><blockquote style="margin:0 0 0 40px;border:none;padding:0px">
<div><div><span style="white-space:pre-wrap">By the way, you can put whatever you want in the Dictionary</span></div></div><blockquote style="margin:0 0 0 40px;border:none;padding:0px">
<div><div><span style="white-space:pre-wrap">example: </span></div></div><span style="white-space:pre-wrap">Dictionary new</span><span style="white-space:pre-wrap"> </span><span style="white-space:pre-wrap">at: 'ClassName' put: ClassName new.</span></blockquote>
<blockquote style="margin:0 0 0 40px;border:none;padding:0px"><div><div><span style="white-space:pre-wrap">-->display the renderContentOn: of the class ClassName</span></div>
</div></blockquote></blockquote><blockquote style="margin:0 0 0 40px;border:none;padding:0px"><div><div><br></div><div>3. The references: to go further<span style="white-space:pre-wrap"></span></div>
</div></blockquote><div><div><div><ul><li><a href="http://book.seaside.st/book/table-of-contents?_s=wA3JDF10Y9AJ8DPO&_k=sH3D3gxh&_n&11" target="_blank">seaside book online</a></li><li><a href="http://jqueryui.com/demos/tabs/" target="_blank">Demos and explanations of jQuery</a></li>
<li><a href="http://www.cincomsmalltalk.com/blog/blogView?searchCategory=smalltalkDaily" target="_blank">Smalltalk Daily - Lots of videos concerning smalltalk</a></li><li>etc.</li></ul><div>It's a bit of a mess but I hope this help guys. :-) (should be nicer with Word or OpenOffice)</div>
</div><div>Tell me if there are mistakes.</div><div>cheers</div><div>alex</div>
<div><br></div><div><br><div class="gmail_quote">2010/12/20 Fritz Schenk <span dir="ltr"><<a href="mailto:intrader@aol.com" target="_blank">intrader@aol.com</a>></span><br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
alexandre, would you mind summarizing?<br>
Please include your source code, and what needs to be present in your<br>
environement. Seaside users might find this very helpful.<br>
Thanks<br>
<br>
_______________________________________________<br>
seaside mailing list<br>
<a href="mailto:seaside@lists.squeakfoundation.org" target="_blank">seaside@lists.squeakfoundation.org</a><br>
<a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br>
</blockquote></div><br></div></div>
</div>