1、效果及功能说明
在输入框内输入字符后点击按钮键就可以添加到下面的输入框里
2、实现原理
是通过页面直接写入的方法来实现的非常的简介
3、主要的方法
4、代码
在输入框内输入字符后点击按钮键就可以添加到下面的输入框里
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>