A-A+

jQuery Confirm插件给django运维工具页面做弹窗提示

2014年12月03日 Django, Python, 自动化运维 评论 1 条 阅读 15,970 views 次

插件名称:jQuery Confirm

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

整合好的效果图:

jQuery Confirm Replacement

jQuery Confirm Replacement

jQuery Confirm Replacement

jQuery Confirm Replacement

 

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

首先,把下载好的样式(包括图片,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代码:

  1. {% extends "base.html" %}
  2. {% block subtitle%}执行{{game_name}}SQL{% endblock %}
  3. {% block position %}执行{{game_name}}SQL{% endblock %}
  4. {% block content %}
  5. <div class="container-fluid">
  6. <div class="row-fluid">
  7.     <div class="block span6">
  8.         <p class="block-heading ">命令执行窗口</p>
  9.         <div class="block-body">
  10.            <form action="" method="post" id="form1" >{% csrf_token %}
  11.                <input type="hidden" name="" id="sql"/>
  12.                <label>请输入SQL语句(多条sql则每条sql为一行)</label>
  13.                <textarea class="span12" rows="10" name="sql" id="sqlcontent"></textarea>
  14.                <button type="button" name="create" id="create" >创建数据库</button>
  15.                <button type="button" name="drop" id="drop"  >删除数据库</button>
  16.                <button type="button" class="btn btn-primary pull-right" id="mysql">执 行</button>
  17.                <div class="clearfix"></div>
  18.            </form>
  19.         </div>
  20.     </div>
  21.     <div class="block span6">
  22.         <p class="block-heading ">返回信息</p>
  23.         <div class="block-body">
  24.             {% if message %}<label class="remember-me"><font color="red">{{message}}</font></label>{% endif %}
  25.             {% for key,value in line_list.items %}
  26.                 {% ifequal value '0' %}
  27.                     <font color="red">{{key}}影响行数:{{value}}</font></br>
  28.                 {% else %}
  29.                     {{key}}影响行数:{{value}}</br>
  30.                 {% endifequal %}
  31.             {% endfor %}
  32.         </div>
  33.     </div>
  34. </div>
  35. {% if select_data %}
  36.     <div class="block">
  37.         <a href="#tablewidget" class="block-heading" data-toggle="collapse">查询结果</a>
  38.         <div id="tablewidget" class="block-body collapse in">
  39.             <table class="table">
  40.               <tbody>
  41.                 {% for i in select_data %}
  42.                 <tr>
  43.                     {% for l in i %}
  44.                        <td>{{ l }}</td>
  45.                     {% endfor %}
  46.                 </tr>
  47.                 {% endfor %}
  48.               </tbody>
  49.             </table>
  50.     </div>
  51. {% endif %}
  52. <script src="/static/jqconfirm/jquery.confirm/jquery.confirm.js"></script>
  53. <script type="text/javascript">  
  54.     $(document).ready(function(){  
  55.         function sql(){  
  56.             $("#sql").attr("name","mysql");  
  57.             $("#mysql").attr("disabled","disabled");  
  58.             $("#mysql").html("执行中");  
  59.             $("#form1").submit();  
  60.         };  
  61.           
  62.         function error(title,message){  
  63.             $.confirm({  
  64.                 'title'     : title,  
  65.                 'message'   : message,  
  66.                 'buttons'   : {  
  67.                     '返回'    : {  
  68.                         'class' : 'blue',  
  69.                         'action': function(){}  
  70.                     }  
  71.                 }  
  72.             });  
  73.         };  
  74.         function warn(title,message,fun){  
  75.             $.confirm({  
  76.                 'title'     : title,  
  77.                 'message'   : message,  
  78.                 'buttons'   : {  
  79.                     'Yes'   : {  
  80.                         'class' : 'blue',  
  81.                         'action': fun  
  82.                     },  
  83.                     'No'    : {  
  84.                         'class' : 'gray',  
  85.                         'action': function(){}  
  86.                     }  
  87.                 }  
  88.             });  
  89.         };  
  90.         $('#mysql').click(function(){  
  91.             var sqlcontent = $.trim($("#sqlcontent").val());  
  92.             if(sqlcontent == ''){  
  93.                 error('错误','请输入SQL语句后再执行!')  
  94.                 return false;  
  95.             };  
  96.             warn('警告','你确定要执行吗?',sql);  
  97.         });  
  98.     });  
  99. </script>  
  100. {% endblock %}
关键词:

1 条留言  访客:1 条  博主:0 条

  1. avatar 威客百科

    又是代码啊楼主,专业性太强了啊

给我留言

Copyright © linux系统运维 保留所有权利.   Theme  Ality 粤ICP备13023035号-1

用户登录

分享到: