常见的jquery插件，实现前端效果
模态弹框
学习网址：http://v3.bootcss.com/javascript/#modals
|
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
|
<
div
class
=
"modal fade"
id
=
"changpass"
>
<
div
class
=
"modal-dialog"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-header"
>
<
button
type
=
"button"
class
=
"close"
data-dismiss
=
"modal"
><
span
aria-hidden
=
"true"
>×</
span
><
span
class
=
"sr-only"
>Close</
span
></
button
>
<
h4
class
=
"modal-title"
>修改密码</
h4
>
</
div
>
<
form
id
=
"passwdForm"
class
=
"form-horizontal"
>
<
input
type
=
"hidden"
name
=
"id"
id
=
"passwdid"
>
<
div
class
=
"form-group"
>
<
label
for
=
"password"
class
=
"col-sm-2 control-label"
>新密码<
span
class
=
"red-fonts"
></
span
></
label
>
<
div
class
=
"col-sm-8"
>
<
input
id
=
"password"
name
=
"password"
type
=
"password"
class
=
"form-control"
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"re_password"
class
=
"col-sm-2 control-label"
>确认密码</
label
>
<
div
class
=
"col-sm-8"
>
<
input
id
=
"re_password"
name
=
"re_password"
type
=
"password"
class
=
"form-control"
>
</
div
>
</
div
>
<
div
class
=
"modal-footer"
>
<
button
type
=
"button"
class
=
"btn btn-default"
data-dismiss
=
"modal"
>取消</
button
>
<
button
type
=
"button"
class
=
"btn btn-primary"
id
=
"chpass"
>确认</
button
>
</
div
>
</
form
>
</
div
>
<!-- /.modal-content -->
</
div
>
<!-- /.modal-dialog -->
</
div
>
<!-- /.modal -->
|
jquery部分代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$("#chpass").click(function () {
$.post("/modpasswd",$("#passwdForm").serialize(),function (data) {
data=JSON.parse(data)
if(data["code"]==0){
swal({
title:'修改成功',
text:"success",
type:'success',
},function(){
location.reload()
})
}else{
swal('Error',data['errmsg'],'error')
}
})
})
|
效果图
sweetalert弹出信息
datatable美化表格
学习网址：https://datatables.net/
jquery代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$('#editable').DataTable({
'bDestory': true,
"language": {
"lengthMenu": "每页 _MENU_ 条记录",
"zeroRecords": "没有找到记录",
"sInfo": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 ),显示第 _START_ 至 _END_ 项(总共 _TOTAL_ 项)",
"infoEmpty": "无记录",
"infoFiltered": "(从 _MAX_ 条记录过滤)",
"sSearch": "搜索:",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
},
"order": [[ 0,"asc" ]]
});
|
效果图
本文转自 shouhou2581314 51CTO博客，原文链接：http://blog.51cto.com/thedream/1859901，如需转载请自行联系原作者
