项目前端常用的jquery插件使用说明

先看一下效果图

QQ图片20150204132350

QQ截图20150204135514

QQ截图20150204135241

 

总共用到了3个插件。

分别是:bootstrap,dataTables,tinymce,dropzone,bootstrap-datepicker.

 

bootstrap:

前端神器,非常好看。

弹窗用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
先定义一个div.id为create_dialog_modal
<!--Create/Edit Modal -->
<div class="modal fade" id="create_dialog_modal" tabindex="-1"
role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>

#### Add New Activity

</div>
<form action="manage_activities.php" method="post" id="saveItemForm">
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" onclick="$('#saveItemForm').submit();">Save</button>
</div>

</div>
</div>
</div>
js触发:
<script>
$(document).ready(function() {
$(document).on('click','.add-new-activity',function(){
var modalObj = $('#create_dialog_modal');
$("#createModalLabel").html('Add New Activity');
modalObj.modal();
return false;
})
})

 

dataTables:表格插件

用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
1,先输出html。table格式。id为dataTables-items
<table class="table table-striped table-bordered table-hover"
id="dataTables-items">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php foreach ((array)$allItems as $item):?>

<tr>
<td><?php echo $item["item_id"] ?></td>
<td><?php echo $item["product_name"] ?></td>
<td><?php echo $available_date?></td>
<td>
[Edit
<input type="hidden" class="item_id" value="<?php echo $item['item_id']?>"/>
<input type="hidden" class="item_area" value="<?php echo $item['area']?>"/>
<input type="hidden" class="item_type" value="<?php echo $item['type_code'].'||'.$item['type']?>"/>
<input type="hidden" class="item_acctype" value="<?php echo $accType?>"/>
<input type="hidden" class="item_available_date" value="<?php echo $available_date?>"/>
<input type="hidden" class="item_product_name" value="<?php echo $item['product_name']?>"/>
<input type="hidden" class="item_headline" value="<?php echo $item['headline']?>"/>
<input type="hidden" class="item_description" value="<?php echo $item['description']?>"/>
<input type="hidden" class="item_price" value="<?php echo $priceFi?>"/>
<input type="hidden" class="item_images" value="<?php echo $images?>"/>
](#)
|
<a onclick="deleteItem(<?php echo $item['item_id']?>,this);return false;" href="#" >Delete</a>

</td>

</tr>
<?php endforeach; ?>
</tbody>
</table>

2,js生成排序分页
<script>
$(document).ready(function() {
$('#dataTables-items').dataTable();

});

 

tinymce:富文本编辑器

用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1,定义textarea。id为item_description
<textarea class="form-control" id="item_description" rows="3" name="data[description]" required="required"></textarea>

2,js初始化
<script>
$(document).ready(function() {
tinymce.init({selector:'#item_description'});
});
</script>

得到textarea的内容:(根据id)
tinyMCE.get('item_description').getContent()

添加自定义的内容:(根据id)
var description = 'test';
tinymce.get('item_description').setContent(description);

 

dropzone:上传文件插件

这个挺复杂的。

用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
1,定义html。id为dropz.必须加form。
<div class="form-group">
<label for="exampleInputFile">Images</label>
<form action="" class="dropzone" id="dropz">
<div class="fallback">
<input name="data[images]" type="file" multiple />
</div>
</form>
</div>

2,,js初始化
<script>
$(document).ready(function() {
var fileList = {};//所有上传的文件名
Dropzone.autoDiscover = false;
$("#dropz").dropzone({
url: "manage_activities.php", //上传的php处理地址
addRemoveLinks: true,
dictRemoveLinks: "x",
dictCancelUpload: "x",
maxFiles: 10,
maxFilesize: 5,
acceptedFiles: ".jpg,.png,.gif,.jpeg",
init: function() {
this.on("success", function(file,serverFileName) {
//上传成功后 返回的文件信息。存在fileList中。
console.log(serverFileName);
serverFileName = $.trim(serverFileName);
fileList[serverFileName] = {"serverFileName" : serverFileName, "fileName" : file.name };
console.log(fileList);
console.log("File " + file.name + "uploaded");
});
this.on("removedfile", function(file) {
//删除文件后返回的信息
console.log("File " + file.name + "removed");
var newFile = '';
$.each(fileList,function(i,item){
// console.log(i);
// console.log(item);
if(item.fileName == file.name){
newFile = i;
delete fileList[newFile];
return false;
}
})

// console.log(newFile);
// console.log(JSON.stringify(newFile));
if(newFile != ''){
//ajax删除服务器端存放的文件。
$.ajax({
url: "manage_activities.php",
type: "POST",
data: { "file" : newFile,'type':'file' }
});
}

});
}
});
});
</script>

如何动态的添加已存在的图片?
//定义images
var images = {'/var/www/upload/aaa.jpg','/var/www/upload/bbb.gif'};
//根据id找到需要上传的元素
var myDropzone = Dropzone.forElement("#dropz");
//删除当前元素上的所有文件
myDropzone.removeAllFiles( true );
//循环添加到该元素中
$.each(images,function(i,item){
var mockFile = { name: baseName(item), size: 12345 };
myDropzone.emit("addedfile", mockFile);
fileList[item] = {"serverFileName" : item, "fileName" : baseName(item)};
// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile,'<?php echo $baseUrlPath?>'+item);
myDropzone.files.push( mockFile );
// console.log(i);
// console.log(item);
// console.log(baseName(item));
})

function baseName(str)
{
var base = new String(str).substring(str.lastIndexOf('/') + 1);
// if(base.lastIndexOf(".") != -1)
// base = base.substring(0, base.lastIndexOf("."));
return base;
}

 

bootstrap-datepicker:时间日期插件

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1,定义html
<div class="form-group">
<label for="item_available_date">Available Date</label>
<input type="date" class="form-control" id="item_available_date" placeholder="Available Date" name="data[available_date]" required="required">
</div>

2,js初始化
<script>
$(document).ready(function() {
$('#item_available_date').datepicker({
format: "yyyy-mm-dd",
});
});
</script>

 

坚持原创技术分享,您的支持将鼓励我继续创作!