[Tutorial]Caja Search Sliding con jQuery
¿Que es eso? Es la caja que te encuentas por default en Vb4 en el index. Ahora esta para Mybb con tan solo editar una simple plantilla. ¿Como lo p...

¿Que es eso?
Es la caja que te encuentas por default en Vb4 en el index.
Ahora esta para Mybb con tan solo editar una simple plantilla.

¿Como lo pongo en mi foro?

Primeramente sube estas 2 imágenes ([Imagen: arrowright.png][Imagen: arrowleft.png]) a la carpeta Images de tu foro.

Ahora ve a la plantilla index y cambia todo por esto:
Código PHP:
<html>
<
head>
<
title>{$mybb->settings['bbname']}</title>
{
$headerinclude}
<
script type="text/javascript">
<!--
    
lang.no_new_posts "{$lang->no_new_posts}";
    
lang.click_mark_read "{$lang->click_mark_read}";
// -->
</script>
<
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<
style type="text/css">
.
buttons {
    
backgroundurl(images/arrowleft.pngno-repeat;
    
width16px;
    
height16px;
    
displayblock;
    
cursorpointer;
}

.
clickedbuttons {
    
backgroundurl(images/arrowright.pngno-repeat;
    
width16px;
    
height16px;
    
displayblock;
    
cursorpointer;
}
</
style>
</
head>
<
body>
{
$header}
<
div style="float: right;">
<
a id="button" class="buttons"></a>
</
div>
<
table>
<
tr>
<
td width="100%;" valign="top">
{
$forums}
</
td>
    <
script type="text/javascript">
jQuery.noConflict();
    
jQuery(function() {
        
//run the currently selected effect
        
function runEffect(){
            
//get effect type from 
            
var selectedEffect 'slide';
            
            
//most effect types need no options passed by default
            
var options = {};
            
//check if it's scale or size - they need options explicitly set
            
if(selectedEffect == 'scale'){  options = {percent0}; }
            else if(
selectedEffect == 'size'){ options = { to: {width200,height60} }; }
            
            
//run the effect
            
jQuery("#effect").toggle(selectedEffect,options,500);

        };
        
        
//set effect from select menu value
        
jQuery("#button").click(function() {
            
jQuery(this).toggleClass("clickedbuttons")
            
runEffect();
            return 
false;
        });

    });
    </
script>
<
td valign="top">
<
div id="effect" class="ui-widget-content ui-corner-all">
<
table border="0" cellspacing="{$theme['borderwidth']}cellpadding="{$theme['tablespace']}class="tborder" width="240">
<
tr>
<
td class="thead">
<
strong>Search</strong>
</
td>
</
tr>
<
tr>
<
td class="trow1">
<
form method="post" 
action="{$mybb->settings['bburl']}/search.php">

<
input type="hidden" name="action" value="do_search" />

<
input type="hidden" name="postthread" value="1" />

<
input type="hidden" name="forums" value="all" />

<
input type="hidden" name="showresults" value="threads" />

<
input type="text" class="textbox" name="keywords" value="" />

<!-- 
startgobutton -->

<
input type="submit" class="button" value="Go" />

<!-- 
endgobutton -->

</
form>
</
td>
</
tr>
</
table>
</
div>
</
td>
</
tr>
</
table>


{
$boardstats}

<
dl class="forum_legend smalltext">
    <
dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}title="{$lang->new_posts}style="vertical-align: middle; padding-bottom: 4px;" /></dt>
    <
dd>{$lang->new_posts}</dd>

    <
dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}title="{$lang->no_new_posts}style="vertical-align: middle; padding-bottom: 4px;" /></dt>
    <
dd>{$lang->no_new_posts}</dd>

    <
dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}title="{$lang->forum_locked}style="vertical-align: middle;" /></dt>
    <
dd>{$lang->forum_locked}</dd>
</
dl>
<
br style="clear: both" />
{
$footer}
</
body>
</
html

Guardas y ya puedes ver la caja de search deslizante en tu index.
(Ten cuidado si tienes plugins instalados que modifican esta plantilla)

Es grandioso todo lo que puedes hacer con un simple botón.Heart
[Imagen: sidebar.png]

Creditos:
euantor
Disculpen por revivir el tema...
Gracias Gustavo por compartir ya que se ve muy bueno!

unas consultas eso si...
este tuto aun sirve ?? esque es del 2010 y modifica toda la plantilla index...
han cambiado algunas funciones de la plantilla index en estos ultimos 2 años ?

y si no sirve... que habria que cambiar ???

y otra cosa mas... se pueden poner mas cajas cierto ???

nuevamente... Perdon por revivir un tema del 2010
te pone una sidebar en el index y saca una caja de busqueda, en teoria puedes meter mas cajas y hacer un sidebar mas extenso pero necesitas tu codigo propio
:)
entonces aun sirve ? y usando el tuto de las cajas que hize podria poner...(?) mas mm ok gracias! vere como queda
se supone que si, solo es cosa de ver el código y revisar donde va cada div
:)
Algún link donde ver cómo funciona??¿ Las imágenes faltan.


Saludos