织梦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="运行"> <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)进行交流。
►本文网址:http://www.nsxcb.cn/jiaocheng/kaifa/20220313/12964.html
►凡本站提供教程均已验证教程的准确性。
►为提高用户在织梦后台添加栏目的灵活性(可随意添加/删除栏目),并保持(管理后台添加/删除栏目)与前端网站栏目的一致,本站模板中栏目均未固定,用户直接搜索typeid=''并替换''中的数字为所需栏目id即可。
►本站提供各种类型织梦模板!希望在这里找到喜欢的。下载本站模板,用户直接替换相关文字和图片即可。
►本站仅提供织梦模板即(DEDE模板),(除另外说明)均不带织梦安装程序及数据,用户直接覆盖默认模板即可。
►本站所有资源(包括源码、模板、插件等)仅供学习与参考,请勿用于商业用途。
►如有其他问题,请加网站客服QQ(375750496)进行交流。
相关织梦教程:
- 最好最好用的二次开发课程(dedeCMS,ecshop为例)
- Dede二次开发程序详解(dede学习必须具备一)
- 织梦CMS制作Html+Css代码运行框jQuery版
- DEDE系统制作Html+Css代码运行框jQuery版
- DEDE系统二次开发之审核时间同步更新
- DEDE系统CMS二次开发列表AJAX按条件排序
- DEDE系统CMS二次开发缩略图变形的解决办法
- DEDE系统二次开发全站文章收藏总次数统计
- DEDE系统CMS二次开发不一样栏目调用不一样的模板
- DEDE系统二次开发文档手册 程序目录详解以及数据
- DEDE系统二次开发时采用{dede:arclist},{dede:list}获得
- DEDE系统 达成友情链接在首页、内页分别显示