欢迎来到酱油妹!织梦模板,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$(function() {04    $('.runHtml').each(function(index, element) {05        $(this).after('<textarea class="runHtmlTextarea" style="width:80%; min-height:150px; padding:10px; border:solid 1px #ccc; clear:both; display:block;">' + $(this).html() + '</textarea><p><input type="button" class="runHtmlBtn" value="运行">&nbsp;<i class="runHtmlTips">你可以修改代码后再运行查询结果!</i></p>')06    });07    $('div').delegate('.runHtmlBtn', 'click',function(){08        var newwin = window.open('about:blank');09        newwin.document.write($(this).parent().prev().val());10    });11});12</script>

代码事例:

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

源码如下:

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

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

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

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


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

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