Changeset a358037 in ecoalba


Ignore:
Timestamp:
Oct 20, 2014, 3:29:07 PM (10 years ago)
Author:
jbecerra <jbecerra@…>
Branches:
master
Children:
32f6b98
Parents:
8c68be7
Message:

Ajustes de Look & Feel, eliminadas referencias a jquery y jquery-ui antiguos, corrección de bug en seleccionar fechas: eliminado icono, ahora se muestra el calendario en focus del input

Location:
templates
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • templates/base_salida.html

    r8aca7eb ra358037  
    44    <head>
    55        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6         <title>Ecoalba</title>
    7         <link type="text/css" rel="stylesheet" href="{{MEDIA_URL}}css/style.css" />
    8         <link type="text/css" rel="stylesheet" href="{{MEDIA_URL}}css/styles.css" />
    9         <link type="text/css" rel="stylesheet" href="{{MEDIA_URL}}css/themes/base/jquery.ui.theme.css" />
    10         <link type="text/css" rel="stylesheet" href="{{MEDIA_URL}}css/themes/base/jquery.ui.core.css" />
    11         <link type="text/css" rel="stylesheet" href="{{MEDIA_URL}}css/themes/base/jquery.ui.autocomplete.css" />
    12         <link type="text/css" rel="stylesheet" href="{{MEDIA_URL}}css/themes/base/jquery.ui.dialog.css" />
    13         <link rel="stylesheet" href="{{MEDIA_URL}}css/kickstart.css" media="all" />
     6        <title>Ecoalba</title>>
     7<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/styles.css" media="screen"/>
     8        <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/print.css" media="print"/>
     9        <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/jquery-ui.css">
     10        <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/themes/base/jquery.ui.theme.css" />
     11        <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/kickstart.css" media="all" />
     12        <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/stylesheet.css" />
    1413       
    1514        <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-1.11.1.min.js"></script>
    16         <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-ui-1.8.23.custom.min.js" ></script>
    17         <script type="text/javascript" src="{{MEDIA_URL}}js/ui/jquery.ui.core.js"></script>
    18         <script type="text/javascript" src="{{MEDIA_URL}}js/ui/jquery.ui.widget.js"></script>
    19         <script type="text/javascript" src="{{MEDIA_URL}}js/ui/jquery.ui.position.js"></script>
    20         <script type="text/javascript" src="{{MEDIA_URL}}js/ui/jquery.ui.autocomplete.js"></script>
    21         <script type="text/javascript" src="{{MEDIA_URL}}js/ui/jquery.ui.dialog.js"></script>
    22         <script type="text/javascript" src="{{MEDIA_URL}}js/jqDock/jquery.jqdock.min.js"></script>
     15        <script src="{{ MEDIA_URL }}js/jquery-ui.min.js"></script>
     16        <!--<script type="text/javascript" src="{{MEDIA_URL}}js/jqDock/jquery.jqdock.min.js"></script>-->
    2317        <script type="text/javascript" src="{{MEDIA_URL}}js/kickstart.js"></script>
    2418        {% block librerias %}{% endblock librerias %}

  • templates/convenios/anexarconvenios.html

    r51c23af ra358037  
    1111            numberOfMonths : 1,
    1212            showButtonPanel : false,
    13             showOn : "button",
     13            showOn : "focus",
     14            /*showOn : "button",
    1415            buttonImage : "{{MEDIA_URL}}/js/ui/calendar.gif",
    15             buttonImageOnly : true,
     16            buttonImageOnly : true,*/
    1617            prevText : "",
    1718            nextText : "",
    … …  
    2425            numberOfMonths : 1,
    2526            showButtonPanel : false,
    26             showOn : "button",
     27            showOn : "focus",
     28            /*showOn : "button",
    2729            buttonImage : "{{MEDIA_URL}}/js/ui/calendar.gif",
    28             buttonImageOnly : true,
     30            buttonImageOnly : true,*/
    2931            prevText : "",
    3032            nextText : "",

  • templates/convenios/paises.html

    r2efe246 ra358037  
    22{% load i18n %}
    33{% block librerias %}
    4 <link type="text/css" rel="stylesheet" href="{{MEDIA_URL}}css/themes/base/jquery.ui.theme.css" />
    5 <link type="text/css" rel="stylesheet" href="{{MEDIA_URL}}css/themes/base/jquery.ui.core.css" />
    6 <link type="text/css" rel="stylesheet" href="{{MEDIA_URL}}css/themes/base/jquery.ui.tabs.css" />
    7 <link type="text/css" rel="stylesheet" href="{{MEDIA_URL}}css/themes/base/jquery.ui.selectable.css" />
    84<link type="text/css" rel="stylesheet" href="{{MEDIA_URL}}css/stylesheet.css" />
    9 <script type="text/javascript" src="{{MEDIA_URL}}js/ui/jquery.ui.tabs.js"></script>
    10 <script type="text/javascript" src="{{MEDIA_URL}}js/ui/jquery.ui.mouse.js"></script>
    11 <script type="text/javascript" src="{{MEDIA_URL}}js/ui/jquery.ui.sortable.js"></script>
    12 <script type="text/javascript" src="{{MEDIA_URL}}js/ui/jquery.ui.selectable.js"></script>
    13 <script type="text/javascript" src="{{MEDIA_URL}}js/ui/jquery.effects.core.js"></script>
    14 <script type="text/javascript" src="{{MEDIA_URL}}js/ui/jquery.effects.blind.js"></script>
    15 <script type="text/javascript" src="{{MEDIA_URL}}js/ui/jquery.ui.accordion.js"></script>
    165
    176<style>
    18         #id_busca {
    19                 width: 700px
    20         }
    21         #paissDisponibles, #paissSeleccionados {
    22                 list-style-type: none;
    23                 float: left;
    24                 width: 100%;
    25                 height: 200px;
    26                 margin: 0 10px 0 0;
    27                 padding: 0 0 2.5em
    28         }
    29         #paissDisponibles li, #paissSeleccionados li {
    30                 margin: 0 5px 5px;
    31                 padding: 2px
    32         }
    33         #paissDisponibles .ui-selecting, #paissSeleccionados .ui-selecting {
    34                 background: #FECA40
    35         }
    36         #paissDisponibles .ui-selected, #paissSeleccionados .ui-selected {
    37                 background: #F39814;
    38                 color: #FFF
    39         }
    40         td.cabeceraFila {
    41                 vertical-align: text-top;
    42                 width: 60px;
    43                 background: repeat;
    44                 border: 0;
    45                 padding: 0
    46         }
    47         td.textoDescriptivo {
    48                 text-align: left;
    49                 background: repeat;
    50                 border: 0;
    51                 padding: 0
    52         }
    53         .ui-tabs-panel {
    54                 height: 402px
    55         }
    56         label {
    57                 font-size: 11px
    58         }
    59         form li:after, form li div:after {
    60                 content: ".";
    61                 display: none
    62         }
    63         #insertarPaiss, #eliminarPaiss, #insertarTodosPaiss, #eliminarTodosPaiss, #botonesFiltro {
    64                 width: 30px
    65         }
    66         .ui-tabs-nav li a {
    67                 padding: 0.5em;
    68         }
    69         #id_buscarporp {
    70                 width: 100%
    71         }
    72         td.bandera {
    73                 width: 18px
    74         }
     7    #id_busca {
     8        width: 700px
     9    }
     10    #paissDisponibles, #paissSeleccionados {
     11        list-style-type: none;
     12        float: left;
     13        width: 100%;
     14        height: 200px;
     15        margin: 0 10px 0 0;
     16        padding: 0 0 2.5em
     17    }
     18    #paissDisponibles li, #paissSeleccionados li {
     19        margin: 0 5px 5px;
     20        padding: 2px
     21    }
     22    #paissDisponibles .ui-selecting, #paissSeleccionados .ui-selecting {
     23        background: #FECA40
     24    }
     25    #paissDisponibles .ui-selected, #paissSeleccionados .ui-selected {
     26        background: #F39814;
     27        color: #FFF
     28    }
     29    td.cabeceraFila {
     30        vertical-align: text-top;
     31        width: 60px;
     32        background: repeat;
     33        border: 0;
     34        padding: 0
     35    }
     36    td.textoDescriptivo {
     37        text-align: left;
     38        background: repeat;
     39        border: 0;
     40        padding: 0
     41    }
     42    .ui-tabs-panel {
     43        height: 402px
     44    }
     45    label {
     46        font-size: 11px
     47    }
     48    form li:after, form li div:after {
     49        content: ".";
     50        display: none
     51    }
     52    #insertarPaiss, #eliminarPaiss, #insertarTodosPaiss, #eliminarTodosPaiss, #botonesFiltro {
     53        width: 30px
     54    }
     55    .ui-tabs-nav li a {
     56        padding: 0.5em;
     57    }
     58    #id_buscarporp {
     59        width: 100%
     60    }
     61    td.bandera {
     62        width: 18px
     63    }
    7564</style>
    7665
    7766<script type="text/javascript">
    78         //<![CDATA[
    79         function pasarDatos() {
    80                 var pS = window.opener.document.getElementById("paissSeleccionados");
    81                 var plS = window.opener.document.getElementById("id_lpaissSeleccionados");
    82                 var liArregloPaissSele = [];
    83                
    84                 var $paissSeleccionados = $("#paissSeleccionados");
    85 
    86                 ($paissSeleccionados).each(function() {
    87                         resetearSeleccionados($paissSeleccionados);
    88                         liArregloPaissSele.push($("#paissSeleccionados").html());
    89                 });
    90                 eliminarSeleccionados($(pS));
    91                 eliminarItemVacio($(pS));
    92                
    93                 $(plS).value = "";
    94                 actualizarSeleccionados($("#paissSeleccionados li"), $(plS));
    95                 $(pS).append(liArregloPaissSele.join(''));
    96                 window.close();
    97         }
    98 
    99         function Cancelar() {
    100                 var plS = window.opener.document.getElementById("id_lpaissSeleccionados");
    101                
    102                 plS.value = document.getElementById("id_lpais").value;
    103                 window.close();
    104         }
    105        
    106         ( function($) {
    107                         // custom css expression for a case-insensitive contains()
    108                         jQuery.expr[':'].Contains = function(a, i, m) {
    109                                 return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    110                         };
    111 
    112                         function filterList(header, list) {
    113                                 // header is any element, list is an unordered list
    114                                 // create and add the filter form to the header
    115                                 var form = $("<form>").attr({
    116                                         "class" : "filterform",
    117                                         "action" : "#"
    118                                 }), input = $("<input>").attr({
    119                                         "class" : "filterinput",
    120                                         "type" : "text"
    121                                 });
    122                                 $(form).append(input).appendTo(header);
    123 
    124                                 $(input).change(function() {
    125                                         var filter = $(this).val();
    126                                         if ((filter) && (filter.length > 2)) {
    127 
    128                                                 $matches = $(list).find('a:Contains(' + filter + ')').parent();
    129                                                 $('li', list).not($matches).slideUp();
    130                                                 $matches.slideDown();
    131 
    132                                         } else {
    133                                                 $(list).find("li").slideDown();
    134                                         }
    135                                         return false;
    136                                 }).keyup(function() {
    137                                         // fire the above change event after every letter
    138                                         $(this).change();
    139                                 });
    140                         }
    141 
    142                         //ondomready
    143                         $(function() {
    144                                 filterList($("#form6"), $("#paissDisponibles"));
    145                         });
    146                 }(jQuery));
    147        
    148         function resetearSeleccionados($seleccionados) {
    149                 $seleccionados.removeClass('ui-selected');
    150         }
    151 
    152         function actualizarSeleccionados($seleccionados, $codigos) {
    153                 var valoresActuales = "";
    154                 if ($codigos.attr('value') != "")
    155                         valoresActuales = $codigos.attr('value') + "$$";
    156                 $seleccionados.each(function(index) {
    157                         var codigo = $(this).find('.cabeceraFila').html();
    158                         if (codigo != null)
    159                                 valoresActuales += codigo + "$$";
    160                 });
    161                 valoresActuales = valoresActuales.substring(0, valoresActuales.length - 2);
    162                 $codigos.attr('value', valoresActuales);
    163                
    164                 if ($("#paissSeleccionados li.element").length > 0) {
    165                         $("#btnSeleccionarPaises").removeAttr("disabled");
    166                         $("#btnSeleccionarPaises").removeClass('disabled');
    167                 }
    168                 else {
    169                         $("#btnSeleccionarPaises").attr("disabled", "disabled");
    170                         $("#btnSeleccionarPaises").addClass('disabled');
    171                 }
    172         }
    173 
    174         function eliminarItemVacio($lista) {
    175                 $lista.find('.empty').remove();
    176         }
    177 
    178         function eliminarSeleccionados($lista) {
    179                 $lista.find('li').remove();
    180         }
    181 
    182         function agregarItemVacio($lista) {
    183                 $lista.prepend("<li class='empty ui-widget-content ui-state-disabled'>{% trans "no_elements" %}</li>");
    184         }
    185        
    186         function verificarDisponibilidadElementos($disponibles, $seleccionados) {
    187                 //Verifica si hay Disponibles en su lista
    188                 if ($disponibles.find("li.element").length > 0)
    189                         eliminarItemVacio($disponibles);
    190                 else if ($disponibles.find("li.empty").length == 0)
    191                         agregarItemVacio($disponibles);
    192 
    193                 //Verifica si hay Seleccionadas en su lista
    194                 if ($seleccionados.find("li.element").length > 0)
    195                         eliminarItemVacio($seleccionados);
    196                 else if ($seleccionados.find("li.empty").length == 0)
    197                         agregarItemVacio($seleccionados);
    198         }
    199 
    200         $(function() {
    201                 $("#tabs").tabs();
    202 
    203                 /* Pais */
    204 
    205                 var $paissDisponibles = $("#paissDisponibles");
    206 
    207                 var fila, registro, liArregloPaissDisp = [];
    208                 {% for opcion in paissDisponibles %}
    209                 registro = "{{opcion}}".split('-', 3);
    210                 fila = "<table><tr>" + "<td class='cabeceraFila'>" + registro[0] + "</td><td class='bandera'><i class='sprite sprite-" + String.prototype.toLowerCase.apply(registro[2]) + "'></i></td><td class='textoDescriptivo'>" + registro[1] + "</td></tr></table>";
    211                 liArregloPaissDisp.push("<li class='element ui-widget-content'>" + fila + "</li>");
    212                 {% empty %}
    213                 liArregloPaissDisp.push("<li class='empty ui-widget-content ui-state-disabled'>No hay Elementos</li>");
    214                 {% endfor %}
    215 
    216                 $paissDisponibles.append(liArregloPaissDisp.join(''));
     67    //<![CDATA[
     68    function pasarDatos() {
     69        var pS = window.opener.document.getElementById("paissSeleccionados");
     70        var plS = window.opener.document.getElementById("id_lpaissSeleccionados");
     71        var liArregloPaissSele = [];
     72       
     73        var $paissSeleccionados = $("#paissSeleccionados");
     74
     75        ($paissSeleccionados).each(function() {
     76            resetearSeleccionados($paissSeleccionados);
     77            liArregloPaissSele.push($("#paissSeleccionados").html());
     78        });
     79        eliminarSeleccionados($(pS));
     80        eliminarItemVacio($(pS));
     81       
     82        $(plS).value = "";
     83        actualizarSeleccionados($("#paissSeleccionados li"), $(plS));
     84        $(pS).append(liArregloPaissSele.join(''));
     85        window.close();
     86    }
     87
     88    function Cancelar() {
     89        var plS = window.opener.document.getElementById("id_lpaissSeleccionados");
     90       
     91        plS.value = document.getElementById("id_lpais").value;
     92        window.close();
     93    }
     94   
     95    ( function($) {
     96            // custom css expression for a case-insensitive contains()
     97            jQuery.expr[':'].Contains = function(a, i, m) {
     98                return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
     99            };
     100
     101            function filterList(header, list) {
     102                // header is any element, list is an unordered list
     103                // create and add the filter form to the header
     104                var form = $("<form>").attr({
     105                    "class" : "filterform",
     106                    "action" : "#"
     107                }), input = $("<input>").attr({
     108                    "class" : "filterinput",
     109                    "type" : "text"
     110                });
     111                $(form).append(input).appendTo(header);
     112
     113                $(input).change(function() {
     114                    var filter = $(this).val();
     115                    if ((filter) && (filter.length > 2)) {
     116
     117                        $matches = $(list).find('a:Contains(' + filter + ')').parent();
     118                        $('li', list).not($matches).slideUp();
     119                        $matches.slideDown();
     120
     121                    } else {
     122                        $(list).find("li").slideDown();
     123                    }
     124                    return false;
     125                }).keyup(function() {
     126                    // fire the above change event after every letter
     127                    $(this).change();
     128                });
     129            }
     130
     131            //ondomready
     132            $(function() {
     133                filterList($("#form6"), $("#paissDisponibles"));
     134            });
     135        }(jQuery));
     136   
     137    function resetearSeleccionados($seleccionados) {
     138        $seleccionados.removeClass('ui-selected');
     139    }
     140
     141    function actualizarSeleccionados($seleccionados, $codigos) {
     142        var valoresActuales = "";
     143        if ($codigos.attr('value') != "")
     144            valoresActuales = $codigos.attr('value') + "$$";
     145        $seleccionados.each(function(index) {
     146            var codigo = $(this).find('.cabeceraFila').html();
     147            if (codigo != null)
     148                valoresActuales += codigo + "$$";
     149        });
     150        valoresActuales = valoresActuales.substring(0, valoresActuales.length - 2);
     151        $codigos.attr('value', valoresActuales);
     152       
     153        if ($("#paissSeleccionados li.element").length > 0) {
     154            $("#btnSeleccionarPaises").removeAttr("disabled");
     155            $("#btnSeleccionarPaises").removeClass('disabled');
     156        }
     157        else {
     158            $("#btnSeleccionarPaises").attr("disabled", "disabled");
     159            $("#btnSeleccionarPaises").addClass('disabled');
     160        }
     161    }
     162
     163    function eliminarItemVacio($lista) {
     164        $lista.find('.empty').remove();
     165    }
     166
     167    function eliminarSeleccionados($lista) {
     168        $lista.find('li').remove();
     169    }
     170
     171    function agregarItemVacio($lista) {
     172        $lista.prepend("<li class='empty ui-widget-content ui-state-disabled'>{% trans "no_elements" %}</li>");
     173    }
     174   
     175    function verificarDisponibilidadElementos($disponibles, $seleccionados) {
     176        //Verifica si hay Disponibles en su lista
     177        if ($disponibles.find("li.element").length > 0)
     178            eliminarItemVacio($disponibles);
     179        else if ($disponibles.find("li.empty").length == 0)
     180            agregarItemVacio($disponibles);
     181
     182        //Verifica si hay Seleccionadas en su lista
     183        if ($seleccionados.find("li.element").length > 0)
     184            eliminarItemVacio($seleccionados);
     185        else if ($seleccionados.find("li.empty").length == 0)
     186            agregarItemVacio($seleccionados);
     187    }
     188
     189    $(function() {
     190        $("#tabs").tabs();
     191
     192        /* Pais */
     193
     194        var $paissDisponibles = $("#paissDisponibles");
     195
     196        var fila, registro, liArregloPaissDisp = [];
     197        {% for opcion in paissDisponibles %}
     198        registro = "{{opcion}}".split('-', 3);
     199        fila = "<table><tr>" + "<td class='cabeceraFila'>" + registro[0] + "</td><td class='bandera'><i class='sprite sprite-" + String.prototype.toLowerCase.apply(registro[2]) + "'></i></td><td class='textoDescriptivo'>" + registro[1] + "</td></tr></table>";
     200        liArregloPaissDisp.push("<li class='element ui-widget-content'>" + fila + "</li>");
     201        {% empty %}
     202        liArregloPaissDisp.push("<li class='empty ui-widget-content ui-state-disabled'>No hay Elementos</li>");
     203        {% endfor %}
     204
     205        $paissDisponibles.append(liArregloPaissDisp.join(''));
    217206 
    218                 var $paissSeleccionados = $("#paissSeleccionados");
    219                 eliminarItemVacio($("#paissSeleccionados"));
    220                
    221                 var fila, registro, liArregloPaissSele = [];
    222                 {% for opcion in paissSeleccionados %}
    223                 registro = "{{opcion}}".split('-', 3);
    224                 fila = "<table><tr>" + "<td class='cabeceraFila'>" + registro[0] + "</td><td><img src='{{ MEDIA_URL }}/imagenes/banderas-16x11/" + String.prototype.toLowerCase.apply(registro[2]) + ".png'></td><td class='textoDescriptivo'>" + registro[1] + "</td></tr></table>";
    225                 liArregloPaissSele.push("<li class='element ui-widget-content'>" + fila + "</li>");
    226                 {% empty %}
    227                 liArregloPaissSele.push("<li class='empty ui-widget-content ui-state-disabled'>{% trans "no_elements" %}</li>");
    228                 {% endfor %}
    229 
    230                 $paissSeleccionados.append(liArregloPaissSele.join(''));
    231 
    232                 $("#paissDisponibles, #paissSeleccionados").sortable({
    233                         connectWith : ".connectedSortable",
    234                         dropOnEmpty : true,
    235                         items : "li.element",
    236                         stop : function() {
    237                                 actualizarSeleccionados($("#paissSeleccionados li"), $("#id_lpaissSeleccionados"));
    238                                 verificarDisponibilidadElementos($("#paissDisponibles"), $("#paissSeleccionados"));
    239                         }
    240                 }).selectable({
    241                         filter : "li.element"
    242                 });
    243 
    244                 $("#paissDisponibles li, #paissSeleccionados li").disableSelection();
    245 
    246                 $("li.element").click(function() {
    247                         var $objeto = $(this);
    248                         if ($objeto.hasClass('ui-selected'))
    249                                 $objeto.removeClass('ui-selected');
    250                         else
    251                                 $objeto.addClass('ui-selected');
    252                 });
    253 
    254                 $('#insertarPaiss').click(function() {
    255                         resetearSeleccionados($("#paissSeleccionados li.ui-selected"));
    256                         $paissSeleccionados.append($("#paissDisponibles li.ui-selected"));
    257                         actualizarSeleccionados($("#paissSeleccionados li"), $("#id_lpaissSeleccionados"));
    258                         verificarDisponibilidadElementos($("#paissDisponibles"), $("#paissSeleccionados"));
    259                 });
    260 
    261                 $('#insertarTodosPaiss').click(function() {
    262                         resetearSeleccionados($("#paissSeleccionados li.ui-selected"));
    263                         $paissSeleccionados.append($("#paissDisponibles li.element"));
    264                         actualizarSeleccionados($("#paissSeleccionados li"), $("#id_lpaissSeleccionados"));
    265                         eliminarItemVacio($("#paissSeleccionados"));
    266 
    267                         if ($("#paissDisponibles li").length < 1) {
    268                                 agregarItemVacio($("#paissDisponibles"));
    269                         }
    270                 });
    271 
    272                 $('#eliminarPaiss').click(function() {
    273                         resetearSeleccionados($("#paissDisponibles li.ui-selected"));
    274                         $paissDisponibles.append($("#paissSeleccionados li.ui-selected"));
    275                         actualizarSeleccionados($("#paissSeleccionados li"), $("#id_lpaissSeleccionados"));
    276 
    277                         verificarDisponibilidadElementos($("#paissDisponibles"), $("#paissSeleccionados"));
    278                 });
    279 
    280                 $('#eliminarTodosPaiss').click(function() {
    281                         resetearSeleccionados($("#paissDisponibles li.ui-selected"));
    282                         $paissDisponibles.append($("#paissSeleccionados li.element"));
    283                         actualizarSeleccionados($("#paissSeleccionados li"), $("#id_lpaissSeleccionados"));
    284 
    285                         eliminarItemVacio($("#paissDisponibles"));
    286 
    287                         if ($("#paissSeleccionados li").length < 1) {
    288                                 agregarItemVacio($("#paissSeleccionados"));
    289                         }
    290                 });
    291 
    292         });
    293        
    294         $(document).ready(function() {
    295 
    296                 $('#tags').attr('autocomplete', 'off');
    297                 $('#tags').attr('role', 'textbox');
    298                 $('#tags').attr('aria-autocomplete', 'list');
    299                 $('#tags').attr('aria-haspopup', 'true');
    300         });
    301 
    302         $(function() {
    303                 $("#dialog").dialog({
    304                         resizable : false,
    305                         height : 200,
    306                         modal : true,
    307                         closeOnEscape : false,
    308                         buttons : {
    309                                 'Aceptar' : function() {
    310                                         $('#items_ue1').click();
    311                                         $(this).dialog('close');
    312                                 },
    313                         },
    314                 })
    315         });
    316        
    317         //]]>
     207        var $paissSeleccionados = $("#paissSeleccionados");
     208        eliminarItemVacio($("#paissSeleccionados"));
     209       
     210        var fila, registro, liArregloPaissSele = [];
     211        {% for opcion in paissSeleccionados %}
     212        registro = "{{opcion}}".split('-', 3);
     213        fila = "<table><tr>" + "<td class='cabeceraFila'>" + registro[0] + "</td><td><img src='{{ MEDIA_URL }}/imagenes/banderas-16x11/" + String.prototype.toLowerCase.apply(registro[2]) + ".png'></td><td class='textoDescriptivo'>" + registro[1] + "</td></tr></table>";
     214        liArregloPaissSele.push("<li class='element ui-widget-content'>" + fila + "</li>");
     215        {% empty %}
     216        liArregloPaissSele.push("<li class='empty ui-widget-content ui-state-disabled'>{% trans "no_elements" %}</li>");
     217        {% endfor %}
     218
     219        $paissSeleccionados.append(liArregloPaissSele.join(''));
     220
     221        $("#paissDisponibles, #paissSeleccionados").sortable({
     222            connectWith : ".connectedSortable",
     223            dropOnEmpty : true,
     224            items : "li.element",
     225            stop : function() {
     226                actualizarSeleccionados($("#paissSeleccionados li"), $("#id_lpaissSeleccionados"));
     227                verificarDisponibilidadElementos($("#paissDisponibles"), $("#paissSeleccionados"));
     228            }
     229        }).selectable({
     230            filter : "li.element"
     231        });
     232
     233        $("#paissDisponibles li, #paissSeleccionados li").disableSelection();
     234
     235        $("li.element").click(function() {
     236            var $objeto = $(this);
     237            if ($objeto.hasClass('ui-selected'))
     238                $objeto.removeClass('ui-selected');
     239            else
     240                $objeto.addClass('ui-selected');
     241        });
     242
     243        $('#insertarPaiss').click(function() {
     244            resetearSeleccionados($("#paissSeleccionados li.ui-selected"));
     245            $paissSeleccionados.append($("#paissDisponibles li.ui-selected"));
     246            actualizarSeleccionados($("#paissSeleccionados li"), $("#id_lpaissSeleccionados"));
     247            verificarDisponibilidadElementos($("#paissDisponibles"), $("#paissSeleccionados"));
     248        });
     249
     250        $('#insertarTodosPaiss').click(function() {
     251            resetearSeleccionados($("#paissSeleccionados li.ui-selected"));
     252            $paissSeleccionados.append($("#paissDisponibles li.element"));
     253            actualizarSeleccionados($("#paissSeleccionados li"), $("#id_lpaissSeleccionados"));
     254            eliminarItemVacio($("#paissSeleccionados"));
     255
     256            if ($("#paissDisponibles li").length < 1) {
     257                agregarItemVacio($("#paissDisponibles"));
     258            }
     259        });
     260
     261        $('#eliminarPaiss').click(function() {
     262            resetearSeleccionados($("#paissDisponibles li.ui-selected"));
     263            $paissDisponibles.append($("#paissSeleccionados li.ui-selected"));
     264            actualizarSeleccionados($("#paissSeleccionados li"), $("#id_lpaissSeleccionados"));
     265
     266            verificarDisponibilidadElementos($("#paissDisponibles"), $("#paissSeleccionados"));
     267        });
     268
     269        $('#eliminarTodosPaiss').click(function() {
     270            resetearSeleccionados($("#paissDisponibles li.ui-selected"));
     271            $paissDisponibles.append($("#paissSeleccionados li.element"));
     272            actualizarSeleccionados($("#paissSeleccionados li"), $("#id_lpaissSeleccionados"));
     273
     274            eliminarItemVacio($("#paissDisponibles"));
     275
     276            if ($("#paissSeleccionados li").length < 1) {
     277                agregarItemVacio($("#paissSeleccionados"));
     278            }
     279        });
     280
     281    });
     282   
     283    $(document).ready(function() {
     284
     285        $('#tags').attr('autocomplete', 'off');
     286        $('#tags').attr('role', 'textbox');
     287        $('#tags').attr('aria-autocomplete', 'list');
     288        $('#tags').attr('aria-haspopup', 'true');
     289    });
     290
     291    $(function() {
     292        $("#dialog").dialog({
     293            resizable : false,
     294            height : 200,
     295            modal : true,
     296            closeOnEscape : false,
     297            buttons : {
     298                'Aceptar' : function() {
     299                    $('#items_ue1').click();
     300                    $(this).dialog('close');
     301                },
     302            },
     303        })
     304    });
     305   
     306    //]]>
    318307</script>
    319308
    … …  
    323312<form id="forma" class="wufoo" action={{BASE_URL}}/convenios/Paises method="post">
    324313   <input type="hidden" name="lpais" id="id_lpais"/>
    325         <div class="grid">
    326             <div class="col_2" style="font-weight: bold">
    327                 {% trans 'pais' %}:
    328             </div>
    329             <div class="col_10">
    330                 {{ formulariopais.buscarporp }}
    331             </div>
    332             <div class="col_2">
    333             </div>
    334             <div class="col_10">
    335                 <button id="btnFiltrarPais" class="square small" onclick="submit()"><i class="icon-filter"></i>&nbsp;{% trans "filtrar_pais" %}</button>
    336             </div>
    337             <div class="col_12">
    338                 <table cellpadding="0" cellspacing="0">
    339                                 <tr>
    340                                         <td>
    341                                                 <label class="desc">{% trans "disponibles" %}:</label>
    342                                                 <div style="overflow:auto; width:360px; height:150px; float: left">
    343                                                         <ul id="paissDisponibles" class="connectedSortable"></ul>
    344                                                 </div>
    345                                         </td>
    346                                         <td style="padding: 4px; border: 0">
    347                                                 <table id="botonesFiltroPaiss">
    348                                                         <tr>
    349                                                                 <td>
    350                                                                 <button class="square small" id="insertarPaiss" onclick="return false;">
    351                                                                         <i class="icon-angle-right"></i>
    352                                                                 </button></td>
    353                                                         </tr>
    354                                                         <tr>
    355                                                                 <td>
    356                                                                 <button class="square small" id="insertarTodosPaiss" onclick="return false;">
    357                                                                         <i class=" icon-double-angle-right"></i>
    358                                                                 </button></td>
    359                                                         </tr>
    360                                                         <tr>
    361                                                                 <td>
    362                                                                 <button class="square small" id="eliminarPaiss" onclick="return false;">
    363                                                                         <i class="icon-angle-left"></i>
    364                                                                 </button></td>
    365                                                         </tr>
    366                                                         <tr>
    367                                                                 <td>
    368                                                                 <button class="square small" id="eliminarTodosPaiss" onclick="return false;">
    369                                                                         <i class=" icon-double-angle-left"></i>
    370                                                                 </button></td>
    371                                                         </tr>
    372                                                 </table> {{ formulariopais.lpaissSeleccionados }} </td>
    373                                         <td>
    374                                                 <label class="desc">{% trans "seleccionados" %}:</label>
    375                                                 <div style="overflow:auto; width:360px; height:150px; float: left; border: 1px">
    376                                                         <ul id="paissSeleccionados" class="connectedSortable">
    377                                                                 <li class='empty ui-widget-content ui-state-disabled'>
    378                                                                         {% trans "no_elementos" %}
    379                                                                 </li>
    380                                                         </ul>
    381                                                 </div>
    382                                         </td>
    383                                 </tr>
    384                         </table>
    385             </div>
    386             <div class="col_2"></div>
    387             <div class="col_10">
    388                 <br />
    389                         <br />
    390                         <button class="square small" id="btnSeleccionarPaises" onclick="pasarDatos()" disabled="disabled">
    391                                 <i class=" icon-ok"></i>&nbsp;{% trans "agregar_paises" %}</button>
    392                         <button class="square small" id="btnCancelar" onclick="Cancelar()">
    393                                 <i class=" icon-off"></i>&nbsp;{% trans "Cancelar" %}</button>
    394             </div>
     314    <div class="grid">
     315        <div class="col_2" style="font-weight: bold">
     316            {% trans 'pais' %}:
     317        </div>
     318        <div class="col_10">
     319            {{ formulariopais.buscarporp }}
     320        </div>
     321        <div class="col_2">
     322        </div>
     323        <div class="col_10">
     324            <button id="btnFiltrarPais" class="square small" onclick="submit()"><i class="icon-filter"></i>&nbsp;{% trans "filtrar_pais" %}</button>
     325        </div>
     326        <div class="col_12">
     327            <table cellpadding="0" cellspacing="0">
     328                <tr>
     329                    <td>
     330                        <label class="desc">{% trans "disponibles" %}:</label>
     331                        <div style="overflow:auto; width:360px; height:150px; float: left">
     332                            <ul id="paissDisponibles" class="connectedSortable"></ul>
     333                        </div>
     334                    </td>
     335                    <td style="padding: 4px; border: 0">
     336                        <table id="botonesFiltroPaiss">
     337                            <tr>
     338                                <td>
     339                                <button class="square small" id="insertarPaiss" onclick="return false;">
     340                                    <i class="icon-angle-right"></i>
     341                                </button></td>
     342                            </tr>
     343                            <tr>
     344                                <td>
     345                                <button class="square small" id="insertarTodosPaiss" onclick="return false;">
     346                                    <i class=" icon-double-angle-right"></i>
     347                                </button></td>
     348                            </tr>
     349                            <tr>
     350                                <td>
     351                                <button class="square small" id="eliminarPaiss" onclick="return false;">
     352                                    <i class="icon-angle-left"></i>
     353                                </button></td>
     354                            </tr>
     355                            <tr>
     356                                <td>
     357                                <button class="square small" id="eliminarTodosPaiss" onclick="return false;">
     358                                    <i class=" icon-double-angle-left"></i>
     359                                </button></td>
     360                            </tr>
     361                        </table> {{ formulariopais.lpaissSeleccionados }} </td>
     362                    <td>
     363                        <label class="desc">{% trans "seleccionados" %}:</label>
     364                        <div style="overflow:auto; width:360px; height:150px; float: left; border: 1px">
     365                            <ul id="paissSeleccionados" class="connectedSortable">
     366                                <li class='empty ui-widget-content ui-state-disabled'>
     367                                    {% trans "no_elementos" %}
     368                                </li>
     369                            </ul>
     370                        </div>
     371                    </td>
     372                </tr>
     373            </table>
     374        </div>
     375        <div class="col_2"></div>
     376        <div class="col_10">
     377            <br />
     378            <br />
     379            <button class="square small" id="btnSeleccionarPaises" onclick="pasarDatos()" disabled="disabled">
     380                <i class=" icon-ok"></i>&nbsp;{% trans "agregar_paises" %}</button>
     381            <button class="square small" id="btnCancelar" onclick="Cancelar()">
     382                <i class=" icon-off"></i>&nbsp;{% trans "Cancelar" %}</button>
     383        </div>
    395384    </div>
    396385</form>

  • templates/directorio/anexar.html

    r8c68be7 ra358037  
    88<script type="text/javascript" src="{{MEDIA_URL}}js/external/json2.min.js" ></script>
    99<script type="text/javascript">
    10 $(document).ready(function() {
     10    $(document).ready(function() {
    1111
    12     var MaxInputs       = 8; //Número Maximo de Campos
    13     var contenedor       = $("#contenedor"); //ID del contenedor
    14     var AddButton       = $("#agregarCampo"); //ID del Botón Agregar
    15     var opciones = '{{opciones|safe}}';
    16    
    17     //var x = número de campos existentes en el contenedor
    18     var x = $("#contenedor div").length + 1;
    19     var FieldCount = x-1; //para el seguimiento de los campos
     12        var MaxInputs       = 8; //Número Maximo de Campos
     13        var contenedor       = $("#contenedor"); //ID del contenedor
     14        var AddButton       = $("#agregarCampo"); //ID del Botón Agregar
     15        var opciones = '{{opciones|safe}}';
     16       
     17        //var x = número de campos existentes en el contenedor
     18        var x = $("#contenedor div").length + 1;
     19        var FieldCount = x-1; //para el seguimiento de los campos
    2020
    21     $(AddButton).click(function (e) {
    22         if(x <= MaxInputs) //max input box allowed
    23         {
    24             FieldCount++;
    25             //agregar campo
    26             var formulario ='<div>';
    27             formulario += '<select name="paises[]" id="id_paises_'+ FieldCount +'">';
    28             formulario += opciones;
    29             formulario += '</select>';
    30             formulario += '<input type="text" name="provincia[]" id="provincia_'+ FieldCount +'" placeholder="provincia" size="60"/><br />';
    31             formulario += '<input type="text" name="ciudad[]" id="ciudad_'+ FieldCount +'" placeholder="ciudad" size="60"/><br />';
    32             formulario += '<input type="text" name="calle[]" id="calle_'+ FieldCount +'" placeholder="calle" size="60"/><br />';
    33             formulario += '<input type="text" name="numero[]" id="numero_'+ FieldCount +'" placeholder="numero" size="60"/><br />';
    34             formulario += '<input type="text" name="prefijo_pais_tel[]" id="prefijo_pais_tel_'+ FieldCount +'" placeholder="prefijo pais" size="10"/><br />';
    35             formulario += '<input type="text" name="prefijo_area_tel[]" id="prefijo_area_tel_'+ FieldCount +'" placeholder="prefijo area" size="10"/><br />';
    36             formulario += '<input type="text" name="telefono[]" id="telefono_'+ FieldCount +'" placeholder="telefono" size="10"/>';
    37             formulario += '<a href="#" class="eliminar">&times;</a><hr /></div>';
    38             $(contenedor).append(formulario);
    39             x++; //text box increment
    40         }
    41         return false;
     21        $(AddButton).click(function (e) {
     22            if(x <= MaxInputs) //max input box allowed
     23            {
     24                FieldCount++;
     25                //agregar campo
     26                var formulario ='<div>';
     27                formulario += '<select name="paises[]" id="id_paises_'+ FieldCount +'">';
     28                formulario += opciones;
     29                formulario += '</select>';
     30                formulario += '<input type="text" name="provincia[]" id="provincia_'+ FieldCount +'" placeholder="provincia" size="60"/><br />';
     31                formulario += '<input type="text" name="ciudad[]" id="ciudad_'+ FieldCount +'" placeholder="ciudad" size="60"/><br />';
     32                formulario += '<input type="text" name="calle[]" id="calle_'+ FieldCount +'" placeholder="calle" size="60"/><br />';
     33                formulario += '<input type="text" name="numero[]" id="numero_'+ FieldCount +'" placeholder="numero" size="60"/><br />';
     34                formulario += '<input type="text" name="prefijo_pais_tel[]" id="prefijo_pais_tel_'+ FieldCount +'" placeholder="prefijo pais" size="10"/><br />';
     35                formulario += '<input type="text" name="prefijo_area_tel[]" id="prefijo_area_tel_'+ FieldCount +'" placeholder="prefijo area" size="10"/><br />';
     36                formulario += '<input type="text" name="telefono[]" id="telefono_'+ FieldCount +'" placeholder="telefono" size="10"/>';
     37                formulario += '<a href="#" class="eliminar">&times;</a><hr /></div>';
     38                $(contenedor).append(formulario);
     39                x++; //text box increment
     40            }
     41            return false;
     42        });
     43
     44        $("body").on("click",".eliminar", function(e){ //click en eliminar campo
     45            if( x > 1 ) {
     46                $(this).parent('div').remove(); //eliminar el campo
     47                x--;
     48            }
     49            return false;
     50        });
    4251    });
    43 
    44     $("body").on("click",".eliminar", function(e){ //click en eliminar campo
    45         if( x > 1 ) {
    46             $(this).parent('div').remove(); //eliminar el campo
    47             x--;
    48         }
    49         return false;
    50     });
    51 });
    5252</script>
    5353
Note: See TracChangeset for help on using the changeset viewer.