插件名称:jQuery Confirm
插件官方地址:http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/
整合好的效果图:
使用方法,可以看官方文档上的说明,这里大概说下我使用的过程:
首先,把下载好的样式(包括图片,js,css等)放到django app下面定义好的静态目录/static/中,命名为jqconfirm,我的具体路径如下:/python/owork/pro/static/jqconfirm,里面是下载好的几个目录文件:css img jquery.confirm js
然后,在页面<head>标签中调用这几个css和js文件:
<script src="/static/lib/jquery-1.7.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/static/jqconfirm/jquery.confirm/jquery.confirm.css" />
因为我用了bootstrap样式,所以另一个css文件,我就没调用了,如果没用bootstrap的话,那就再调用下面这个吧:
<link rel="stylesheet" type="text/css" href="/static/jqconfirm/css/styles.css" />
在<body>尾部再调用:
<script src="/static/jqconfirm/jquery.confirm/jquery.confirm.js"></script>
然后根据页面写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 %}