jQuery_Project/views/jqueryui.php

<?php

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
?>
<div class="col-md-10 col-md-offset-1">
        <h1>jQuery UI</h1>
        <p>
            JQuery UI es un asistente para usar interacciones de interfaz de usuario, 
            efectos, widgets y temas creados en la parte superior de la librería 
            de jQuery. Ya sea que estas creando aplicaciones web altamente interactivas 
            o simplemente necesitas agregar un selector de fechas a un formulario
            , jQuery UI es la opción perfecta.
        </p>
        <p>jQuery UI tiene numerosas funcionalidades que extienden lo visto anteriormente
            durante las secciones anteriores. Permite ampliar tu control sobre 
            aspectos de la web que pueden parecer a la vista inalcanzables de 
            otro modo
        </p>
        <p>Todos los widgets de jQuery UI usan los mismos patrones, así que si 
            aprendes a usar uno, entonces sabrás cómo usarlos todos.
        </p>
        <h3>Descarga</h3>
        <p>Primero descarga los archivos de jQuery UI de la <a href="http://jqueryui.com/download/">página oficial</a>.
            o pulsa sobre este 
            <a href="http://jqueryui.com/resources/download/jquery-ui-1.12.1.zip" download>link</a>.

        </p>
        <p>
            Y poner el archivo jquery-ui.min.js y la carpeta external en el lugar de los javascript.
            El archivo jquery-ui.min.css y la carpeta images en la carpeta del css.
        </p>
        <h3>Draggable, Resizable y Droppable</h3>
        <p>
            A continuación vamos a ver tres métodos que permiten manipular un elemento.
            De manera que podamos moverlo y redimensionarlo a nuestro antojo.
            El método Droppable sirve para saber si se ha movido algún elemento dentro
            de él.
        </p>
        
        <div id="manipulation2">
            <div id="dragAndResize"> </div>
            <div id="dragAndResize2"> </div>
            <div id="dropBy"><p>Déjalo aquí</p> </div>
        </div>
        <pre>
        <code>
$( function() {
    $( "#dragAndResize" ).draggable().resizable();
    
    $("#dragAndResize2").draggable({
        containment: "parent",
        cursor: "crosshair"
    });
    $( "#dropBy" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Colocado!" );
      }
    });
});
        </code>
        </pre>
        <br>
        <h3>Efectos de animación</h3>
        <p>jQuery UI pone a nuestra disposición además de métodos más interactivos.
            Una serie de efectos visuales que se pueden utilizar para un elemento
            seleccionado.
        </p>
        <div class="toggler">
            <div id="effect" class="ui-widget-content ui-corner-all">
              <h3 class="ui-widget-header ui-corner-all">Effect</h3>
              <p>
                Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
              </p>
            </div>
        </div>
        
        <select name="effects" id="effectTypes">
            <option value="blind">Blind</option>
            <option value="bounce">Bounce</option>
            <option value="clip">Clip</option>
            <option value="drop">Drop</option>
            <option value="explode">Explode</option>
            <option value="fade">Fade</option>
            <option value="fold">Fold</option>
            <option value="highlight">Highlight</option>
            <option value="puff">Puff</option>
            <option value="pulsate">Pulsate</option>
            <option value="scale">Scale</option>
            <option value="shake">Shake</option>
            <option value="size">Size</option>
            <option value="slide">Slide</option>
            <option value="transfer">Transfer</option>
        </select><br><br>

        <button id="button" class="ui-state-default ui-corner-all">Usar Efecto</button>
    </div>
 <script src="../jQueryProject/assets/js/jqueryui.js"></script>