Alumnos
/
alumnos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
							<?php
require_once 'classes/Template.php';
$titulo = 'Ejemplo';
?>
<!DOCTYPE html>
<html lang="es" prefix="og: http://ogp.me/ns#">
    <head>
	<title>Alumnos - <?php echo $titulo; ?></title>
        <?php Template::getCSS(array('elementos.css')); ?>
    </head>
    <body>
        <?php Template::header($titulo); ?>
        <main class="container-fluid content marco">
            <h4 class="text-dark">Botones</h4>
            <div class="d-flex flex-row justify-content-between align-items-center">
                <button class="btn btn-verde">btn-verde</button>
                <button class="btn btn-rojo">btn-rojo</button>
                <button class="btn btn-amarillo">btn-amarillo</button>
                <button class="btn btn-gris">btn-gris</button>
                <button class="btn btn-azul1">btn-azul1</button>
                <button class="btn btn-azul2">btn-azul2</button>
            </div>
            <hr class="mb-3">
            <h4 class="text-dark">Encabezados</h4>
            <div class="d-flex flex-row flex-wrap justify-content-between align-items-center">
                <h2>Encabezado-h2</h2>
                <h4>Encabezado-h4</h4>
                <h6>Encabezado-h6</h6>
            </div>
            <hr class="mb-3">
            <h4 class="text-dark">Modals y Avisos(estos pueden ser en modal o directo en página) </h4>
            <div class="d-flex flex-row flex-wrap justify-content-between align-items-center">
                <button type="button" class="btn btn-primary mx-1" data-toggle="modal" data-target="#modalConfirmar">Modal Confirmar|Forms</button>
                <button type="button" class="btn btn-primary mx-1" data-toggle="modal" data-target="#modalAviso">Modal Aviso</button>
                <div class="mx-1 msgAviso d-flex flex-row justify-content-between align-items-stretch">
                    <div class="iconAviso bg-warning d-flex justify-content-center align-items-center"><i class="display-3 ing-importante"></i></div>
                    <div class="txtAviso flex-grow-1 d-flex flex-column justify-content-center align-items-center">
                        <div class="display-5 indivisa-text-black mb-3">Título</div>
                        <div>Texto del Mensaje</div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modalAviso" tabindex="-1" aria-labelledby="modalAviso" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content msgAviso d-flex flex-row justify-content-between align-items-stretch">
                        <div class="modal-header iconAviso bg-warning d-flex justify-content-center align-items-center"><i class="display-3 ing-importante"></i></div>
                        <div class="modal-body txtAviso flex-grow-1 d-flex flex-column justify-content-center align-items-center">
                            <div class="display-5 indivisa-text-black mb-3">Título</div>
                            <div class="mb-3">Texto del Mensaje</div>
                            <div class="rounded-pill p-2 text-white bg-warning" data-dismiss="modal" aria-label="Close">Cerrar</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modalGral modal fade" id="modalConfirmar" tabindex="-1" data-backdrop="static" aria-labelledby="modalConfirmar" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        </div>
                        <div class="modal-body">...</div>
                        <div class="modal-footer">                            
                            <button type="button" class="btn btn-verde btnIcon"><span class="ing-aceptar"></span></button>
                            <button type="button" class="btn btn-rojo btnIcon" data-dismiss="modal"><span class="ing-cancelar"></span></button>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="mb-3">
            <h4 class="text-dark">Dropdownlist</h4>
            <div class="d-flex flex-row justify-content-between align-items-start">
                <div id="ddlNormal" class="position-relative dropdownlist mx-2">
                    <button id="btnNormal">
                        <label>Dropdownlist</label>
                        <span class="ing-caret"></span>
                    </button>
                    <ul>
                        <li data-id="1" class="dropdownlist-item">Opción 1</li>
                        <li data-id="2" class="dropdownlist-item">Opción 2</li>
                        <li data-id="3" class="dropdownlist-item">Opción 3</li>
                    </ul>
                </div>
                <div id="ddlAzul1" class="position-relative dropdownlist dropdownlist-azul1 mx-2">
                    <button id="btnAzul1">
                        <label>Dropdownlist</label>
                        <span class="ing-caret"></span>
                    </button>
                    <ul>
                        <li data-id="1" class="dropdownlist-item">Opción 1</li>
                        <li data-id="2" class="dropdownlist-item">Opción 2</li>
                        <li data-id="3" class="dropdownlist-item">Opción 3</li>
                    </ul>
                </div>
                <div id="ddlAzul2" class="position-relative dropdownlist dropdownlist-azul2 mx-2">
                    <button id="btnAzul2">
                        <label>Dropdownlist</label>
                        <span class="ing-caret"></span>
                    </button>
                    <ul>
                        <li data-id="1" class="dropdownlist-item">Opción 1</li>
                        <li data-id="2" class="dropdownlist-item">Opción 2</li>
                        <li data-id="3" class="dropdownlist-item">Opción 3</li>
                    </ul>
                </div>
            </div>
            <hr class="mb-3">
            <h4 class="text-dark">Datalist</h4>
            <div id="dlEjemplo" class="position-relative datalist">
                <input id="inputEjemplo" class="datalist-input" type="text" placeholder="Escribe aquí el dato que buscas" autocomplete="off">
                <span id="iconEjemplo" class="text-primary input-buscar"></span>
                <ul style="display:none">
                    <li data-id="1">Opción 1</li>
                    <li data-id="2">Opción 2</li>
                    <li data-id="3">Opción 3</li>
                    <li data-id="4">Opción 4</li>
                    <li data-id="5">Opción 5</li>
                </ul>
            </div>           
            <hr class="mb-3">
            <h4 class="text-dark">Mensajes</h4>
            <div class="msgBox d-flex flex-row justify-content-center align-items-center">
                <img src="img/triangulos.svg" class="imgBoxIzq" />
                <img src="img/triangulos.svg" class="imgBoxDer" />
                <hr class="hrArriba">
                <hr class="hrAbajo">
                <div class="display-5">Mensaje</div>
            </div>
            
        </main>
        <!--- FOOTER--->
        <div style="isolation: isolate;">
        <?php Template::footer(); ?>
        </div>
        <?php Template::getJS(array('elementos.js')); ?>
        <script>
        let dropdownlist_click = [false,false,false];
        let datalist_click = [false]; //Un lugar en el arreglo por cada DataList
        $(document).ready(function (){
            /***** DROPDOWNLIST *****/
            $('#btnNormal').click({elem: 'Normal'},clickDropdownList);
            $('#btnNormal').blur({elem: 'Normal', index: 0},blurDropdownList);
            $('#ddlNormal ul li').mousedown({index: 0},mousedownDropdownList);
            $('#ddlNormal ul li').mouseup({elem: 'Normal', index: 0},mouseupDropdownList);
            $('#ddlNormal ul li').click(itemDropdownList);
            $('#btnAzul1').click({elem: 'Azul1'},clickDropdownList);
            $('#btnAzul1').blur({elem: 'Azul1', index: 1},blurDropdownList);         
            $('#ddlAzul1 ul li').mousedown({index: 1},mousedownDropdownList);
            $('#ddlAzul1 ul li').mouseup({elem: 'Azul1', index: 1},mouseupDropdownList);
            $('#ddlAzul1 ul li').click(itemDropdownList);
            $('#btnAzul2').click({elem: 'Azul2'},clickDropdownList);
            $('#btnAzul2').blur({elem: 'Azul2', index: 2},blurDropdownList);
            $('#ddlAzul2 ul li').mousedown({index: 2},mousedownDropdownList);
            $('#ddlAzul2 ul li').mouseup({elem: 'Azul2', index: 2},mouseupDropdownList);
            $('#ddlAzul2 ul li').click(itemDropdownList);
            
        /***** DATALIST *****/            
            $('#dlEjemplo ul li').mousedown({index: 0},mousedownDataList);
            $('#dlEjemplo ul li').mouseup({elem: 'Ejemplo', index: 0},mouseupDataList);
            $('#inputEjemplo').click({elem: 'Ejemplo'},clickDataList);
            $('#inputEjemplo').blur({elem: 'Ejemplo', index: 0},blurDataList);
            $('#inputEjemplo').keyup({elem: 'Ejemplo'},inputKeyUp);
            $('#iconEjemplo').mousedown({index: 0},mousedownDataList);
            $('#iconEjemplo').mouseup({elem: 'Ejemplo', index: 0},mouseupDataList);
            $('#iconEjemplo').click({elem: 'Ejemplo'},limpiaInputDL);
        });
        </script>
    </body>
</html>