[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]

) a la carpeta Images de tu foro.

Ahora ve a la plantilla index y cambia todo por esto:

Código PHP:
<?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 {

    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

Creditos: euantor

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

Novedad [Tutorial] Caja de buscar Sliding con jQuery

Bour Elvan 25 Oct, 2010, 8:56 pm

andy 26 Oct, 2010, 5:34 am

Bour Elvan 26 Oct, 2010, 11:27 am

nocktis21 26 Oct, 2010, 4:22 pm

Bour Elvan 26 Oct, 2010, 4:35 pm

nocktis21 26 Oct, 2010, 7:46 pm

Bour Elvan 26 Oct, 2010, 8:11 pm

andy 30 Oct, 2010, 7:52 am

Arturo 30 Oct, 2010, 6:36 pm

nentab 31 Oct, 2010, 4:16 am