culabs/jquery-bundle

This package is abandoned and no longer maintained. No replacement package was suggested.

Easy integration of jquery into symfony2

dev-master 2012-10-15 02:58 UTC

MIT

• Alejandro Pérez Cuba

• form
• ajax

README

CULabsjQueryBundle
==================

AutocompleteDoctrineType
------------------------

Este widget permite utilizar el widget "autocomplete" de jQuery.
Para poner un ejemplo supongamos que tenemos una entidad con el nombre "AcmeDemoBundle:User" y tiene una relación de "uno a mucho" con una entidad "AcmeDemoBundle:Tienda". En la clase "TiendaType" adicionamos el siguiente campo al "builder"

    $builder->add('gestor', 'jquery_doctrine_autocomplete', array(
        'url'   => 'autocomplete_user',
        'class' => 'AcmeDemoBundle:User',
    ));

El campo "url" es el que contiene el nombre de la ruta a utilizar en el autocompletamiento.
El siguiente paso es crear la ruta "autocomplete_user". El bundle contiene una controladora genérica para el trabajo con cualquier entidad. Si lo crees necesario puedes utilizar una controladora própia o extender esta.


    autocomplete_user:
    pattern:  /autocomplete_user
    defaults:
      _controller: CULabsjQueryBundle:AutocompleteDoctrine:index
      class: CULabsMainBundle:User
      method_for_query: autocomplete

El campo "method_for_query" es utilizado para indicar que método de la clase repositorio será utilizado para hacer la consulta. En el siguiente fragmento de código se ve un ejemplo.

    class UserRepository extends EntityRepository
    {
        public function autocomplete(array $param)
        {
            $qb = $this->createQueryBuilder('user');
        
            return $qb->where($qb->expr()->like($qb->expr()->concat('user.name', $qb->expr()->concat('\' \'', 'user.lastname')), $qb->expr()->literal(sprintf('%%%s%%', $param['term']))))
                      ->setMaxResults($param['limit'])
                      ->getQuery()
                      ->execute()
            ;
        }
    }
 
AutocompleteType
----------------

Este Widget permite el autocompletamiento dado un conjunto de datos definidos. Para usarlo solo hay que adicionar el siguiente código en el método "buildForm" de un formulario.

    $builder->add('usuario', 'jquery_autocomplete', array(
        'choices' => array(
            'admin' => 'Administrador', 
            'user1' => 'Usuario1', 
            'user2' => 'Usuario2'
        )
    ));

DatepickerType
--------------

Permite la creación de datepicker

    $builder->add('fecha', 'jquery_datepicker')

DatetimepickerType
------------------

Permite la creación de datepicker, usando el plugin "http://trentrichardson.com/examples/timepicker/"

    $builder->add('fecha', 'jquery_datetimepicker')

jq_remote_form
--------------
Esta función de twig permite enviar a través de ajax un formulario, que puede también contener ficheros. Utiliza el plugin de jQuery "http://malsup.com/jquery/form/". El uso básico es el siguiente.

    <form id="formulario" action="#" method="post">
      {{ form_widget(form) }}
      <input type="submit" value="Enviar"/>
      <span id="indicador" style="display: none">Registrando...</span>
    </form>
    {{ jq_remote_form('formulario', {
        'update':   'zona_update', 
        'url':      path('la_ruta_a_utilizar'),
        'complete': "jQuery('#indicador').hide();",
        'loading':  "jQuery('#indicador').show();",
    }) }}
    <div id="zona_update"></div>

SliderType
----------
Incluido el Widget slider.

    $builder->add('numero', 'jquery_slider')

Tabs Widget
-----------
A través del uso de "etiquetas" de twig se puede crear un componente "Tab" de jQuery. Acontinuación tres ejeplos.

    {# Tabs simple con tres pestañas  #}
    {% jqtabs %}
        {% jqtabitem title 'One'|trans %}
            <p>{{ 'One'|trans }}</p>
        {% endjqtabitem %}
        {% jqtabitem title 'two'|trans %}
            <p>{{ 'Two'|trans }}</p>
        {% endjqtabitem %}
        {% jqtabitem title 'Three'|trans %}
            <p>{{ 'Three'|trans }}</p>
        {% endjqtabitem %}
    {% endjqtabs %}

    {# Ejemplo de paso de valores para la configuracion y manipulación del objeto con javascript #}
    {% jqtabs config { 'event': '"mouseover"' } js_name 'my_tab' %}
        {% for i in 1..5 %}
            {% jqtabitem title 'title ' ~ i %}
                <p>{{ i }}</p>
            {% endjqtabitem %}
        {% endfor %}
        {% jqtabitem title 'Last'|trans %}
            <p>{{ 'Last'|trans }}</p>
        {% endjqtabitem %}
    {% endjqtabs %}

    <script type="text/javascript">
        my_tab.bind("tabsadd", function (event, ui) {
            $( ui.panel ).append( "<p>body</p>" );
        });
        my_tab.tabs( "add", "#tabs-q", 'title' );
    </script>

    {# Ejemplo de Tabs anidados #}
    {% jqtabs %}
        {% jqtabitem title 'One'|trans %}
            <p>{{ 'One'|trans }}</p>
        {% endjqtabitem %}
        {% jqtabitem title 'two'|trans %}
            <p>{{ 'Two'|trans }}</p>
        {% endjqtabitem %}
        {% jqtabitem title 'Three'|trans %}
           {% jqtabs %}
               {% for i in 1..5 %}
                   {% jqtabitem title 'title ' ~ i %}
                      <p>{{ i }}</p>
                   {% endjqtabitem %}
               {% endfor %}
           {% endjqtabs %}
        {% endjqtabitem %}
    {% endjqtabs %}

Dialog Widget
-------------
A través del uso de "etiquetas" de twig se puede crear un componente "Dialog" de jQuery. Acontinuación tres ejeplos.

    {# Ejemplo simple #}
    {% jqdialog config {'title':'"Demo"'} %}
        <p>Text in the body</p>
    {% endjqdialog %}

    {# Paso de más parámetros de configuración y creación de un botón. #}
    <script type="text/javascript">
        function my_function()
        {
            $( this ).dialog( "close" );
        }
    </script>                
    {% jqdialog config {
        'title':'"Demo"', 
        'modal':'true', 
        'buttons':'{Ok:my_function}'
    } js_name 'my_dialog' %}
        <p>Text in the body</p>
    {% endjqdialog %}