jQuery Confirm插件做页面做弹窗提示

最新推荐文章于 2024-05-30 09:31:08 发布

KISSING_hu

最新推荐文章于 2024-05-30 09:31:08 发布

阅读量3.1k

点赞数

分类专栏： python之django

python之django 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

插件名称：jQuery Confirm

插件官方地址：http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/

整合好的效果图：

jQuery Confirm Replacement

使用方法，可以看官方文档上的说明，这里大概说下我使用的过程：

首先，把下载好的样式（包括图片，js，css等）放到django app下面定义好的静态目录/static/中，命名为jqconfirm，我的具体路径如下：/python/owork/pro/static/jqconfirm，里面是下载好的几个目录文件：css img jquery.confirm js

然后，在页面<head>标签中调用这几个css和js文件：

因为我用了bootstrap样式，所以另一个css文件，我就没调用了，如果没用bootstrap的话，那就再调用下面这个吧：

在<body>尾部再调用：

然后根据页面写jquery,这是我的HTML模板页代码（有点粗糙哈）,标红的是我写的jquery代码:

{% extends "base.html" %}
{% block subtitle%}执行{{game_name}}SQL{% endblock %}
{% block position %}执行{{game_name}}SQL{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row-fluid">
<div class="block span6">
<p class="block-heading ">命令执行窗口</p>
<div class="block-body">
<form action="" method="post" id="form1" >{% csrf_token %}
<input type="hidden" name="" id="sql"/>
<label>请输入SQL语句（多条sql则每条sql为一行）</label>
<textarea class="span12" rows="10" name="sql" id="sqlcontent"></textarea>
<button type="button" name="create" id="create" >创建数据库</button>
<button type="button" name="drop" id="drop" >删除数据库</button>
<button type="button" class="btn btn-primary pull-right" id="mysql">执行</button>
<div class="clearfix"></div>
</form>
</div>
</div>
<div class="block span6">
<p class="block-heading ">返回信息</p>
<div class="block-body">
{% if message %}<label class="remember-me"><font color="red">{{message}}</font></label>{% endif %}
{% for key,value in line_list.items %}
{% ifequal value '0' %}
<font color="red">{{key}}影响行数：{{value}}</font></br>
{% else %}
{{key}}影响行数：{{value}}</br>
{% endifequal %}
{% endfor %}
</div>
</div>
</div>
{% if select_data %}
<div class="block">
<a href="#tablewidget" class="block-heading" data-toggle="collapse">查询结果</a>
<div id="tablewidget" class="block-body collapse in">
<table class="table">
<tbody>
{% for i in select_data %}
<tr>
{% for l in i %}
<td>{{ l }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
<script src="/static/jqconfirm/jquery.confirm/jquery.confirm.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function sql(){
$("#sql").attr("name","mysql");
$("#mysql").attr("disabled","disabled");
$("#mysql").html("执行中");
$("#form1").submit();
};
function error(title,message){
$.confirm({
'title' : title,
'message' : message,
'buttons' : {
'返回' : {
'class' : 'blue',
'action': function(){}
}
}
});
};
function warn(title,message,fun){
$.confirm({
'title' : title,
'message' : message,
'buttons' : {
'Yes' : {
'class' : 'blue',
'action': fun
},
'No' : {
'class' : 'gray',
'action': function(){}
}
}
});
};
$('#mysql').click(function(){
var sqlcontent = $.trim($("#sqlcontent").val());
if(sqlcontent == ''){
error('错误','请输入SQL语句后再执行！')
return false;
};
warn('警告','你确定要执行吗？',sql);
});
});
</script>
{% endblock %}

KISSING_hu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery Confirm插件做页面做弹窗提示

插件名称：jQuery Confirm插件官方地址：http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/整合好的效果图：jQuery Confirm ReplacementjQuery Confirm Replacement 使用方法，可以看官方文档上的
复制链接

扫一扫