xsl脚本解析

xsl中需要用到的脚本：

xsl--js 
  1 <script type="text/javascript">
  2 //是否有保存数据至缓存区,不需要修改
  3 var saveStatus =0,config =null;;
  4 $(function(){
  5     var templates=[];    
  6 
  7     //弹出编辑窗功能区
  8     $('.editContentBtn').live('click',function(){ 
  9         var actid=$('#id').val();
 10         
 11         //读取缓存区的数据
 12         var templatename = $(this).attr('template'); //'/templates/admin/zhuanti/sample/p2.xsl'    
 13         var o = templates[templatename];
 14         if(!o){alert('未找到缓存数据['+templatename+']!'); return false}
 15         var xml = ($(o.xml).size()==0)?'<root/>':$(o.xml).val();    
 16 
 17         var id= $(this).attr('data');
 18         var dialogTitle = $(this).text();
 19         var dialogHeight = parseInt($(this).attr('rel')) || 500;        
 20         
 21         //保存及取消按钮功能
 22         var btns = 
 23             {
 24              '保存':function(){
 25                     $('.ckeditor','#frm'+templatename).each(function(index, element) {
 26                         var id = $(this).attr('id');
 27                         document.getElementById(id).value = $(this).val().replace(/[\r\n]/g,'')
 28                     })
 29                     var savexml = save2textarea(templatename);
 30                     $('#'+templatename).xslt(savexml,o.showxslt);
 31                     $(this).dialog('close')    
 32                 },
 33                 '取消':function(){
 34                     $(this).dialog('close')
 35                 }
 36             }
 37               
 38         //滚动到模块的位置
 39         if($('#'+templatename).size()!=0)
 40             $("html,body").animate({scrollTop:$('#'+templatename).offset().top-500},300);
 41         
 42         //解析编辑窗内容
 43         $('#dialogContent').html('<div class="loading" style="height:300px;">loading</div>')
 44         .dialog('option', {"height":dialogHeight, "title":dialogTitle, "buttons":btns} )
 45         .dialog('open')
 46         .xslt(xml,o.editxslt,function(){
 47 
 48             //以下数据特别窗口使用    
 49             if(templatename =='p0'){
 50                 var phaseid = $('#phaseid').val();
 51                 if(phaseid !='')$('#numhid').val(phaseid);
 52                 $('#num').live('change',function(){
 53                     $('#phaseid').val($(this).val())    
 54                 })
 55             }
 56             var newhouseidhid = $('#newhouseidhid').val();
 57             $('#house').loadContent('house',{query:'newhouseid='+newhouseidhid})
 58             
 59             $('.ckeditor').each(function(index, element) {
 60                     var toolbar = $(this).attr('toolbar') || "user";
 61                     var startupMode = $(this).attr('mode') || 'wysiwyg';
 62                     $(this).attr('id','id_'+Math.round(Math.random()*1000000,0)).ckeditor({startupMode:startupMode,width:'95%',height:300,toolbar:toolbar,toolbarStartupExpanded:true});
 63             });
 64             countUp();
 65       })
 66         $('.nav-list').removeClass('ui_check');
 67         $('.nav-list','#'+id).addClass('ui_check');    
 68         return false;
 69     })  
 70 
 71     ////////////////////////////以下脚步本基本上不需要修改/////////////////////////
 72     //////////////////////////////////////////////////////////////////////////    
 73     //保存数据至缓存
 74     function save2textarea(templatename){
 75         //编辑器值写入到字段
 76         $('.ckeditor','#frm'+templatename).each(function(index, element) {
 77             var id = $(this).attr('id');
 78             document.getElementById(id).value = $(this).val().replace(/[\r\n]/g,'')
 79         })
 80         var a = formToJsonObject(document.getElementById('frm'+templatename))
 81         var util = new JsonToXml(false);
 82         var result = util.toXml(a).replace(/\\\"/g,'"');                    
 83         xml = '<item>'+result+'</item>';
 84         saveStatus = 2    
 85         $('#xmlcontent'+templatename).text(xml)
 86         return xml;
 87     }
 88     var $notify = $('<div></div>').appendTo(document)
 89     //提交数据至服务器
 90     $('#saveBtn').click(function(){    
 91         //合并所有模块数据
 92         $('#saveBtn').parent().removeClass('blockStatus').addClass('hideStatus').end().find('a').html('保存中...')
 93         $notify.html('<div class="loading" style="padding-top:80px;">...</div>').dialog({
 94                             draggable:false,
 95                             resizable:false,
 96                             modal:true,
 97                             title:'正在保存数据至服务器...'});
 98         var content = mergedata();
 99         content += saveconfig2textarea();
100         content ='<root>'+content+'</root>';
101         var q = $('#frmlist').serialize()+'&content='+encodeURIComponent(content);
102         $.doCmd('insterupdate',{async:true,method:'post',query:q,success:function(code,info){
103                 $notify.dialog('close');
104                 $('#saveBtn').parent().removeClass('hideStatus').addClass('blockStatus').end().find('a').html('保存并发布')
105                 saveStatus = 1;
106                 location.href='?id='+info;            
107         },error:function(info){
108             $notify.dialog('close');
109             $('#saveBtn').parent().removeClass('hideStatus').addClass('blockStatus').end().find('a').html('保存并发布')
110             alert(info);
111         }})
112     })
113     
114     //检查是否有修改缓存数据,不需要修改
115     $(window).bind('beforeunload',function(){ 
116         if(    saveStatus == 2) {    return '您输入的内容尚未保存，确定离开此页面吗？'; }
117     });
118     function mergedata(){
119         var content = '';
120         $('.xmlContentTextarea').each(function(index, element) {
121       var id=$(this).attr('data');
122             content +='<p id="'+id+'">'+$(this).val()+'</p>';
123      });
124         return content;
125     }
126     //保存配置信息至缓存
127     function saveconfig2textarea(){
128         var xml = '';
129         $(config.item).each(function(index, element) {
130             config.item[index].order = $('ul.ulNav li[moduleid='+config.item[index].moduleid+']').attr('order')
131        });
132         var util = new JsonToXml(false);
133         var result = util.toXml(config);
134         var xml = '<config>'+result+'</config>';
135         $('#config').val(xml);
136         return xml; 
137     }
138     //表格删除一行
139     $('.btndeltr').live('click',function(){    
140          var delid = $(this).attr('delid');
141         var templatename=$(this).attr('moduleid');
142         if(!confirm('是否确定删除')){    return false;}    
143         $('#'+delid,'#frm'+templatename).remove();        
144     })    
145     //新增一行 <button id="btnaddtr" moduleid="p2" maxcount="10">新增观点</button>
146     $('#btnaddtr').live('click',function(){
147           var templatename=$(this).attr('moduleid');
148             var maxcount = $(this).attr('maxcount');    
149           var count = $('.datarow','#frm'+templatename).size();
150             if(count>maxcount-1){
151                 alert('最多只能新增'+maxcount+'个');
152                 return false;
153             }
154           var reg=/tablecount(?:\+(\d+))?/gi;
155           var r = Math.round(Math.random()*1000000);
156           var html =$('#newtr_'+templatename).html().replace(/random/ig,r).replace(reg,function(){
157                 return count+1*arguments[1];
158             })
159           $('tbody:last','#frm'+templatename).before(html);            
160       });    
161 
162     //计算字数功能
163     function countUp(){
164         $('textarea[checkcharlen]').checkcharlen({onkeydown:function(el,maxlen,len){
165         $(el).next().html('余<b class="red">'+(maxlen-len)+'</b>字符');
166         }});        
167         $('textarea[checkcharlen]').keyup();    
168         $('input[checkcharlen]').checkcharlen({onkeydown:function(el,maxlen,len){
169             $(el).next().html('余<b class="red">'+(maxlen-len)+'</b>字符');
170         }});        
171         $('input[checkcharlen]').keyup()
172     }
173     /*通用编辑窗 不需要修改*/
174     $( "#dialogContent" ).dialog({                 
175             dialogClass:'fixedPosition',        
176             position: { my: "left top", at: "right top", of: $('#a01') },            
177             width:1000,                                                     
178             autoOpen:false,
179             draggable:false,
180             resizable:false,
181             modal:true,                
182             open:function(ui){
183                 $(this).parent().css({'position':'fixed',top:0});
184             
185             },
186             close:function(){                
187                 $('.nav-list').removeClass('ui_check');     
188             }
189     })
190     //定义模块数组，请自行新增 , xml: 来源的对象 ,showxslt:预览xsl , editxslt: 编辑xsl
191     function init(){
192         var maxcount = 9 ;//根据需要修改您的，最大模块数
193         for(i=0;i<maxcount;i++){
194                 templates['p'+i] = {xml:'#xmlcontentp'+i,showxslt:'/templates/admin/zhuanti/loushiguancha/loushiguancha/xsl/p'+i+'.xsl?_'+Math.random(),editxslt:'/templates/admin/zhuanti/loushiguancha/loushiguancha/xsl/p'+i+'edit.xsl?_'+Math.random()};
195                 var o = templates['p'+i];
196                 var xml = ($(o.xml).size()==0)?'<item/>':$(o.xml).val();    
197                 $('#p'+i).html('loading...').xslt(xml,o.showxslt,function(){});
198         }
199     }
200     $(document).ready(function(e) {
201     init();
202         config = $.xml2json($('#config').val());
203   });
204     //移动功能,不需要修改,配置 data 及rel 属性即可
205     $('.up').live('click',function(){    
206          var id=$(this).attr('data');
207          var rel =$(this).attr('rel');
208          $('#'+id).move('up',{callback:function(){
209                 $('#'+rel).move('up');
210                 orderUpdate();
211          }})
212          return false;
213     })
214     $('.down').live('click',function(){
215         var id=$(this).attr('data');
216         var rel =$(this).attr('rel');
217         $('#'+id).move('down',{callback:function(){
218             $('#'+rel).move('down');
219             orderUpdate();
220         }})
221         return false;
222     })
223     //移动成功修改序号值, 可不修改
224     function orderUpdate(){
225         $('ul.ulNav li.moveEnabled','#edit_left').each(function(index, element) {
226             $(this).attr("order",index+1);
227         });  
228     }
229     $('#frmp0 .newhouse').live('myselect',function(event,ui){
230         initnewhouse(ui.item.id,ui.item.qqurl,ui.item.tel400,ui.item.label)                    
231     })
232       function initnewhouse(id,qqurl,tel400,name){
233           $('#frmp0 .newhouseqqurl').val(qqurl);            
234           $('#frmp0 .newhouseid').val(id);
235           $('#frmp0 .newhousetel').val(tel400);        
236       }
237     $('.my-focus').live('click',function(){
238         countUp();    
239     })
240     //////////////////////////////////////////////////////////////////////////
241 })
242 </script>

添加新的模块需要用到的脚本：

在s_template.xsl中

<xsl:if test=" add = 'enabled'">
<a class="add icon" data="leftNav04" title="增加模块" template="{moduleid}" >&nbsp;</a>
</xsl:if>

 

<xsl:if test=" add = 'enabled'">
<ul class="ui_list" >
<xsl:for-each select="/rows/row/f_content/root/p[@id=$pid]/item/matter/content">
<li><a class="moudle" SD="{id}"/><a class="editSubContentBtn" data="leftNav04" template="p1" rel="{id}"><xsl:value-of select="title"/></a></li>
</xsl:for-each>
<xsl:comment>
</xsl:comment>
</ul>
</xsl:if>

 

在Main页面中显示显示textarea，以便于进行核对

<xsl:for-each select="rows/row/f_content/root/p">
<textarea id="xmlcontent{@id}" class="xmlContentTextarea" data="{@id}" style="width:500px; height:300px; display:none">
<xsl:call-template name="all-nodes"><xsl:with-param name="rows" select="."/></xsl:call-template>
</textarea>
<xsl:if test="@id='p3'">
<input type="hidden" id="maxid" value="{item/matter/content[position()=last()]/id}" /><xsl:for-each select="item/matter/content"><textarea class="m_p3" id="content_{id}" data="{id}" style="width:500px; height:300px; display:none">
<content>
<xsl:call-template name="all-nodes"><xsl:with-param name="rows" select="."/></xsl:call-template>
</content>
</textarea>
</xsl:for-each>
</xsl:if>
</xsl:for-each>

 

由于新增的模块需要一个XML文件来用于初始化解析所以还需要创建一个textarea模板：

<textarea id="templateaaa" style=" width:500px; height:300px; display:none">
<xsl:text disable-output-escaping="yes">
<![CDATA[
<content>
<id>tempmaxid</id><title>户型名称</title><intro>在此新增户型介</intro>
<img>
<url>###</url>
<big>http://mat1.gtimg.com/house_fuzhou/zjsrb/nopic.jpg</big><src>http://mat1.gtimg.com/house_fuzhou/zjsrb/nopic.jpg</src></img>
<img><url>###</url><big>http://mat1.gtimg.com/house_fuzhou/zjsrb/nopic.jpg</big><src>http://mat1.gtimg.com/house_fuzhou/zjsrb/nopic.jpg</src></img>
<img>
<url>###</url><big>http://mat1.gtimg.com/house_fuzhou/zjsrb/nopic.jpg</big>
<src>http://mat1.gtimg.com/house_fuzhou/zjsrb/nopic.jpg</src></img>
<img>
<url>###</url><big>http://mat1.gtimg.com/house_fuzhou/zjsrb/nopic.jpg</big>
<src>http://mat1.gtimg.com/house_fuzhou/zjsrb/nopic.jpg</src></img>
<img>
<url>###</url><big>http://mat1.gtimg.com/house_fuzhou/zjsrb/nopic.jpg</big>
<src>http://mat1.gtimg.com/house_fuzhou/zjsrb/nopic.jpg</src></img>
<img>
<url>###</url><big>http://mat1.gtimg.com/house_fuzhou/zjsrb/nopic.jpg</big>
<src>http://mat1.gtimg.com/house_fuzhou/zjsrb/nopic.jpg</src></img>
</content>]]></xsl:text>
</textarea>

在添加新模块用到的jS

/////////////////////////////添加点击事件/////////////////////////////////////////////
$('.add').live('click',function(){
var id= $(this).attr('data');
$('#maxid').val($('#maxid').val()*1+1);
var maxid = $('#maxid').val()*1;
<!--添加模块的时候，添加一个textarea-->
$('<textarea class="m_p3" data="{id}" style="width:500px; height:300px; display:none" ></textarea>').attr('id','content_'+maxid)
.val($('#templateaaa').val().replace('tempmaxid',maxid))
.appendTo('#container')
$('ul.ui_list','#'+id).append('<li><a class="moudle" SD="'+maxid+'"></a><a class="editSubContentBtn" template="p3" rel="'+maxid+'" data="'+id+' ">户型：名称</a></li>');
})

/////////////////////////////删除点击事件/////////////////////////////////////////////

function trim(str){ //删除左右两端的空格
return str.replace(/(^\s*)|(\s*$)/g, "");
}


$('.moudle').live('click',function(){

if(confirm("是否确定删除?")){
$(this).parent().remove();
<!--删除模块的时候找到相对的TextArea删除掉-->
var consd='#content_'+trim(this.SD);
$(consd).remove();
var xml = merge();
$('#p3').xslt(xml,templates['p3'].showxslt)
}
})

/////////////////////////////合并所有p3下的所有文本，即是textarea中的文本/////////////////////////////////////////////

function merge(){
var s = ''
$('.m_p3').each(function(index, element) {
s +=$(this).val();
});
s='<item><matter>'+s+'</matter></item>';
$('#xmlcontentp3').val(s)
return s;
}

/////////////////////////////保存点击事件/////////////////////////////////////////////

$('.editSubContentBtn').live('click',function(){
var editxslt = '/templates/admin/zhuanti/gohouses/gohouses/xsl/p3edit.xsl?_'+Math.random()
var showxslt='/templates/admin/zhuanti/gohouses/gohouses/xsl/p3.xsl?_'+Math.random()
var id = $(this).attr('rel')*1;
var templatename = $(this).attr('template');
//用xslt 功能去转换
var dialogTitlet = $(this).text();
var dialogHeight = 500;
var btns = {
'保存':function(){
$('.ckeditor','#frm'+templatename).each(function(index, element) {
var id = $(this).attr('id');
document.getElementById(id).value = $(this).val().replace(/[\r\n]/g,'')
})
var a = formToJsonObject(document.getElementById('frm'+templatename))
var util = new JsonToXml(false);
var result = util.toXml(a).replace(/\\\"/g,'"');
/* xml = '<item>'+result+'</item>';*/
xml = result;
$('#content_'+id).val(xml)
$(this).dialog('close')
$('#savestatus').val('2');
xml = merge();
$('#'+templatename).xslt(xml,showxslt)
}
,'取消':function(){
$(this).dialog('close')
}}
var xml = $('#content_'+id).val();
$('#dialogContent').xslt(xml,editxslt,function(){
countUp();
$('.ckeditor').each(function(index, element) {
$(this).attr('id','id_'+Math.round(Math.random()*1000000,0)).ckeditor({width:'95%',height:300,toolbar:'article',toolbarStartupExpanded:true});
})
})
.dialog( "option", "height",dialogHeight)
.dialog( "option", "title",dialogTitlet)
.dialog( "option", "buttons",btns)
.dialog('open');

$('.nav-list').removeClass('ui_check');
$('.nav-list','#'+id).addClass('ui_check');

})

/////////////////////////////幻灯片效果/////////////////////////////////////////////

 

幻灯片效果，其实就是将原本的style="display:none".在mouseover事件更改这个属性具体的js代码如下：

幻灯片效果 
 1 <script type="text/javascript">
 2 $('.ui-tab a').live('click',function(){
 3     var conid=$(this).attr('rel');
 4     $('.content .con').attr('style','display:none');
 5     $('#'+conid).attr('style','display:block');
 6     })
 7     function change(id){
 8         if (typeof(isround)!='undefined') clearTimeout(isround);
 9         var bigimg = document.getElementById("pic").getElementsByTagName("IMG");    
10         var smallimg = document.getElementById("box").getElementsByTagName("li");
11         for (var i = 0; i <= smallimg.length; i++) {        
12             $('#picon'+i).attr('style','display:none');    
13             $('#uicon'+i).attr('class','normal');        
14         }
15         $('#picon'+[id]).attr('style','display:block');    
16         $('#uicon'+[id]).attr('class','current');    
17         if ((next=id+1) > smallimg.length){
18             next = 1;
19         }
20         isround=setTimeout('change('+next+')', 2500);
21     }
22 </script>

上下移动中用到的脚本：

<xsl:for-each select="rows/row/f_content/root/config/item">
<xsl:sort select="order" data-type="number"/>
<li id="{id}" order="{order}" moduleid="{moduleid}">
<xsl:if test="move='enabled'">
<xsl:attribute name="id">
<xsl:value-of select="id" />
</xsl:attribute>
<xsl:attribute name="class">show moveEnabled</xsl:attribute>
<xsl:attribute name="rel">
<xsl:value-of select="moduleid" />
</xsl:attribute>
</xsl:if>
</li>
<div class="nav-list blockStatus">
<div class="navcon">
<a class="editContentBtn" data="{id}" rel="{rel}" template="{moduleid}">
<xsl:value-of select="name" />
</a>
<xsl:if test=" move = 'enabled'">

<!--data:左侧菜单项id,rel:内容模块id-->
<a class="up icon" data="{id}" rel="{moduleid}" title="向上" >&nbsp;</a>--------------->此处就是往上移动
<a class="down icon" data="{id}" rel="{moduleid}" title="向下">&nbsp;</a>------------->此处就是往下移动
</xsl:if>
</div>
</div>
</xsl:for-each>

在循环遍历节点的时候，需要注意，内容模块不要跟菜单项混淆，搞乱

<div class="right" id="gallery" style="float:left;width:257px;">
<div class="sub" id="sideNav" style=" float:left;width:257px; margin-top:10px">
<!-- 页卡切换 -->
<div class="tabs" id="tabs" style="float:left;width:257px">
<xsl:for-each select="rows/row/f_content/root/config/item[move='enabled']">
<xsl:sort select="order" data-type="number"/>
<dl id="{moduleid}" class="moveEnabled">
<xsl:comment><xsl:value-of select="moduleid"/></xsl:comment>
</dl>
</xsl:for-each>
<dl>
<dt class="hd">
<h2 class="tit">专题评价</h2>
</dt>
<dd class="bd rg5">
<div class="content">
<iframe style="BORDER-BOTTOM: #cecece 1px dashed; WIDTH: 255px; HEIGHT: 144px" src="http://fz.house.qq.com/zt2013/lsgc/pj.htm" frameborder="0" allowtransparency="allowTransparency" scrolling="no"><xsl:comment></xsl:comment></iframe>
</div>
</dd>
</dl>
<div id="p8" class="content rg5" style="float:left; width:257px">
<xsl:comment>p7</xsl:comment>
</div>
</div>
</div>
</div>
</div>

上移下移的JS效果：

上移下移JS 
 1  $('.up').live('click',function(){    
 2            var id=$(this).attr('data');
 3            var rel =$(this).attr('rel');
 4            $('#'+id).move('up',{callback:function(){
 5                
 6               orderUpdate();
 7               $('#'+rel).move('up')
 8            }})
 9            
10       })
11     
12       $('.down').live('click',function(){
13           var id=$(this).attr('data');
14           var rel =$(this).attr('rel');
15           $('#'+id).move('down',{callback:function(){
16               orderUpdate();
17                $('#'+rel).move('down')
18            }})
19          
20       })
21 
22  function orderUpdate(){
23           $('ul.ulNav li.moveEnabled','#edit_left').each(function(index, element) {
24               $(this).attr("order",index+1);            
25           });  
26       }

 

posted @ 2013-04-11 14:43  张涵哲琪  阅读(825)  评论(0)  编辑  收藏  举报