Disponible en DatosLista y Directorio

Activa el buscador integrado en la lista de elementos

Valores disponibles 0=Desactivado 1=Actibvar buscador estándar 2=Buscador extendido

Valor por defecto sin definir

 

Ejemplo:

addsearch=1

 

Activar el buscador en la lista que se muestra.

 

El buscador permite la personalización a base de asignar clases y estilos a los elementos:

boxsrchNN - donde NN corresponde al número de caja donde está el buscador

listsearchNN - donde NN corresponde al número de caja donde está el buscador

Usando el traductor podremos reasignar la imagen "/imgctrl/buscar.jpg" que se muestra al final

 

Si usamos el modelo 2 de buscador nos incluirá un bloque de lista desordenada que podremos integrar en el buscador como un filtro adicional de zonas, tramos, temas, etc... Los elementos personalizables en este caso son:

ui_element - es un elemento único y no puede activarse más que en una lista

sb_down - bloque inicial para insertar el desplegable

listsearchNN - donde NN corresponde al número de caja donde está el buscador

.sb_dropdown - clase para el desplegable

.sb_filter - clase para el filtro

 

Agregar este script en la caja correspondiente o en la zona de la misma:

$(function() {

      /*** el elemento   */

      var $ui       = $('#ui_element');

      /*** Al foco y en click mostrar el dropdown,y cambiar la imagen flecha */

      $ui.find('.sb_input').bind('focus click',function(){

         $ui.find('.sb_down')

            .addClass('sb_up')

            .removeClass('sb_down')

            .andSelf()

            .find('.sb_dropdown')

            .show();

      });

      /*** Sobre raton saliendo oculto el dropdown, y cambia la imagen de indicador */

      $ui.bind('mouseleave',function(){

         $ui.find('.sb_up')

            .addClass('sb_down')

            .removeClass('sb_up')

            .andSelf()

            .find('.sb_dropdown')

            .hide();

      });   

      /*** seleccionando todos checkboxes  */

      $ui.find('.sb_dropdown').find('label[for="all"]').prev().bind('click',function(){

      $(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);

   });

});

 

Personalización de aspecto del modelo 2 de buscador:

.sb_wrapper{margin:0;padding:0;position: absolute;top:80px;left:40px;width:372px;}

.sb_wrapper input[type="text"],

ul.sb_dropdown{

   border:1px solid #fff;background: #fafafa; 

   background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#fafafa)); 

   background: -moz-linear-gradient(top, #f2f2f2, #fafafa);

   font-size:24px;font-family:"Myriad Pro", "Trebuchet MS", sans-serif;

   -moz-box-shadow:1px 1px 3px #555;-webkit-box-shadow:1px 1px 3px #555;-box-shadow:1px 1px 3px #555;

   outline:none;padding:6px 5px 6px 20px;text-shadow:1px 1px 1px #fff;width:295px;float:left;

   margin:3px 0px;}

ul.sb_dropdown{float:left;list-style:none;width:360px;padding:6px 5px;-moz-border-radius:0px 0px 10px 10px;

   -webkit-border-bottom-right-radius:10px;-webkit-border-bottom-left-radius:10px;border-bottom-right-radius:10px;

   border-bottom-left-radius:10px;}

ul.sb_dropdown li{font-size:16px;line-height:32px;height:32px;float:left;width:50%;}

ul.sb_dropdown li input[type="checkbox"]{float:left;margin:10px 4px 0 5px;}

ul.sb_dropdown li.sb_filter{width:348px;border:1px solid #f9f9f9;clear:both;background: #ddd;

   font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#444;height:16px;line-height:16px;

   padding:5px;-moz-box-shadow:0px 0px 2px #777;-webkit-box-shadow:0px 0px 3px #555 inset;-box-shadow:0px 0px 3px #555 inset;

}

span.sb_up,

span.sb_down{

   position:absolute;top:3px;left:0px;width:14px;height:41px;background-color:#f2f2f2;background-position:center center;

   background-repeat: no-repeat;z-index:10;border:1px solid #fff;-moz-box-shadow:1px 0px 1px #ddd;

   -webkit-box-shadow:1px 0px 1px #ddd;-box-shadow:1px 0px 1px #ddd;}

span.sb_up{background-image:url(../icons/up.png);}

span.sb_down{background-image:url(../icons/down.png);}

input.sb_search{background:#f2f2f2 url(../icons/search.png) no-repeat center center;height:43px;

   width:50px;float:left;border:none;margin:3px 0px;border:1px solid #fff;-moz-box-shadow:1px 1px 3px #555;

   -webkit-box-shadow:1px 1px 3px #555;-box-shadow:1px 1px 3px #555;outline:none;cursor:pointer;

}

input.sb_search:hover{background-color:#fff;}

 

Puede ver el ejemplo funcional en http://www.mastercafe.com/index.asp?bd=data&id=1539&zona=jquery&idm=es&web=po&eve=zz