Skip to content

Instantly share code, notes, and snippets.

@lexrus

lexrus/muzix.html

Created December 24, 2012 08:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save lexrus/4368334 to your computer and use it in GitHub Desktop.
Save lexrus/4368334 to your computer and use it in GitHub Desktop.
Download ZIP
My XLST table sorting demo. Required IE 5.0+
Raw
muzix.html
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>LeXRus' CodeX | XMLDOM | Transform a XML file with XSLT &amp; XMLDOM</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script xmlns:query="http://query@LexTang.com/namespace/"><!--//XR.Web.Request.Query["expr.(string)"]
var from,num,select,order,sort;
from=parseInt(window.location.href.replace(/.*\?.*from=(\d+)\&?.*/i,"$1")).toString();
num=parseInt(window.location.href.replace(/.*\?.*num=(\d+)\&?.*/i,"$1")).toString();
select=window.location.href.replace(/.*\?.*select=([ \w@=\(\)\[\]\.\*\\\/]+).*/i,"$1").toString();//the Filter of strXPath
order=window.location.href.replace(/.*\?.*order=((\+|\-)).*/i,"$1").toString();
if(from=="NaN"){from="1";}if(num=="NaN"){num="5";}
if(select==window.location.href){select="name(.)"}//XPath mathod: name(.)//return the name of current node.
if(order==window.location.href){order="+"}
sort=window.location.href.replace(/.*(\\|\/)(.*)\?.*/i,"$2")+"\?from="+from+"\&num="+num+"\&select="+select+"\&order="+order;
function ascRelist(select){
document.write("<a href=\""+sort.replace(/(.*select=).*\&order=.*/i,"$1"+select+"\&order=\+")+"\">5<\/a>");}
function desRelist(select){
document.write("<a href=\""+sort.replace(/(.*select=).*\&order=.*/i,"$1"+select+"\&order=\-")+"\">6<\/a>");}
function btNav(ttt){return sort.replace(/(.*from=)\d+(\&.*)/i,"$1"+ttt+"$2");}
var xmlDoc=new ActiveXObject("Msxml2.DOMDocument.3.0");
var xslt=new ActiveXObject("Msxml2.XSLTemplate.3.0");
var xslDoc=new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
var xslNav=new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
var xslProc;
xmlDoc.async=false;xmlDoc.load("muzix.xml");xslDoc.async=false;xslNav.async=false;
var strorder,strXslt;
if(order=="+"){strorder="ascending"}else{strorder="descending"}//XR:Repeat Region:
strXslt="<xsl:stylesheet xmlns:xsl='http://web.archive.org/web/20030604214644/http://www.w3.org//1999/XSL/Transform' version='1.0'><xsl:template match='muzix/music'><script><xsl:text>var total=</xsl:text><xsl:value-of select='count(*)'/><xsl:text>;</xsl:text><\/script><xsl:for-each select='*[position()>="+from+"][not(position()>"+num+")]'>"
+"<xsl:sort select='"+select+"' data-type='text' order='"+strorder+"' />"
+"<tr align='center'><xsl:choose><xsl:when test='position() mod 2=0'><xsl:attribute name='bgcolor'>#fff7ff</xsl:attribute></xsl:when><xsl:otherwise><xsl:attribute name='bgcolor'>#ffffff</xsl:attribute></xsl:otherwise></xsl:choose><td><xsl:value-of select='name(.)'/></td><td><xsl:value-of select='@name'/></td><td><xsl:value-of select='@length'/></td><td><xsl:value-of select='@artist'/></td><td><xsl:value-of select='.'/></td></tr>"
+"</xsl:for-each></xsl:template></xsl:stylesheet>";
xslDoc.loadXML(strXslt);xslt.stylesheet = xslDoc;xslProc = xslt.createProcessor();xslProc.input = xmlDoc;xslProc.transform();
var result=xslProc.output.replace(/<\?xml version=\"1.0\".*\?>/i,"");
//XR:Navbar Version: 0.70b:
strXslt="<xsl:stylesheet xmlns:xsl='http://web.archive.org/web/20030604214644/http://www.w3.org//1999/XSL/Transform' version='1.0'><xsl:template match='muzix/music'><table width='100%' border='0' cellspacing='0' cellpadding='7'><tr><td nowrap='nowrap' class='content'>Songs # <script><xsl:text>document.write(from);</xsl:text><\/script> and the followin' <script><xsl:text>document.write(num);</xsl:text><\/script> | total: <xsl:value-of select='count(*)'/> song(s)<\/td><td align='right'><script>"
+"<xsl:text>if(from!=1){xrBt('O&lt;First','1')}</xsl:text>"
+"<xsl:text>if(Math.abs(Math.round(parseInt(from)/parseInt(num)))!=0){if(Math.abs(Math.round(parseInt(from)/parseInt(num)))!=1){xrBt('&lt;Prev.',parseInt(from)-parseInt(num));}}</xsl:text>"
+"<xsl:text>if(</xsl:text><xsl:value-of select='count(*)'/><xsl:text>-(parseInt(num)+parseInt(from))==Math.abs(</xsl:text><xsl:value-of select='count(*)'/><xsl:text>-(parseInt(num)+parseInt(from)))){xrBt('Next&gt;',parseInt(from)+parseInt(num));}</xsl:text>"
+"<xsl:text>if((</xsl:text><xsl:value-of select='count(*)'/><xsl:text>+1-parseInt(num))/parseInt(from)!=1){xrBt('Last&gt;O',</xsl:text><xsl:value-of select='count(*)'/><xsl:text>+1-parseInt(num));}</xsl:text>"
+"<\/script></td></tr><\/table></xsl:template></xsl:stylesheet>";
xslNav.loadXML(strXslt);xslt.stylesheet = xslNav;xslProc = xslt.createProcessor();xslProc.input = xmlDoc;xslProc.transform();
var navbar=xslProc.output.replace(/<\?xml version=\"1.0\".*\?>/i,"");
--></script>
<script xmlns="http://Button@LexTang.com/namespace/"><!--//xrBt Ver.: Blueee
function xrBt(value,btFrom){
document.write("<input type=\"button\" value=\""+value+"\" class=\"input\" style=\"background-color: #cc99cc;\" onmouseover=\"this.style.filter='';this.style.color='#000000';this.style.background='#f3eff3';\" onClick=\"window.location.href='"+btNav(btFrom)+"'\" onmouseout=\"this.style.filter='Alpha(Opacity=100,FinishOpacity=0,Style=3,StartX=70,StartY=70,FinishX=100,FinishY=100)';this.style.color='#FFFFFF';this.style.background='#cc99cc';\"/>");}
--></script>
<style type="text/css"><!--
.title {font-family: "Verdana", "Arial";font-size: 9px;font-weight: normal;filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=1, StartY=0, FinishX=100, FinishY=0);background-color: #996699;color: #FFFFFF;border: 1px solid #FFFFFF;padding-bottom:1px;}
.content td{font-family: "Verdana", "Arial";font-size: 9px;color: #666666;}
.content input{font-family:Verdana;font-size:9px;color:#663366;background:fff7ff;border:1px inset;width:30px;height:15px;text-align:center;}
.content input#idselect{width:120px;}
.xr td {font-family: "Verdana", "Arial";font-size: 10px;font-weight: bolder;text-align: center;filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100);}
.xr a {font-family:Webdings;font-weight:normal;font-size:9px;color:#996699;text-decoration:none;margin:0px;padding:0px;}
.xr a:hover{font-family:Webdings;font-weight:normal;color:#000000;}
.input {font-family: "Verdana", "Arial";font-size: 9px;color: #FFFFFF;cursor: hand;filter: Alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=70, StartY=70, FinishX=100, FinishY=100);font-weight: bolder;width:80px;height:16px;border: 0px;}
body {background:#f3eff3;color:#000000;margin:10px;line-height:12px;border:0px;overflow:auto;}
td {font-family:"Verdana","Arial";font-size: 9px;word-wrap:break-word;}
--></style></head>
<body link="#000000" vlink="#000000" alink="#000000">
<table width="100%" border="0" cellpadding="0" cellspacing="7" class="code"><tr><td class="intro"><strong><font color="#666666">LeXRus' CodeX</font><font color="#999999"> </font>|<font color="#999999"> XMLDOM</font> | <font color="#996699">Transform a XML file with XSLT &amp; XMLDOM</font></strong></td></tr></table>
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td class="title"> &nbsp; <A HREF="http://web.archive.org/web/20030604214644/http://LexTang.com/"><font color="#ffffff">LexTang.com</font></A> / MuziX / #Ver.: Purple Sky / 2003 / Required IE 5.0+ with Microsoft XML Paser 3.0:</td></tr></table><br/>
<font style="font-size:16px;font-family:Courier New;color:#ddccdd;">&nbsp;<b>MuziX | LeXRus' CD Muzix</b></font>
<script xr# xmlns:xr="http://LexTang.com/"><!--
document.write(navbar);
--></script>
<table width="100%" border="0" cellspacing="7" cellpadding="0"><tr><td><table width="100%" border="0" cellpadding="1" cellspacing="1" bgcolor="#CCBBCC">
<tr bgcolor="#FFFFFF" class="xr"><td width="55px">
<script xr#>ascRelist("name(.)");</script> ID <script xr#>desRelist("name(.)");</script></td><td>
<script xr#>ascRelist("@name");</script> Name <script xr#>desRelist("@name");</script></td><td width="90px">
<script xr#>ascRelist("@length");</script> Length <script xr#>desRelist("@length");</script></td><td>
<script xr#>ascRelist("@artist");</script> Artist(s) <script xr#>desRelist("@artist");</script></td><td>
<script xr#>ascRelist("@summary");</script> Summary <script xr#>desRelist("@summary");</script></td></tr>
<script xr#>document.write(result);</script>
<tr><td colspan="5" bgcolor="#cc99cc" height="1px"></td></tr></table></td></tr></table>
<table width="100%" border="0" cellpadding="0" cellspacing="7">
<tr><td class="content">Options: #<script xr#>document.write("<input id=\"idfrom\" value=\""+from+"\"\/>");</script> and the followin' <script xr#>document.write("<input id=\"idnum\" value=\""+num+"\"\/>");</script> songs. &nbsp;
<a href="javascript:window.location.href=sort.replace(/(.*from=)\d+(\&num=)\d+(\&.*)/i,'$1'+idfrom.value+'$2'+idnum.value+'$3');">[Apply..]</a>
</td><td class="content" align="right"> Order-by ( XPath ) <script xr#>document.write("<input id=\"idselect\" value=\""+select+"\"\/>");</script>
<a href="javascript:window.location.href=sort.replace(/(.*select=).+(\&.*)/i,'$1'+idselect.value+'$2');">[Relist..]</a>
</td></tr></table><br/>
<table width="500" border="0" cellpadding="0" cellspacing="0"><tr><td class="title">&nbsp;&copy;Copyright: LexTang.com 2002-2013</td></tr></table><table width="400" border="0" cellpadding="0" cellspacing="7"><tr><td class="content" id="idec">All Rights Reserved.</td></tr></table></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment