Tab example

[gzmatc]

Hi, can you provide an example on how to use WickeXt to create tabs with both HTML markup and java code?  And do you have plan to provide more examples in the future?

Thanks.

[gzmatc]

Here is what I have but the tab panel doesn't draw correctly as there is a line extended out on the top right corner.  See picture below.  Thanks.



=============
Java code
=============
Tabs tabs = new Tabs("tabExample");
add(tabs);

=============
HTML markup
=============
<div wicket:id="tabExample">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <div id="fragment-1">
    <p>This is the first tab</p>
  </div>
  <div id="fragment-2">
    <p>This is the second tab</p>
  </div>
  <div id="fragment-3">
    <p>This is the third tab</p>
  </div>
</div>

[Lionel Armanet]

Some javascript/style in this post has been disabled (why?)

Hi,

The Tabs component should be applied on the UL node (and not on your
wrapping div).

The source of our UI examples are attached with this post.

Hope this helps !

Lionel Armanet

On Fri, Jan 16, 2009 at 12:17 AM, gzmatc (via Nabble)
<[hidden email]> wrote:

> Here is what I have but the tab panel doesn't draw correctly as there is a
> line extended out on the top right corner.  See picture below.  Thanks.
>
>
>
> =============
> Java code
> =============
> Tabs tabs = new Tabs("tabExample");
> add(tabs);
>
> =============
> HTML markup
> =============
> <div wicket:id="tabExample">
>   <ul>
>     <li>One</li>
>     <li>Two</li>
>     <li>Three</li>
>   </ul>
>   <div id="fragment-1">
>     <p>This is the first tab</p>
>   </div>
>   <div id="fragment-2">
>     <p>This is the second tab</p>
>   </div>
>   <div id="fragment-3">
>     <p>This is the third tab</p>
>   </div>
> </div>
>
>
> ________________________________
> View message @ http://n2.nabble.com/Tab-example-tp2164666p2165553.html
> To start a new topic under WickeXt - User forum, email
> [hidden email]
> To unsubscribe from WickeXt - User forum, click here.
>

--
__________________________________

Lionel Armanet
http://www.wickext.org
gmail: lionel.armanet*at*gmail.com

WickeXt UI components

UI components

WickeXt integrates jQuery UI components with Wicket.

Simple window component with overflow

Open a new window !

jQuery UI with Wicket !

Type a date

Accordion panel

• Test 1

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• Test 2

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Calendar

Type a date:

Tabs

• One
• Two
• Three

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Add a tab ! Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

This content can be tabbified !

[gzmatc]

Thanks for the example.  It works now.  

[cassia]

Hi

I got problems with the examples ...
Please, can you send the html and css example of using accordion?

Thank you!

[Lionel Armanet]

Hi,

I'll put some examples in the SVN directory ASAP.

Lionel