KISSY文本diff工具--20131028 -

xjwolaile

浏览: 342150 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

KISSY文本diff工具--20131028

博客分类：

前端技术
学习

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>

分享到：

Limiter的简单demo--20131029 | KISSY对大小图片的切换功能2--20131026

2013-10-29 00:40
浏览 731
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

KISSY文本diff工具--20131028

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

KISSY文本diff工具--20131028

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>