Всем доброго времени суток!

Пожалуйста, помогите:
как встроить рисунок в заголовок в turbogears.widgets.Tabber вместо текста?

TG 0.9a6
PostgreSQL

Это вообще интересно кому-то?

короче это переросло в “динамический TabControl”


import turbogears
from turbogears import widgets
class TabControl(widgets.Widget):
css =
javascript =
template = “”“<div xmlns:py=”http://purl.org/kid/ns#“>
</div>
”“”


class TabControlDesc(widgets.CoreWD):
name = “TabControl”
for_widget = TabControl()
template=“project.templates.tab_control_desc”
params =
headers=
rows=[,
]

id1=“tabcontrolID”



project.templates.tab_control_desc.kid

<div xmlns:py="http://purl.org/kid/ns#“>
${for_widget.display()}
<table id=”Table${id1}“ border=”0“ class=”tabControl“ cellspacing=”0“ cellpadding=”0“ width=”99%“>
<tbody>
<tr>
<td>
<table border=”0“ cellspacing=”0“ cellpadding=”0“ class=”tabHeader“>
<tbody>
<tr>
<td py:for=”i, head1 in enumerate(headers)“ py:attrs=”head1“ onclick=”changeTab(this);“ id=”${id1}_${i}“ class=”tabPage“>
<div py:if=”head1=='text'“ py:content=”head1“/>
<div py:if=”head1=='xml'“ py:content=”XML(head1)“/>
<div py:if=”head1=='img'“>
<img src=”${head1}“ py:attrs=”head1“ align=”absmiddle“ border=”0“ height=”30“ width=”30“ title=”img.gif“ alt='img.gif'/>
</div>
</td>
<td width=”100%“ class=”tabHeaderLine“><img src=”/tg_widgets/project/images/spacer.gif“ width=”1“ height=”1“/></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height=”400px“ valign=”top“>
<table width=”100%“ class=”tabControlBody“ cellpadding=”0“ cellspacing=”0“ style=”height:100%“ border=”0“>
<tbody>
<tr id=”${id1}“>
<td py:for=”j, row in enumerate(rows)“>
<div py:for=”td1 in row“>
<p py:if=”td1=='text'“ py:content=”td1“/>
<p py:if=”td1=='form' and getattr(td1, ‘display’,None)“ py:content=”td1.display()“/>
<p py:if=”td1=='form' and not getattr(td1, ‘display’,None)“ py:content=”td1“/>
<p py:if=”td1=='xml'“ py:content=”XML(td1)“/>
<p py:if=”td1=='img'“>
<img src=”${td1}“ py:attrs=”td1“ align=”absmiddle“ border=”0“ title=”img.gif“ alt='img.gif'></img>
</p>
<p py:if=”td1=='tabcontrol'">
<!– Start Tabbers –>
${td1.display(id1=id1+'in'+str(j))}
<!– End Tabbers –>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script type=“text/javascript”>document.onload=selectDefaultTab('${id1}_0');</script>
</div>

project/static/javascript/tabcontrol.js

function changeTab(sel){
//header
/*
* created by Tjomi4 05.09.2006
*/

i=sel.cellIndex;
num=sel.id.indexOf('_');
ID=sel.id.substring(0,num);

sel.className=“tabPageSelected”
tabbs=sel.parentNode;
for (j=0;j<tabbs.cells.length;j++){
if(i!=j && j!=tabbs.cells.length-1)
tabbs.cells.className=“tabPage”;
}
//body
tab_body=document.getElementById(ID);
tab_body.cells.style.display=“block”;

for(j=0;j<tab_body.cells.length;j++){
if(i!=j)
tab_body.cells.style.display=“none”;
}
}
function selectDefaultTab(ID){
obj=document.getElementById(ID);
changeTab(obj);
}

project/static/css/tabcontrol.css

.tabControl{
background-color:#FFFFFF;
}
.tabHeader{

}
.tabPage{
border-right:1px solid #778;
border-left:1px solid #778;
border-top:1px solid #778;
border-bottom:1px solid #778;
font: normal 12px arial;
cursor:pointer;
padding-left:10px;
padding-top:5px;
padding-bottom:6px;
background-color:#DDE;
padding-right:10px;
border-collapse:collapse;
}

.tabPageSelected{
background-color: #FFFFFF;
cursor:pointer;
font: normal 12px arial;
border-right:1px solid #778;
border-left:1px solid #778;
border-top:1px solid #778;
border-bottom:0px solid #FFFFFF;
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:5px;
border-collapse:collapse;
}
.tabHeaderLine{
border-bottom:1px solid #B0BEC7;
}
.tabControlBody tbody tr td{
/* display:none; */
border-collapse:collapse;
font: normal 12px arial;
vertical-align: top;
}

.tabControlBody{
background-color: #FBFCFD;
border-right:1px solid #B0BEC7;
border-left:1px solid #B0BEC7;
border-bottom:1px solid #B0BEC7;
}

PS жаль что на форуме нет возможности атачить файлы :(

основа взята из TabControl

особая благодарность Tony. :)

динамический TabControl с mochikit и через div-ы