Wednesday, March 11, 2009

Quick YUI Panel styling sans Javascript

In doing some application mockups, I found a quick way to skin the YUI's Panel widget without having to create Javascript objects to do it for me.

For each panel you need to just add the class yui-panel.

Here is a markup example ( ripped out all but the body stuff out):
<body class="yui-skin-sam">
<div id="doc2" class="yui-t5">
<div id="hd">Header Stuff</div>
<div id="bd">
<div id="yui-main">
<div id="panel1" class="yui-b yui-panel">
<div class="hd">Panel Header</div>
<div class="bd">Here is stuff for the body of the panel</div>
<div class="ft">Panel Footer</div>
</div>
<div id="panel2" class="yui-b yui-panel">
<div class="hd">2nd Panel Header</div>
<div class="bd">Here is stuff for the body of the panel</div>
<div class="ft">Panel Footer</div>
</div>
</div>
<div class="yui-b yui-panel">
<div class="hd">Right Col header</div>
<div class="bd">Body</div>
<div class="ft">Footer</div>
</div>
</div>
<div id="ft"> Page Footer</div>
</div>
</body>
Now I just need to figure what the best way to handle all those div's are... And figure out when to use a block and unit and grid container...

Yikes, I thought YUI was suppose to make my life easier. I need to upload an example, maybe later.

References: Container (Panel is a ), YUI

4 comments:

  1. Nice Article... Its Useful to run Different Queries in Sql...
    Android Training in bangalore

    ReplyDelete
  2. Nice one explains about the concept of scripting language in queries.@ Oracle DBA Training in Bangalore

    ReplyDelete
  3. Java script is useful for widgets and procedures.@ PHP Training in Bangalore

    ReplyDelete
  4. For management and troubleshooting of enormous databases, corporations square measure searching for qualified and licensed dispersions Hadoop experts for the duty. Hadoop Training in Chennai | Hadoop Training Chennai

    ReplyDelete