source: participacion_consulta/participacion/templates/participacion.create.html @ f29adf8

Last change on this file since f29adf8 was f29adf8, checked in by rudmanmrrod <rudman22@…>, 7 años ago

Añadido Swipper para el slider en la participación, validaciones por js, agregada licencia GPL V3

  • Propiedad mode establecida a 100644
File size: 1.9 KB
Línea 
1{% extends 'base.template.html' %}
2{% load staticfiles %}
3{% block title %}Participar en Consulta{% endblock %}
4{% block content %}
5    <form action="" role="form" method="post" autocomplete="off" id="encuesta_form">
6        {% csrf_token %}
7        <div class="swiper-container">
8            <div class="swiper-wrapper">
9               
10                {% for key, value in preguntas.items  %}
11                    <div class="swiper-slide">
12                        {{ value.label | safe }}
13                        <div class="input-field">
14                            {{ value.field | safe }}
15                        </div>
16                    </div>
17                {% endfor %}
18                <div class="swiper-slide">
19                    <button type="submit">Enviar</button>
20                </div>
21               
22            </div>
23            <div class="swiper-pagination"></div>
24            <div class="swiper-button-next"></div>
25            <div class="swiper-button-prev"></div>
26        </div>
27        <a type="button" class="btn" href="{% url 'participacion_index' %}">Regresar</a>
28    </form>
29                 
30{% endblock %}
31
32{% block extraJs %}
33<script>
34    $(document).ready(function(){
35        var swiper = $('.swiper-container').swiper({
36            pagination: '.swiper-pagination',
37            effect: 'slide',
38            centeredSlides: true,
39            paginationType: 'progress',
40            nextButton: '.swiper-button-next',
41            prevButton: '.swiper-button-prev',
42            speed: 800,
43            spaceBetween: 80,
44            allowSwipeToNext:false
45        });
46        swiper.nextButton.click(function(){
47            swiper.unlockSwipeToNext();
48            var progreso = control_progress();
49            if (progreso) {
50                swiper.slideNext();
51            }
52            swiper.lockSwipeToNext();           
53        });
54    });
55</script>
56{% endblock %}
Nota: Vea TracBrowser para ayuda de uso del navegador del repositorio.