ZTmStudio,Library Javascript,Editeur xml

<?xml version="1.0" encoding="utf-8"?>
 <ztmstudio ztmview="on">
   <ztml>
     <lang>
       <xx>
         <title><![CDATA[Jquery Selector ]]>
</title>
         <srchlp><![CDATA[Jquery]]>
</srchlp>
         <corps><![CDATA[<div id=bef></div>
<div id=com></div>
<div id=sty></div>
<div id=cor></div>
<div id=jqu></div>
<div  class=jdiv> DIV</div>
<span class=jspan>SPAN</span>
<p class=jp>P<button>Button</button></p>

]]>
</corps>
         <com><![CDATA[Selectionne des éléments par la classe
Modifie le style de ces éléments et
Compte le nombre d'éléments selectionnés.]]>
</com>
         <jqu><![CDATA[var elementCount = $( ".jdiv, .jspan,.jp" ).css( "border", "3px solid red" ).length;
$( ZTmMain.ztmview.corps ).prepend( "<h3>" + elementCount + " elements found</h3>" );]]>
</jqu>
         <cor><![CDATA[<div  class=jdiv> DIV</div>
<span class=jspan>SPAN</span>
<p class=jp>P<button>Button</button></p>]]>
</cor>
         <sty><![CDATA[h3 {margin: 0;}
.jdiv, .jspan, p {
  width: 80px;   height: 40px;
  padding: 10px; margin: 10px;
  float:left; background-color: #EEEEEE;}]]>
</sty>
</xx>
       <en>
         <title><![CDATA[Jquery Selector ]]>
</title>
         <srchlp><![CDATA[Jquery]]>
</srchlp>
         <corps><![CDATA[
<div id=bef></div>
<div id=com></div>
<div id=sty></div>
<div id=cor></div>
<div id=jqu></div>

<div  class=jdiv> DIV</div>
<span class=jspan>SPAN</span>
<p class=jp>P<button>Button</button></p>

]]>
</corps>
         <com><![CDATA[Selects elements by class
Modifies the style of these elements 
Counts the number of selected items and
Display the number before the "jdiv" class element]]>
</com>
         <jqu><![CDATA[var elementCount = $( ".jdiv, .jspan, .jp" ).css( "border", "3px solid red" ).length;
$( ".jdiv" ).before( "<h3>" + elementCount + " elements found</h3>" );]]>
</jqu>
         <cor><![CDATA[<div  class=jdiv> DIV</div>
<span class=jspan>SPAN</span>
<p class=jp>P<button>Button</button></p>
]]>
</cor>
         <sty><![CDATA[h3 {margin: 0;}
.jdiv, .jspan, p {
  width: 80px;   height: 40px;
  padding: 10px; margin: 10px;
  float:left; background-color: #EEEEEE;}]]>
</sty>
</en>
</lang>
</ztml>
   <html>
     <head><![CDATA[<title>ZTmStudio,Library Javascript,Xml Editeur ,ZTmReader </title>
<meta charset="utf-8" />
<meta name="viewport" id="viewport" content="width=device-width,  initial-scale=1"/>
 <link rel="stylesheet" href="ZTmOs.css" type="text/css" media="screen"/>  
  <link rel="icon" href="Icon/ztmos.png" type="image/x-icon"/> 
<script type="text/javascript" src="jquery-3.7.1.min.js"></script>  
  <script type="text/javascript" src="ZTmStudio.js"></script></script>]]>
       <style><![CDATA[.bef {float:none;}
  h3 {
    margin: 0;
  }
  .jdiv, .jspan, p {
    width: 80px;
    height: 40px;
    padding: 10px;
    margin: 10px;
    float:left;
    background-color: #EEEEEE;
  }
.clear {clear:both;}]]>
</style>
       <script.call><![CDATA[
function call (){
var div=ZTmEvent(event).target;
//alert(div.nodeName);
	if (event.type=='click')  
	{
		if (div.nodeName=='TD')  
		{
		   if(/ztmtitle/.test(div.className)) {ZTmHlpRun();}
        }
        if (div.nodeName=='IMG'){
		   if(/window-x/.test(div.src)) {
           ZTmMain.ztmview.clear();
           } 
        }
    }
}]]>
</script.call>
       <script.ztm><![CDATA[function ZTm(){

ZTmlInit(); 
ZTmView();

ZTmMain.ztmview = ZTmMain.create();
ZTmMain.ztmview.title=ZTmValueTag(ZTmlDoc,ZTmLang,'title');
//alert(ZTmMain.ztmview.title);
cor1=ZTmValueTag(ZTmlDoc,ZTmLang,'cor');
cor1=cor1.replace(/&/g, ZTma)
                                  .replace(/</g, ZTmi)
                                  .replace(/>/g, ZTms);
cor1="<pre><code>"+cor1+"</code></pre>";

cor2= ZTmValueTag(ZTmlDoc,ZTmLang,'cor')+"<div class=clear></div>";

com=ZTmValueTag(ZTmlDoc,ZTmLang,'com').replace(/&/g, ZTma)
                                  .replace(/</g, ZTmi)
                                  .replace(/>/g, ZTms);
com="<pre><code>"+com+"</code></pre>";
jqu=ZTmValueTag(ZTmlDoc,ZTmLang,'jqu').replace(/&/g, ZTma)
                                  .replace(/</g, ZTmi)
                                  .replace(/>/g, ZTms);
jqu="<pre><code>"+jqu+"</code></pre>";

sty=ZTmValueTag(ZTmlDoc,ZTmLang,'sty').replace(/&/g, ZTma)
                                  .replace(/</g, ZTmi)
                                  .replace(/>/g, ZTms);
sty="<pre><code>"+sty+"</code></pre>";

ZTmMain.ztmview.srchlp=com;
ZTmMain.ztmview.create(); 
ZTmMain.ztmview.icon='wx';ZTmicons.create();
ZTmMain.ztmview.icon='zt';ZTmicons.createbox1();

ZTmMain.ztmview.corps.innerHTML=ZTmValueTag(ZTmlDoc,ZTmLang,'corps');;

document.getElementById("com").innerHTML=com;
document.getElementById("sty").innerHTML=sty;
document.getElementById("jqu").innerHTML=jqu;
document.getElementById("cor").innerHTML=cor1;
ZTmMain.ztmview.box2.onclick=call;

var elementCount = $( ".jdiv, .jspan,.jp" ).css( "border", "3px solid red" ).length;
$( ".jdiv" ).before( "<h3>" + elementCount + " elements found</h3>" );

document.getElementById("bef").innerHTML=cor2;
}]]>
</script.ztm>
</head>
     <body onload="ZTm();"><![CDATA[
 
]]>
</body>
</html>
</ztmstudio>

<div class="ZTmSdk1">Xml Editeur</div>
<div> Menu horizontal</div>
<div><img src="Icon/window-reader.png" class="ztmteteimg"> lance l appli </div>
<div><img src="Icon/xml.png" class="ztmteteimg"> affiche le fichier xml  </div>
-----------------------------------------
<div> Menu vertical</div>
<div><img src="Icon/textex.png" class="ztmteteimg"> Edite l´élément </div>
<div><img src="Icon/addele.png" class="ztmteteimg"> Ajoute un élément enfant</div>
<div><img src="Icon/addatr.png" class="ztmteteimg"> Ajoute un attribut</div>
<div><img src="Icon/addtxt.png" class="ztmteteimg"> Ajouter un élément TEXT</div>
<div><img src="Icon/addcda.png" class="ztmteteimg"> Ajouter un élément CDATA</div>
<div><img src="Icon/delxml.png" class="ztmteteimg"> Supprime l´élément et ses enfants</div>
<div><img src="Icon/addcom.png" class="ztmteteimg"> Ajoute un commentaire</div>
<div><img src="Icon/copy.png" class="ztmteteimg"> Copie l´élément dans le presse-papiers</div>
<div><img src="Icon/paste.png" class="ztmteteimg"> Coller l´élément </div>
<div><img src="Icon/child.png" class="ztmteteimg"> Insère un enfant </div>
<div><img src="Icon/deltree.png" class="ztmteteimg"> Supprime l´élement  </div>
<div><img src="Icon/delxml.png" class="ztmteteimg"> Supprime l´élement  </div>
<div><img src="Icon/down.gif" class="ztmteteimg"> Descend l´élément  </div>
<div><img src="Icon/up.gif" class="ztmteteimg"> Remonte l´élément  </div>