ZeroClipboard 复制内容到剪贴板

1.引入文件

1
2
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/ZeroClipboard.min.js"></script>

2.复制按键

1
2
3
4
5
6
<!-- data-clipboard-target 复制此ID对应的内容 -->
<input type="text" id="fe_text" name="fe_text" value="copy_me" />
<span id="btn-copy_1" data-clipboard-target="fe_text" data-clipboard-text="test_1">复制</span>
<!-- data-clipboard-text 默认复制的内容 -->
<span id="btn-copy_2" data-clipboard-text="test_2">复制</span>
<span id="btn-copy_10" data-clipboard-text="test_10">复制</span>

3.javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
$(document).ready(function(){
//1.x IE7+
$('span[id^="btn-copy"]').each(function(){
var _id = $(this).attr('id');
var client = new ZeroClipboard(document.getElementById(_id), {moviePath: "/static/js/ZeroClipboard.swf"});
client.on("load", function(client) {
client.on("complete", function(client, args){
alert("复制成功: " + args.text);
});
});
});
//2.x IE9+
$('span[id^="btn-copy"]').each(function(){
var _id = $(this).attr('id');
var client = new ZeroClipboard(document.getElementById(_id));
client.on("ready", function(readyEvent){
client.on("aftercopy", function(event){
alert("复制成功: " + event.data["text/plain"]);
});
});
});
});
</script>

autocomplete 输入提示

1.引入文件

1
2
3
4
5
6
<script type="text/javascript" src="/static/plugins/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/static/plugins/jquery-ui/jquery-ui.min.css">
<style type="text/css">
/*显示滚动条,默认高度300px*/
.ui-autocomplete{max-height: 300px; overflow-y: auto; overflow-x: hidden;}
</style>

2.输入文本框

1
<input id="input_key" name="input_key" type="text" value="">

3.javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
var _data = ['abc', 'bcd']; //提示数据;Object or Array
$('#input_key').autocomplete({
source: _data,
minLength: 0, //无输入也提示,1-输入1个字时提示......
scroll: true,
scrollHeight: 10,
create: function(e, ui){
$(this).bind('click', function(){ //文件框获取焦点即时提示,
$(this).autocomplete('search', '');
});
},
});
</script>