[Tutorial]Caja Search Sliding con jQuery

Gustavo R. 18 Sep, 2010, 9:45 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

[Imagen: http://i.imgur.com/l7Qimoa.png]

[Tutorial]Caja Search Sliding con jQuery

Gustavo R. 18 Sep, 2010, 9:45 pm

bender 11 Oct, 2012, 8:06 pm

Cluster 11 Oct, 2012, 8:16 pm

bender 11 Oct, 2012, 8:19 pm

Cluster 11 Oct, 2012, 8:32 pm

storm 17 Feb, 2014, 6:34 am