搜 索

用html网页代码简单实现一个标签小工具

编辑:QTOOL.NET日期:2020-12-31495

在使用cms程序制作网站过程中,经常需要用到各种各样的内置标签来替换原来的文字,使其变为数据调用

虽然很多程序都有标签文档可以查看,但有些用起来要找半天,不太方便,本文简单介绍了使用html语言创建一个简便的DIY标签小工具.

首先新建一个html,或用记事本新建一个文本文件,然后选择文件菜单-另存为,格式类型设置为所有格式,文件名称修改为:diy标签.html

然后右键选择打开方式为记事本或右键选择编辑,对文件进行修改:

加入以下代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>qtool.net DIY标签小工具</title>

<style type="text/css">

#showvalue { padding: 10px; line-height: 39px; }

.xuanze { width: 35px; height: 35px; float: left; }

.main { width: 1231px; margin-left: auto; margin-right: auto; }

.bqlb { width: 1000px; background-color: #646464; height: 284px; }

body { background-color: #3A3939; }

.main  span { width: 100%; display: block; height: 40px; clear: both; line-height: 40px; background-color: #646464; }

 span p { width: 210px; height: 40px; display: block; float: left; background-color: #C3C3C3; }

</style>

</head>

<body>

<script language="javascript">

function showbiaoqian() {  

var a1 ='\

文章标题  {$news[\'title\']}   \n\

文章发布者{$user[\'username\']}  \n\

浏览次数:{$news[\'click\']}次    \n\

文章内容 {$news[\'content\']}   \n\

';

var a2 ='\

 a2内容    \n\

';

var a3 ='\

 a3内容   \n\

';

var a4 ='\

 a4内容    \n\

';

var a5 ='\

 a5内容    \n\

';

//上方为存放标签

var dxa = document.getElementsByName("rad");

    var n;

    for(var i=0;i<dxa.length;i++) {

      if(dxa[i].checked) {   

  n = dxa[i].value;

  itemValue = eval(n);   

document.getElementById("qtoolnet-showbq").value=itemValue;  

  break;}

    }}

</script>

<div class="main">

<div class="qtool-bqlb">

<span><p>

<input name="rad" type="radio" class="xuanze"  onClick="showbiaoqian();"    value="a1">系统全局标签</p>

<p><input name="rad" type="radio" class="xuanze" onClick="showbiaoqian();"  value="a2">分类导航与falsh标签</p>

<p><input name="rad" type="radio" class="xuanze" onClick="showbiaoqian();"  value="a3">单页面以及自定义标签</p>

<p><input name="rad" type="radio" class="xuanze" onClick="showbiaoqian();"  value="a4">网站导航</p>

</span>

<span>

<p><input name="rad" type="radio" class="xuanze" onClick="showbiaoqian();"  value="a5">文章列表</p>

<p><input name="rad" type="radio" class="xuanze" onClick="showbiaoqian();"  value="a6">文章内容页</p>

<p><input name="rad" type="radio" class="xuanze" onClick="showbiaoqian();"  value="a7">产品列表页</p>

<p><input name="rad" type="radio" class="xuanze" onClick="showbiaoqian();"  value="a8">产品内容页</p>

<p><input name="rad" type="radio" class="xuanze" onClick="showbiaoqian();"  value="a9">招聘列表</p>

<p><input name="rad" type="radio" class="xuanze" onClick="showbiaoqian();"  value="a10">招聘内容</p>


</span>

<span>

<p><input name="rad" type="radio" class="xuanze"  value="11">留言标签</p>

<p><input name="rad" type="radio" class="xuanze"  value="12">在线订单标签</p>

<p><input name="rad" type="radio" class="xuanze"  value="13">网站地图与扩展</p>

</span>

<br>

<textarea id="qtoolnet-showbq" name="showbq" cols="150" rows="20"></textarea>

</div>

</body>

</html>

在js代码中通过var定义变量,将整理分类好的标签存入变量中去:

qtool.net示例:

如定义一个变量 a1 其存放了系统全局这个分类的所有标签

文章标题  {$news['title']}

文章发布者{$user['username']}

浏览次数:{$news['click']}次

文章内容 {$news['content']} 

在存放之前我们先对这段数据进行简单的转义处理。

在每个英文的单引号 ' 前面加上反斜杠 \ 

在每行文字的结尾加上 \n\   转义回车键以及换行显示

删除所有空行

然后复制上面处理好的数据选中替换区域几个字整行,ctrl+v粘贴到代码的替换区域

var a1 ='\

替换区域\n\

';

其数据对应的是单选按钮

<input name="rad" type="radio" class="xuanze"  onClick="showbiaoqian();"    value="a1">系统全局标签</p>

value值为保存标签对应的变量名称,后面的文字内容可以随意修改diy

一个选项对应一个存放标签内容的变量,如果想要新建只需要复制单选按钮代码,以及在存放开源cms标签的地方新建对应的变量即可。

按照自己想要的标签小工具的样式设计完成后,选择文件-保存。

然后双击即可在浏览器中打开自制的标签工具,鼠标选择对应的单选分类,即可显示相应的标签代码,方便大家使用.

TAG标签:网页布局
此文章由QTOOL.NET编辑
最新文章

热门标签