欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

织梦CMS制作Html+Css代码运行框jQuery版

企业模板

文章介绍

网上的代码运行框代码算是比较多的了,随便搜索一下都一大堆的,但没找到一适合的,只有自己折腾一个容易的,注本文介绍的办法需要引用jquery库

首页在织梦CMS模板中引入jquery文件,假如没你可以去jquery官方网站下载

在织梦CMS模板中添加

01<script src="http://static.qmtx3.com/qmtx3static/jquery1.7.2.js" type="text/javascript"></script>02<script type="text/javascript">03$ {04    $.each {05        $.after.html + '</textarea><p><input type="button" class="runHtmlBtn" value="运行">&nbsp;<i class="runHtmlTips">你可以修改代码后再运行查询结果!</i></p>')06    });07    $.delegate{08        var newwin = window.open;09        newwin.document.write.parent.prev.val);10    });11});12</script>

代码事例:

本织梦CMS代码框做法,由酱油妹 www.dede58.com 酱油妹制作

源码如下:

1<div class="runHtml">2     本织梦CMS代码框做法,由酱油妹 www.dede58.com 酱油妹制作3</div>

代码说明:这段代码会将页面中class里包含runHtml样式的层全部变成代码运行框,如上面代码会把.runHtml这个div变成textarea代码运行框,可能有些朋友会问为何不直接用textarea而用div,其实这点是出于对关键词排名优化来做的,由于textarea里的内容蜘蛛是不会去抓取的,因为技能类文章代码段所占的篇幅比较大,有的可能整篇可能就是代码。

该办法并没什么技能含量,唯一一点好处就是一个页面可以很便捷的达成多个代码运行框,容易见到的代码运行框通常有复制,另存为功能,因为JS的复制功能兼容性并不友好,假如你想折腾复制功能可以从swf达成入手,至于另存为的功能酱油妹也不知晓如何做好兼容性,期望知晓的朋友留言告知

PS:酱油妹版织梦CMS代码运行框jQuery就说到这里吧,期望能便捷大伙用,另望高手能介绍美观漂亮、功能健全的代码运行框给酱油妹 3Q -_-


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.nsxcb.cn 关注: 时间:2020-09-11 09:06
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/jiaocheng/kaifa/20220313/12964.html
►凡本站提供教程均已验证教程的准确性。
►为提高用户在织梦后台添加栏目的灵活性(可随意添加/删除栏目),并保持(管理后台添加/删除栏目)与前端网站栏目的一致,本站模板中栏目均未固定,用户直接搜索typeid=''并替换''中的数字为所需栏目id即可。
►本站提供各种类型织梦模板!希望在这里找到喜欢的。下载本站模板,用户直接替换相关文字和图片即可。
►本站仅提供织梦模板即(DEDE模板),(除另外说明)均不带织梦安装程序及数据,用户直接覆盖默认模板即可。
►本站所有资源(包括源码、模板、插件等)仅供学习与参考,请勿用于商业用途。
►如有其他问题,请加网站客服QQ(375750496)进行交流。
相关织梦教程
在线客服

织梦模板 整站模板 新手教程 使用技巧