[Tutorial] Caja de buscar Sliding con jQuery

Bour Elvan 25 Oct, 2010, 8:56 pm

¿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:

<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 {
    background: url(images/arrowleft.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}

.clickedbuttons {
    background: url(images/arrowright.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}
</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 = {percent: 0}; }
            else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
            
            //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="" />

<!-- start: gobutton -->

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

<!-- end: gobutton -->

</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

Última modificación: 26 Oct, 2010, 1:48 am por Cluster.

andy 26 Oct, 2010, 5:34 am

Tenía entendido que esto daba algo de incompatibilidades con MyBB 1.6...

Bour Elvan 26 Oct, 2010, 11:27 am

Emm Asta el momento ami me funciona perfecto con 1.6

nocktis21 26 Oct, 2010, 4:22 pm

Sep, a mi me dio problemas... así que no lo puse... ¿Quizas sera por algun otro codigo javascript?

Bour Elvan 26 Oct, 2010, 4:35 pm

Emm que raro.
pero si es así desconozco el problema pero ami me funciona perfecto

nocktis21 26 Oct, 2010, 7:46 pm

Lo raro es que lo probe con el tema defaul de MyBB y aun así no agarro =S

Bour Elvan 26 Oct, 2010, 8:11 pm

Yo lo uso en el default de mybb 1.6 O.O

andy 30 Oct, 2010, 7:52 am

Causa conflicto con algo que viene de MyBB 1.6...

Arturo 30 Oct, 2010, 6:36 pm

Está bueno pero creo que me deformará un poco el skin, xD

nentab 31 Oct, 2010, 4:16 am

#10

(30 Oct, 2010, 6:36 pm)Arturo escribió: Está bueno pero creo que me deformará un poco el skin, xD

Claro, para usar este plugin hay que ver cuanto ancho tiene el theme donde se vaya a usar.

Novedad [Tutorial] Caja de buscar Sliding con jQuery