KISSY文本diff工具--20131028

最新推荐文章于 2020-10-08 15:48:25 发布

xjwolaile

最新推荐文章于 2020-10-08 15:48:25 发布

阅读量85

点赞数

分类专栏：学习前端技术

本文链接：https://blog.csdn.net/xjwolaile/article/details/84493513

版权

学习同时被 2 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

1、效果及功能说明

在输入框内输入字符后点击按钮键就可以添加到下面的输入框里

2、实现原理

是通过页面直接写入的方法来实现的非常的简介

3、主要的方法


S.use('gallery/textDiff/1.0/index, node, event', function(S, TextDiff, Node, Event){
	//定义参数
	var textDiff = new TextDiff();
	//定义点击按钮的效果
	Node.one('#diff').on('click', function(){
		//当点击完按钮后可以获得#text1和#text2的值里面的所有东西
		var text1 = Node.one('#text1').val();
		var text2 = Node.one('#text2').val();
		//定义参数并且将获得值全部放到这个里面来
		var diffs = textDiff.getDiff(text1, text2);
		//在把里面的值添加在#diff1和#diff2怎么通过diffs的数组来却别添加的是哪个
		Node.one('#diff1').html('<span>' + diffs[0] + '</span>');
		Node.one('#diff2').html('<span>' + diffs[1] + '</span>'); 
	});
});
</script>

4、代码


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://g.tbcdn.cn/kissy/k/1.3.0/kissy-min.js" charset="utf-8"></script>
<style>
        span{background:#0F3;}
        b{font-weight:normal; background:#F30;}
        textarea{width:300px; height:120px;}
        table{font-size:14px; border-collapse:collapse;}
        table div{border:solid 1px #000; width:300px; height:300px; vertical-align:top;}
</style>
</head>

<body>
<h2>文本diff工具</h2>
<table>
	<tbody><tr>
    	<td>
        	<h3>输入文本1</h3>
			<textarea id="text1">我我我我我我我我我我我我我我我我</textarea>
        </td>
        <td>
        	<h3>输入文本2</h3>
			<textarea id="text2">插插插插插插插插插</textarea>
        </td>
    </tr>
    <tr>
    	<td colspan="2">
			<button id="diff">开始diff</button>
        </td>
    </tr>
	<tr>
    	<td><div id="diff1"><span><b></b></span></div></td>
        <td><div id="diff2"><span><b></b></span></div></td>
    </tr>
</tbody></table>


<script>
var S = KISSY;

//先来判断格式是否符合要求是否是utf-8的格式
if (S.Config.debug) {
	var srcPath = "../../../";
	S.config({
		packages:[
			{
				name:"gallery",
				path:srcPath,
				charset:"utf-8",
				ignorePackageNameInUri:true
			}
		]
	});
}

//从这里开始
S.use('gallery/textDiff/1.0/index, node, event', function(S, TextDiff, Node, Event){
	//定义参数
	var textDiff = new TextDiff();
	//定义点击按钮的效果
	Node.one('#diff').on('click', function(){
		//当点击完按钮后可以获得#text1和#text2的值里面的所有东西
		var text1 = Node.one('#text1').val();
		var text2 = Node.one('#text2').val();
		//定义参数并且将获得值全部放到这个里面来
		var diffs = textDiff.getDiff(text1, text2);
		//在把里面的值添加在#diff1和#diff2怎么通过diffs的数组来却别添加的是哪个
		Node.one('#diff1').html('<span>' + diffs[0] + '</span>');
		Node.one('#diff2').html('<span>' + diffs[1] + '</span>'); 
	});
});
</script>


</body>
</html>

xjwolaile

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
KISSY文本diff工具--20131028

1、效果及功能说明在输入框内输入字符后点击按钮键就可以添加到下面的输入框里2、实现原理是通过页面直接写入的方法来实现的非常的简介3、主要的方法 [code="html5"]S.use('gallery/textDiff/1.0/index, node, event', function(S, TextDiff, Node, Event){ //定...
复制链接

扫一扫