Prototype JS $$(cssRule...) → [Element…] -iron(iron man) @佛州华人论坛:佛州枫下论坛 The Rolia Forum of Florida

工作学习 / 学科技术讨论 / One javascript question in an interview for a friend -nicetomeetyou(淡定灌水); 2010-4-30 {541} (#6044137@0)
On a webpage, there are a few documents which ID start with a dedicated string, for example, "100_20_", their trailing strings after "_" are actually random number.

<div id="100_20_1">aaaaa</div>
<div id="100_20_234">bbbbb</div>
<div id="100_20_44">asfasfsa</div>
...
...

I want to have a javascript function to hide those documents from display.
For browser compatibility concern, how can you write a function to get a collection of those documents, and then set their display style attributes to "none" one by one?

没人提提答案? -nicetomeetyou(淡定灌水); 2010-5-1 (#6045227@0)
Prototype JS $$(cssRule...) → [Element…] -iron(iron man); 2010-5-1 {423} (#6045647@0)
however, there's no css selector that will return you all just those DIVs with ID starting "100_20_". so the best you can do would be get an array of DIVs (all DIVs including those you want), and check if its ID starts with "100_20_". if so, voila.

however, if it's you who's generating the HTML in the first place, then assign all those DIVs with a class "100_20_" would make it super easy for the job at hand.
http://api.prototypejs.org/language/dollardollar/

then assign all those DIVs with a class "100_20_" --- you give a very good advice, didn't think this way yet, thanks! -nicetomeetyou(淡定灌水); 2010-5-1 (#6045710@0)

Once you know all those DIVs have class "100_20_", here's a very simple way to hide them all: $$('div.100_20_').invoke("hide"); -iron(iron man); 2010-5-2 {397} (#6046717@0)
<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://api.prototypejs.org/javascripts/prototype.js"></script>
</head>
<body>
<div id="100_20_1" class="100_20_">aaaaa</div>
<div id="100_20_234" class="100_20_">bbbbb</div>
<div id="100_20_44" class="100_20_">asfasfsa</div>

<script>
$$('div.100_20_').invoke("hide");
</script>

</body>
</html>

谢谢,不过我还是用了div id, --> getdocumentbytagname() ---> for loop to check string in id using indexof().. 这个还是简单...但在hide/show时, IE正常, FF不正常, 唉.. -nicetomeetyou(淡定灌水); 2010-5-3 (#6048902@0)

一种可能性是用computed style. -coolmao(酷猫*Zensunni); 2010-5-4 {329} (#6048967@0)
The IE Syntax:
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;

The Firefox Syntax:
var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;

you just showed us why it's a good idea to use a mature javascript library -iron(iron man); 2010-5-4 (#6048997@0)

I tried it. The table on the page is a complex table, it has drag and drop, it has hide/show control, it shows the tree/branch/leaf structure. It works OK now on IE 8, but not IE 6, and not FF, -nicetomeetyou(淡定灌水); 2010-5-4 {90} (#6049606@0)
The stuffs are hidden/shown successfully, but the whole table structure gets distorted....

看来你是能够得到id，只是不懂怎么hide。 -bdbs(不多不少); 2010-5-4 (#6049672@0)

I use style="display:none" or style="display:block" that should work in all browsers, right?.. what else? It works perfectly in IE. In FF, hide is ok, but when it shows again, the table doesn't show correctly.. -nicetomeetyou(淡定灌水); 2010-5-4 (#6049789@0)

看来你是真不知道。应该用style="display:none" 和 style="display:" -bdbs(不多不少); 2010-5-4 (#6049799@0)

I tried that already, same result. The hide / show function works well in all browser types, except that in rows, if you don't hide them, every column is displayed, when you hide them and re-display them, some columns disappear.. -nicetomeetyou(淡定灌水); 2010-5-4 {69} (#6049813@0)
better show you example page here, but the website is blocked here...

你可以把code贴过来 -bdbs(不多不少); 2010-5-4 (#6049825@0)

This is the javascript code of the function -nicetomeetyou(淡定灌水); 2010-5-4 {5170} (#6049849@0)
本文发表在 rolia.net 枫下论坛function showhideMenuItems(obj_id, icon_div) {

// alert(icon_div);

// icon_div = layer_ref;

if (document.all) { //IS IE 4 or 5 (or 6 beta)
state = document.getElementById( icon_div + "_down" ).style.display;
}
if (document.layers) { //IS NETSCAPE 4 or below
state = document.layers[icon_div + "_down"].display;
}
if (document.getElementById && !document.all) {
hza = document.getElementById(icon_div + "_down");
state = hza.style.display;
}

if (state == '') {
state = 'none';
// image_file = '../sys_graphic/up52.gif';
image_file_up_state = "";
image_file_down_state = "none";
}
else {
state = 'block';
// image_file = '../sys_graphic/down52.gif';
image_file_up_state = "none";
image_file_down_state = "";

}

// alert(image_file);

if (document.all) { //IS IE 4 or 5 (or 6 beta)
// eval( "document.getElementById('" + obj_id + "').style.display = state");
// eval( "document.getElementById('" + icon_div + "').src = image_file");
eval( "document.getElementById('" + icon_div + "_up" + "').style.display = image_file_up_state");
eval( "document.getElementById('" + icon_div + "_down" + "').style.display = image_file_down_state");

var divEls = document.getElementsByTagName("tr");

for(i=0;i<divEls.length;i++)
{
// if ( divEls[i].id.indexOf( obj_id ) != -1 )
// alert("divEls[i].id: " + divEls[i].id + "; obj_id: " + obj_id);

if ( trim( divEls[i].id ).substr(0, obj_id.length) == trim( obj_id ) )
{
// alert(divEls[i].id);
// eval( "document.getElementById('" + divEls[i].id + "').style.display = state");

eval( "document.getElementById('" + divEls[i].id + "').style.display = state");

}

}

eval( "document.getElementById('" + "firstline_" + obj_id + "').style.display = state");

}
if (document.layers) { //IS NETSCAPE 4 or below_sub_menu_id
// document.layers[obj_id].display = state;
// document.layers[icon_div].src = image_file;
document.layers[icon_div + "_up"].display = image_file_up_state;
document.layers[icon_div + "_down"].display = image_file_down_state;

var divEls = document.getElementsByTagName("tr");

for(i=0;i<divEls.length;i++)
{
// if ( divEls[i].id.indexOf( obj_id ) != -1 )
// alert("divEls[i].id: " + divEls[i].id + "; obj_id: " + obj_id);

if ( trim( divEls[i].id ).substr(0, obj_id.length) == trim( obj_id ) )
{
// alert(divEls[i].id);
// eval( "document.getElementById('" + divEls[i].id + "').style.display = state");

document.layers[divEls[i].id].display = state;

}

}

document.layers["firstline_" + obj_id].display = state;

}
if (document.getElementById && !document.all) {
hza = document.getElementById(obj_id);
// hza.style.display = state;

// hza = document.getElementById(icon_div);
// hza.style.src = image_file;

hza = document.getElementById(icon_div + "_up");
hza.style.display = image_file_up_state;

hza = document.getElementById(icon_div + "_down");
hza.style.display = image_file_down_state;

var divEls = document.getElementsByTagName("tr");

for(i=0;i<divEls.length;i++)
{
// if ( divEls[i].id.indexOf( obj_id ) != -1 )
// alert("divEls[i].id: " + divEls[i].id + "; obj_id: " + obj_id);

if ( trim( divEls[i].id ).substr(0, obj_id.length) == trim( obj_id ) )
{
// alert(divEls[i].id);
// eval( "document.getElementById('" + divEls[i].id + "').style.display = state");
hza = document.getElementById(divEls[i].id);
hza.style.display = state;

}

}

hza = document.getElementById("firstline_" + obj_id);
hza.style.display = state;

}

}更多精彩文章及讨论，请光临枫下论坛 rolia.net
This is the stylesheet for the XSLT transformation on server side to build HTML. -nicetomeetyou(淡定灌水); 2010-5-4 {62950} (#6049856@0)
本文发表在 rolia.net 枫下论坛<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output
method="xml"
version="1.0"
encoding="utf8"
omit-xml-declaration="yes"
/>

<xsl:include href="portlet_title_row.xsl"/>
<xsl:include href="edit_menu_text.xsl"/>

<xsl:param name="session_id" select="0"/>
<xsl:param name="language_code" select="'8859_1'"/>
<xsl:param name="logon_id" select="''"/>
<xsl:param name="sys_role" select="''"/>

<xsl:param name="portlet_title_fore_color" select="'black'"/>
<xsl:param name="portlet_title_bg_color" select="'black'"/>
<xsl:param name="portlet_title_font_size" select="'12px'"/>

<xsl:param name="main_menu_border_color" select="'white'"/>
<xsl:param name="pg_bg_color" select="'white'"/>
<xsl:param name="fore_color" select="'white'"/>
<xsl:param name="comp_inter_color" select="'white'"/>

<xsl:param name="mouseover_bg_color" select="'black'"/>
<xsl:param name="comp_bg_color" select="'black'"/>

<xsl:param name="debug_mode" select="'no'"/>



<xsl:template match="/edit_menu">

<xsl:if test="$debug_mode = 'yes'">
<div class="debug_info"><xsl:text>edit_menu.xsl</xsl:text></div>
</xsl:if>

<xsl:variable name="titlename">
<xsl:call-template name="edit_menu.Portlet_Title" >
<xsl:with-param name="language_code" select="$language_code"/>
</xsl:call-template>
</xsl:variable>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>
<td width="100%">

<xsl:call-template name="portlet_title_row" >
<xsl:with-param name="text" select="$titlename"/>

<xsl:with-param name="titlefontsize" select="$portlet_title_font_size"/>
<xsl:with-param name="borderColor" select="$main_menu_border_color"/>
<xsl:with-param name="textColor" select="$portlet_title_fore_color"/>
<xsl:with-param name="CaptionBgColor" select="$portlet_title_bg_color"/>

<xsl:with-param name="showedit" select="'no'"/>
<xsl:with-param name="showmaximize" select="'no'"/>
<xsl:with-param name="showclose" select="'no'"/>
<xsl:with-param name="showinfo" select="'no'"/>
<xsl:with-param name="showbrowseicon" select="'no'"/>

</xsl:call-template>

</td>
</tr>

</table>

<table>

<tr>
<td>
<xsl:text>      </xsl:text>
</td>
<td style="color:blue;font-size:12px">
<xsl:call-template name="edit_menu.Portlet_Desc" >
<xsl:with-param name="language_code" select="$language_code"/>
</xsl:call-template>
</td>
<td>
<xsl:text>      </xsl:text>
</td>
</tr>
</table>
<hr/>

<table width="100%" border="0" border-spacing="0px" cellpadding="0" cellspacing="0" >

<xsl:for-each select="/edit_menu/val_item">

<xsl:variable name="line_num">
<xsl:number />
</xsl:variable>

<xsl:if test="current()/child::menu_title != preceding-sibling::val_item[1]/child::menu_title">
<tr>
<td align="left" nowrap="yes" style="color:green">
<font>
<xsl:attribute name="color">
<xsl:value-of select="$pg_bg_color" />
</xsl:attribute>
<xsl:text> </xsl:text>
</font>

</td>
<td>
<font>
<xsl:attribute name="color">
<xsl:value-of select="$pg_bg_color" />
</xsl:attribute>
<xsl:text> </xsl:text>
</font>

</td>
<td>
<font>
<xsl:attribute name="color">
<xsl:value-of select="$pg_bg_color" />
</xsl:attribute>
<xsl:text> </xsl:text>
</font>
</td>
</tr>
</xsl:if>
<xsl:if test="current()/child::menu_title = preceding-sibling::val_item[1]/child::menu_title">
<xsl:if test="current()/child::category != preceding-sibling::val_item[1]/child::category">
<tr>
<td align="left" nowrap="yes" style="color:green">
<font>
<xsl:attribute name="color">
<xsl:value-of select="$pg_bg_color" />
</xsl:attribute>
<xsl:text> </xsl:text>
</font>

</td>
<td align="center">
<font>
<xsl:attribute name="color">
<xsl:value-of select="black" />
</xsl:attribute>
<xsl:text> </xsl:text>
</font>
</td>
<td>
<font>
<xsl:attribute name="color">
<xsl:value-of select="$pg_bg_color" />
</xsl:attribute>
<xsl:text> </xsl:text>
</font>
</td>
</tr>
</xsl:if>
</xsl:if>

<tr class="footer_footertext" >

<xsl:choose>
<xsl:when test="current()/child::menu_title = preceding-sibling::val_item[1]/child::menu_title">

<xsl:choose>
<xsl:when test="current()/child::category = preceding-sibling::val_item[1]/child::category">
<xsl:attribute name="id">
<xsl:value-of select="concat(./main_menu_id, '_', ./category_id, '_', ./sub_menu_id)" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="concat(./main_menu_id, '_', ./category_id, '_', ./sub_menu_id)" />
</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="id">
<xsl:value-of select="concat('category_line_',./main_menu_id, '_', ./category_id, '_', ./sub_menu_id)" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="concat('category_line_',./main_menu_id, '_', ./category_id, '_', ./sub_menu_id)" />
</xsl:attribute>
</xsl:otherwise>
</xsl:choose>

</xsl:when>
<xsl:otherwise>
<xsl:attribute name="id">
<xsl:value-of select="concat('title_line_',./main_menu_id, '_', ./category_id, '_', ./sub_menu_id)" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="concat('title_line_',./main_menu_id, '_', ./category_id, '_', ./sub_menu_id)" />
</xsl:attribute>
</xsl:otherwise>

</xsl:choose>

<xsl:attribute name="style">
<xsl:value-of select="concat('font-size:12px')" />
</xsl:attribute>

<xsl:choose>
<xsl:when test="current()/child::menu_title != 'N/A'">
<xsl:choose>
<xsl:when test="$line_num = 1">
<td nowrap="yes" style="color:green">

<a href="#">
<xsl:attribute name="onClick">
javascript: {
SwitchMenu('main_title', '<xsl:value-of select="./main_menu_id" />', '', '', 'up' );
}
</xsl:attribute>
<img src="../sys_graphic/up11.gif" width="14" height="14" border="0"></img>
</a>
<a href="#">
<xsl:attribute name="onClick">
javascript: {
SwitchMenu('main_title', '<xsl:value-of select="./main_menu_id" />', '', '', 'down' );
}
</xsl:attribute>
<img src="../sys_graphic/down11.gif" width="14" height="14" border="0"></img>
</a>

<xsl:text> </xsl:text>

<a href="#" style="text-decoration:none;color:blue;font-size:18px;font-weight:bold;">
<xsl:attribute name="id">
<xsl:value-of select="concat('menu_title_',$line_num)" />
</xsl:attribute>
<xsl:attribute name="onmouseover">
javascript: {
document.getElementById("menu_title_<xsl:value-of select="$line_num" />").style.color = "green";
document.getElementById("menu_title_<xsl:value-of select="$line_num" />").style.fontSize = "18px";
mouseOverTarget('title', '<xsl:value-of select="current()/child::main_menu_id" />', '<xsl:value-of select="current()/child::menu_title" />', '', '');
}
</xsl:attribute>
<xsl:attribute name="onmouseout">
javascript: {
document.getElementById("menu_title_<xsl:value-of select="$line_num" />").style.color = "blue";
document.getElementById("menu_title_<xsl:value-of select="$line_num" />").style.fontSize = "18px";

}
</xsl:attribute>
<xsl:value-of select="current()/child::menu_title" />
</a>
<xsl:text> </xsl:text>
<a href="#">
<xsl:attribute name="onClick">
javascript: {
// alert('loadItemContent...');
loadMainMenuTitleContent('<xsl:value-of select="./main_menu_id" />');
}
</xsl:attribute>
<img src="../sys_graphic/edit-page-grey.gif" border="0" />
</a>

</td>
</xsl:when>
<xsl:when test="current()/child::menu_title != preceding-sibling::val_item[1]/child::menu_title">
<td nowrap="yes" style="color:green">

<a href="#">
<xsl:attribute name="onClick">
javascript: {
SwitchMenu('main_title', '<xsl:value-of select="./main_menu_id" />', '<xsl:value-of select="./category_id" />', '', 'up' );
}
</xsl:attribute>
<img src="../sys_graphic/up11.gif" width="14" height="14" border="0"></img>
</a>
<a href="#">
<xsl:attribute name="onClick">
javascript: {
SwitchMenu('main_title', '<xsl:value-of select="./main_menu_id" />', '<xsl:value-of select="./category_id" />', '', 'down' );
}
</xsl:attribute>
<img src="../sys_graphic/down11.gif" width="14" height="14" border="0"></img>
</a>

<xsl:text> </xsl:text>

<a href="#" style="text-decoration:none;color:blue;font-size:18px;font-weight:bold;">
<xsl:attribute name="id">
<xsl:value-of select="concat('menu_title_',$line_num)" />
</xsl:attribute>
<xsl:attribute name="onmouseover">
javascript: {
document.getElementById("menu_title_<xsl:value-of select="$line_num" />").style.color = "green";
document.getElementById("menu_title_<xsl:value-of select="$line_num" />").style.fontSize = "18px";
mouseOverTarget('title', '<xsl:value-of select="current()/child::main_menu_id" />', '<xsl:value-of select="current()/child::menu_title" />', '', '');
}
</xsl:attribute>
<xsl:attribute name="onmouseout">
javascript: {
document.getElementById("menu_title_<xsl:value-of select="$line_num" />").style.color = "blue";
document.getElementById("menu_title_<xsl:value-of select="$line_num" />").style.fontSize = "18px";

}
</xsl:attribute>
<xsl:value-of select="current()/child::menu_title" />
</a>
<xsl:text> </xsl:text>
<a href="#">
<xsl:attribute name="onClick">
javascript: {
// alert('loadItemContent...');
loadMainMenuTitleContent('<xsl:value-of select="./main_menu_id" />' );
}
</xsl:attribute>
<img src="../sys_graphic/edit-page-grey.gif" border="0" />
</a>
</td>
</xsl:when>
<xsl:otherwise>
<td align="center" nowrap="yes" style="color:green">
<font>
<xsl:attribute name="color">
<xsl:value-of select="black" />
</xsl:attribute>

<xsl:text>|</xsl:text>
</font>

</td>
</xsl:otherwise>

</xsl:choose>
</xsl:when>

<xsl:otherwise>
<xsl:call-template name="edit_menu.CreateNewTitle" >
<xsl:with-param name="language_code" select="$language_code"/>
</xsl:call-template>
<a href="#">
<xsl:attribute name="onClick">
javascript: {
// alert('loadItemContent...');
loadMainMenuTitleContent('<xsl:value-of select="./main_menu_id" />' );
}
</xsl:attribute>
<img src="../sys_graphic/edit-page-grey.gif" border="0" />
</a>
</xsl:otherwise>

</xsl:choose>

<td>
<xsl:text>      </xsl:text>
</td>

<td>
<xsl:choose>

<xsl:when test="current()/child::menu_title != preceding-sibling::val_item[1]/child::menu_title">
<td nowrap="yes" width="100%">
<a href="#">
<xsl:attribute name="onClick">
javascript:{
showhideMenuItems('<xsl:value-of select="concat( ./main_menu_id, '_', ./category_id)" />', '<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id)" />');
}
</xsl:attribute>
<img src="../sys_graphic/up52.gif" border="0" style="display:block">
<xsl:attribute name="id">
<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id, '_down')" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id, '_down')" />
</xsl:attribute>

</img>
<img src="../sys_graphic/down52.gif" border="0" style="display:none">
<xsl:attribute name="id">
<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id, '_up')" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id, '_up')" />
</xsl:attribute>

</img>
</a>
</td>
</xsl:when>

<xsl:when test="preceding-sibling::val_item[1]/child::menu_title = not(node())">
<td nowrap="yes" width="100%">
<a href="#">
<xsl:attribute name="onClick">
javascript:{
showhideMenuItems('<xsl:value-of select="concat( ./main_menu_id, '_', ./category_id)" />', '<xsl:value-of select="concat('icon_menu_title_', ./main_menu_id)" />');
}
</xsl:attribute>
<img src="../sys_graphic/up52.gif" border="0" style="display:block">
<xsl:attribute name="id">
<xsl:value-of select="concat('icon_menu_title_', ./main_menu_id, '_down')" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="concat('icon_menu_title_', ./main_menu_id, '_down')" />
</xsl:attribute>

</img>
<img src="../sys_graphic/down52.gif" border="0" style="display:none">
<xsl:attribute name="id">
<xsl:value-of select="concat('icon_menu_title_', ./main_menu_id, '_up')" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="concat('icon_menu_title_', ./main_menu_id, '_up')" />
</xsl:attribute>

</img>
</a>
</td>
</xsl:when>

<xsl:otherwise>
<td>
<xsl:text> </xsl:text>
</td>
</xsl:otherwise>
</xsl:choose>
</td>

<td>
<xsl:text>      </xsl:text>
</td>

<xsl:if test="current()/child::menu_title != 'N/A'">
<xsl:choose>
<xsl:when test="$line_num = 1">
<td nowrap="yes" >

<div style="text-decoration:none;cursor:pointer;color:red;font-size:16px" >
<xsl:attribute name="id">
<xsl:value-of select="concat('category_1')" />
</xsl:attribute>

<xsl:attribute name="onMousedown">
javascript: {
makeCategoryDraggable(
this,
'<xsl:value-of select="current()/child::category" />',
'<xsl:value-of select="current()/child::menu_title" />',
'<xsl:value-of select="current()/child::category_id" />',
'<xsl:value-of select="current()/child::main_menu_id" />' );
}
</xsl:attribute>

<xsl:attribute name="onmouseover">
javascript: {
document.getElementById("category_1").style.color = "green";
document.getElementById("category_1").style.fontSize = "16px";
mouseOverTarget('category', '<xsl:value-of select="current()/child::main_menu_id" />', '<xsl:value-of select="current()/child::menu_title" />', '<xsl:value-of select="current()/child::category_id" />', '<xsl:value-of select="current()/child::category" />');

}
</xsl:attribute>
<xsl:attribute name="onmouseout">
javascript: {
document.getElementById("category_<xsl:value-of select="$line_num" />").style.color = "red";
document.getElementById("category_<xsl:value-of select="$line_num" />").style.fontSize = "16px";
mouseOutTarget();

}
</xsl:attribute>

<xsl:choose>
<xsl:when test="current()/child::category != ''">

<a href="#">
<xsl:attribute name="onClick">
javascript: {
SwitchMenu('main_category', '<xsl:value-of select="./main_menu_id" />', '<xsl:value-of select="./category_id" />', '', 'up' );
}
</xsl:attribute>
<img src="../sys_graphic/up11.gif" width="14" height="14" border="0"></img>

<img src="../sys_graphic/down11.gif" width="14" height="14" border="0"></img>
</a>
<xsl:text> </xsl:text>

<xsl:value-of select="current()/child::category" />

<xsl:text> </xsl:text>

<a href="#">
<xsl:attribute name="onClick">
javascript: {
// alert('loadItemContent...');
loadCategoryContent('<xsl:value-of select="./main_menu_id" />','<xsl:value-of select="./category_id" />' );
}
</xsl:attribute>
<img src="../sys_graphic/edit-page-grey.gif" border="0" />
</a>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="edit_menu.CreateNewCategory" >
<xsl:with-param name="language_code" select="$language_code"/>
</xsl:call-template>
<a href="#">
<xsl:attribute name="onClick">
javascript: {
// alert('loadItemContent...');
loadCategoryContent('<xsl:value-of select="./main_menu_id" />','<xsl:value-of select="./category_id" />' );
}
</xsl:attribute>
<img src="../sys_graphic/edit-page-grey.gif" border="0" />
</a>
</xsl:otherwise>
</xsl:choose>

</div>
</td>
</xsl:when>
<xsl:when test="current()/child::category != preceding-sibling::val_item[1]/child::category ">
<td nowrap="yes" >

<div style="text-decoration:none;cursor:pointer;color:red;font-size:16px" >
<xsl:attribute name="id">
<xsl:value-of select="concat('category_',$line_num)" />
</xsl:attribute>

<xsl:attribute name="onMousedown">
javascript: {

makeCategoryDraggable(
this,
'<xsl:value-of select="current()/child::category" />',
'<xsl:value-of select="current()/child::menu_title" />',
'<xsl:value-of select="current()/child::category_id" />',
'<xsl:value-of select="current()/child::main_menu_id" />' );

}
</xsl:attribute>

<xsl:attribute name="onmouseover">
javascript: {
document.getElementById("category_<xsl:value-of select="$line_num" />").style.color = "green";
document.getElementById("category_<xsl:value-of select="$line_num" />").style.fontSize = "16px";
mouseOverTarget('category', '<xsl:value-of select="current()/child::main_menu_id" />', '<xsl:value-of select="current()/child::menu_title" />', '<xsl:value-of select="current()/child::category_id" />', '<xsl:value-of select="current()/child::category" />');

}
</xsl:attribute>
<xsl:attribute name="onmouseout">
javascript: {
document.getElementById("category_<xsl:value-of select="$line_num" />").style.color = "red";
document.getElementById("category_<xsl:value-of select="$line_num" />").style.fontSize = "16px";
mouseOutTarget();

}
</xsl:attribute>

<xsl:choose>
<xsl:when test="current()/child::category != ''">

<a href="#">
<xsl:attribute name="onClick">
javascript: {
SwitchMenu('main_category', '<xsl:value-of select="./main_menu_id" />', '<xsl:value-of select="./category_id" />', '', 'up' );
}
</xsl:attribute>
<img src="../sys_graphic/up11.gif" width="14" height="14" border="0"></img>
</a>
<a href="#">
<xsl:attribute name="onClick">
javascript: {
SwitchMenu('main_category', '<xsl:value-of select="./main_menu_id" />', '<xsl:value-of select="./category_id" />', '', 'down' );
}
</xsl:attribute>
<img src="../sys_graphic/down11.gif" width="14" height="14" border="0"></img>
</a>
<xsl:text> </xsl:text>

<xsl:value-of select="current()/child::category" />

<xsl:text> </xsl:text>

<a href="#">
<xsl:attribute name="onClick">
javascript: {
// alert('loadItemContent...');
loadCategoryContent('<xsl:value-of select="./main_menu_id" />','<xsl:value-of select="./category_id" />' );
}
</xsl:attribute>
<img src="../sys_graphic/edit-page-grey.gif" border="0" />
</a>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="edit_menu.CreateNewCategory" >
<xsl:with-param name="language_code" select="$language_code"/>
</xsl:call-template>
<a href="#">
<xsl:attribute name="onClick">
javascript: {
// alert('loadItemContent...');
loadCategoryContent('<xsl:value-of select="./main_menu_id" />','<xsl:value-of select="./category_id" />' );
}
</xsl:attribute>
<img src="../sys_graphic/edit-page-grey.gif" border="0" />
</a>
</xsl:otherwise>
</xsl:choose>

</div>
</td>
</xsl:when>
<xsl:otherwise>
<xsl:choose>
<xsl:when test="current()/child::menu_title != preceding-sibling::val_item[1]/child::menu_title ">

<td nowrap="yes">

<div style="text-decoration:none;cursor:pointer;color:red;font-size:16px" >
<xsl:attribute name="id">
<xsl:value-of select="concat('category_',$line_num)" />
</xsl:attribute>

<xsl:attribute name="onMousedown">
javascript: {
makeCategoryDraggable(
this,
'<xsl:value-of select="current()/child::category" />',
'<xsl:value-of select="current()/child::menu_title" />',
'<xsl:value-of select="current()/child::category_id" />',
'<xsl:value-of select="current()/child::main_menu_id" />' );
}
</xsl:attribute>

<xsl:attribute name="onmouseover">
javascript: {
document.getElementById("category_<xsl:value-of select="$line_num" />").style.color = "green";
document.getElementById("category_<xsl:value-of select="$line_num" />").style.fontSize = "16px";
mouseOverTarget('category', '<xsl:value-of select="current()/child::main_menu_id" />', '<xsl:value-of select="current()/child::menu_title" />', '<xsl:value-of select="current()/child::category_id" />', '<xsl:value-of select="current()/child::category" />');

}
</xsl:attribute>
<xsl:attribute name="onmouseout">
javascript: {
document.getElementById("category_<xsl:value-of select="$line_num" />").style.color = "red";
document.getElementById("category_<xsl:value-of select="$line_num" />").style.fontSize = "16px";
mouseOutTarget();

}
</xsl:attribute>

<xsl:choose>
<xsl:when test="current()/child::category != ''">

<a href="#">
<xsl:attribute name="onClick">
javascript: {
SwitchMenu('main_category', '<xsl:value-of select="./main_menu_id" />', '<xsl:value-of select="./category_id" />', '', 'up' );
}
</xsl:attribute>
<img src="../sys_graphic/up11.gif" width="14" height="14" border="0"></img>
</a>
<a href="#">
<xsl:attribute name="onClick">
javascript: {
SwitchMenu('main_category', '<xsl:value-of select="./main_menu_id" />', '<xsl:value-of select="./category_id" />', '', 'down' );
}
</xsl:attribute>
<img src="../sys_graphic/down11.gif" width="14" height="14" border="0"></img>
</a>
<xsl:text> </xsl:text>

<xsl:value-of select="current()/child::category" />

<xsl:text> </xsl:text>

<a href="#">
<xsl:attribute name="onClick">
javascript: {
// alert('loadItemContent...');
loadCategoryContent('<xsl:value-of select="./main_menu_id" />','<xsl:value-of select="./category_id" />' );
}
</xsl:attribute>
<img src="../sys_graphic/edit-page-grey.gif" border="0" />
</a>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="edit_menu.CreateNewCategory" >
<xsl:with-param name="language_code" select="$language_code"/>
</xsl:call-template>
<a href="#">
<xsl:attribute name="onClick">
javascript: {
// alert('loadItemContent...');
loadCategoryContent('<xsl:value-of select="./main_menu_id" />','<xsl:value-of select="./category_id" />' );
}
</xsl:attribute>
<img src="../sys_graphic/edit-page-grey.gif" border="0" />
</a>
</xsl:otherwise>
</xsl:choose>

</div>
</td>

</xsl:when>
<xsl:otherwise>
<td align="left" nowrap="yes" style="color:green">
<font>
<xsl:attribute name="color">
<xsl:value-of select="$pg_bg_color" />
</xsl:attribute>
<xsl:text> </xsl:text>
</font>

</td>
</xsl:otherwise>
</xsl:choose>
</xsl:otherwise>

</xsl:choose>
</xsl:if>

<td>
<xsl:text>      </xsl:text>

</td>

<xsl:choose>

<xsl:when test="current()/child::category != preceding-sibling::val_item[1]/child::category">
<td nowrap="yes" width="100%">
<a href="#">
<xsl:attribute name="onClick">
javascript:{
showhideMenuItems('<xsl:value-of select="concat( ./main_menu_id, '_', ./category_id)" />', '<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id)" />');
}
</xsl:attribute>
<img src="../sys_graphic/up52.gif" border="0" style="display:">
<xsl:attribute name="id">
<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id, '_down')" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id, '_down')" />
</xsl:attribute>

</img>
<img src="../sys_graphic/down52.gif" border="0" style="display:none">
<xsl:attribute name="id">
<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id, '_up')" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id, '_up')" />
</xsl:attribute>

</img>
</a>
</td>
</xsl:when>

<xsl:when test="preceding-sibling::val_item[1]/child::category = not(node())">
<td nowrap="yes" width="100%">
<a href="#">
<xsl:attribute name="onClick">
javascript:{
showhideMenuItems('<xsl:value-of select="concat( ./main_menu_id, '_', ./category_id)" />', '<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id)" />');
}
</xsl:attribute>
<img src="../sys_graphic/up52.gif" border="0" style="display:block">
<xsl:attribute name="id">
<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id, '_down')" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id, '_down')" />
</xsl:attribute>

</img>
<img src="../sys_graphic/down52.gif" border="0" style="display:none">
<xsl:attribute name="id">
<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id, '_up')" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="concat('icon_menu_category_', ./main_menu_id, '_', ./category_id, '_up')" />
</xsl:attribute>

</img>
</a>
</td>
</xsl:when>

<xsl:otherwise>
<td>
<xsl:text> </xsl:text>
</td>
</xsl:otherwise>
</xsl:choose>
<td>
<xsl:text>      </xsl:text>
</td>

<td nowrap="yes" style="color:green;font-size:12px">

<div style="text-decoration:none;cursor:pointer;display:" >

<xsl:choose>

<xsl:when test="preceding-sibling::val_item[1]/child::category = not(node())">
<xsl:attribute name="id">
<xsl:value-of select="concat('firstline_',./main_menu_id, '_', ./category_id)" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="concat('firstline_',./main_menu_id, '_', ./category_id)" />
</xsl:attribute>

</xsl:when>

<xsl:when test="current()/child::category != preceding-sibling::val_item[1]/child::category">
<xsl:attribute name="id">
<xsl:value-of select="concat('firstline_',./main_menu_id, '_', ./category_id)" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="concat('firstline_',./main_menu_id, '_', ./category_id)" />
</xsl:attribute>

</xsl:when>

<xsl:otherwise>
<xsl:attribute name="id">
<xsl:value-of select="concat('followingline_',./main_menu_id, '_', ./category_id)" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="concat('followingline_',./main_menu_id, '_', ./category_id)" />
</xsl:attribute>
</xsl:otherwise>
</xsl:choose>

<xsl:if test="current()/child::menu_title != 'N/A'">
<xsl:if test="current()/child::category != 'N/A'">

<xsl:if test="./title != ''">
<xsl:attribute name="onmousemove">
javascript: {
makeItemDraggable(
this,
"<xsl:value-of select="./title" />",
"<xsl:value-of select="./menu_title" />",
"<xsl:value-of select="./main_menu_id" />",
"<xsl:value-of select="./category_id" />",
"<xsl:value-of select="./sub_menu_id" />" );
}
</xsl:attribute>


<xsl:attribute name="onMouseup">
javascript: {

document.getElementById("<xsl:value-of select="concat(./main_menu_id, '_', ./category_id, '_', ./sub_menu_id)" />").style.color = "green";
document.getElementById("<xsl:value-of select="concat(./main_menu_id, '_', ./category_id, '_', ./sub_menu_id)" />").style.fontSize = "12px";

}
</xsl:attribute>
<a href="#">
<xsl:attribute name="onClick">
javascript: {
SwitchMenu('main_menu', '<xsl:value-of select="./main_menu_id" />', '<xsl:value-of select="./category_id" />', '<xsl:value-of select="./sub_menu_id" />', 'up' );
}
</xsl:attribute>
<img src="../sys_graphic/up11.gif" width="14" height="14" border="0"></img>
</a>
<a href="#">
<xsl:attribute name="onClick">
javascript: {
SwitchMenu('main_menu', '<xsl:value-of select="./main_menu_id" />', '<xsl:value-of select="./category_id" />', '<xsl:value-of select="./sub_menu_id" />', 'down' );
}
</xsl:attribute>
<img src="../sys_graphic/down11.gif" width="14" height="14" border="0"></img>
</a>

<xsl:text> </xsl:text>
<xsl:value-of select="./title" />
<xsl:text> </xsl:text>

</xsl:if>

<xsl:choose>
<xsl:when test="./title != ''">
<a href="#">
<xsl:attribute name="onClick">
javascript: {
// alert('loadItemContent...');
loadItemContent('<xsl:value-of select="./main_menu_id" />', '<xsl:value-of select="./sub_menu_id" />' );
}
</xsl:attribute>
<img src="../sys_graphic/edit-page-grey.gif" border="0" />
</a>

<a target="new">
<xsl:attribute name="href">
<xsl:value-of select="./weblink" />
</xsl:attribute>
<img src="../sys_graphic/open.gif" border="0" />
</a>

</xsl:when>
<xsl:otherwise>
<xsl:call-template name="edit_menu.CreateNewItem" >
<xsl:with-param name="language_code" select="$language_code"/>
</xsl:call-template>
<a href="#">
<xsl:attribute name="onClick">
javascript: {
// alert('loadItemContent...');
loadItemContent('<xsl:value-of select="./main_menu_id" />', '<xsl:value-of select="./sub_menu_id" />' );
}
</xsl:attribute>

<img src="../sys_graphic/edit-page-grey.gif" border="0" />
</a>

</xsl:otherwise>
</xsl:choose>
</xsl:if>
</xsl:if>

</div>

</td>

</tr>

</xsl:for-each>
<tr>
<td colspan="4" >
<xsl:attribute name="style">
<xsl:value-of select="concat('color:',$pg_bg_color,';background-color:',$pg_bg_color,'')" />
</xsl:attribute>
<xsl:text> </xsl:text>
</td>
</tr>

</table>

</xsl:template>

</xsl:stylesheet>更多精彩文章及讨论，请光临枫下论坛 rolia.net

拜托贴client side的code好不好？Javascript不是server side script。 -bdbs(不多不少); 2010-5-4 (#6049920@0)

Gosh, it is not allowed to submit whole codes, looks like there are some forbidden words in the code and Rolia blocks it...I give up. -nicetomeetyou(淡定灌水); 2010-5-4 (#6050003@0)
I PM your the website by sending an image site. -nicetomeetyou(淡定灌水); 2010-5-4 (#6050024@0)

I quickly double-checked: display: and display:block actually have the same result. -nicetomeetyou(淡定灌水); 2010-5-4 (#6049826@0)
Is "display:" a CSS standard? -liquid(豆泡松果之松果豆泡); 2010-5-4 (#6049883@0)

yes -bdbs(不多不少); 2010-5-4 (#6049909@0)

Please let me know if you have received my PM, otherwise, I think of other way to send you the link. -nicetomeetyou(淡定灌水); 2010-5-4 (#6050036@0)

不就是一个截图吗？干吗还要PM来PM去的。截图又没有source code，有什么用？ -bdbs(不多不少); 2010-5-4 (#6050247@0)

URL has been blocked by Rolia, I cannot paste it in post, so I send am image telling you the URL.. -nicetomeetyou(淡定灌水); 2010-5-4 (#6050309@0)

tried, got HTTP Status 404 - /Companypage/reg/editmenu type Status report message /Companypage/reg/editmenu description The requested resource (/Companypage/reg/editmenu) is not available. Apache Tomcat/6.0.18 -bdbs(不多不少); 2010-5-4 (#6050340@0)

I was just curious. The CSS2 standard for display property didn't say about empty string being a valid value. -liquid(豆泡松果之松果豆泡); 2010-5-4 (#6050041@0)

那个不设就是空，设空就是RESET到缺省状态。 -bdbs(不多不少); 2010-5-4 (#6050248@0)

didn't you try my sample code above? it works with both ie and ff. isn't that the simplest solution you can ever use in this situation? -iron(iron man); 2010-5-4 (#6048992@0)

问题条件不足，没说不能用 JQuery，一行就搞掂 -sowen(昂居居); 2010-5-4 (#6049177@0)

Exactly. How do you do it in jQuery? -iron(iron man); 2010-5-4 (#6049245@0)

Google一下，Jquery Wild Card -szs11(Hedge); 2010-5-4 (#6049806@0)

这种过份简单的问题，一看是牛哥提的，俺就懒得回答了。 -bdbs(不多不少); 2010-5-4 (#6049658@0)

兄弟，该给的我可都给了，眼巴巴的等着你帮助呢，是骆是马，水平低高，溜溜看啊，你不会撂下这句话就走了吧。。。。 -nicetomeetyou(淡定灌水); 2010-5-5 (#6051082@0)

你啥都没给呀。 (#6050340@0) -bdbs(不多不少); 2010-5-5 (#6051114@0)

I posted the link in YTG, they don't block the link. -nicetomeetyou(淡定灌水); 2010-5-5 (#6052454@0)

这是我想到的最简单高效又不需要任何工具的方法，很多时候最笨的方法就是最好的 -yuanml(加拿大的家); 2010-5-4 {152} (#6049867@0)
假设id的范围是100_20_1 到 100_20_1000，可以简单的用一个循环搞定，
try { document.getElementById('100_20_' + i).style.display='none' } catch{ ... }
document.getElementsByTagName("div") -billdxy(who's the next); 2010-5-4 {192} (#6050263@0)
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i ++){
if (divs[i].id.indexof('100_20_') >= 0){
//Hide div
divs[i].style.display = ‘none';
}
}

shake hand, that is exactly what I did. -nicetomeetyou(淡定灌水); 2010-5-4 (#6050313@0)

@Florida

Prototype JS $$(cssRule...) → [Element…]

Replies, comments and Discussions:

More Topics