Novedad [Tutorial] Caja de buscar 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 pongo en mi foro?
Primeramente sube estas 2 imágenes (![[Image: arrowright.png]](http://img412.imageshack.us/img412/9158/arrowright.png)
![[Image: arrowleft.png]](http://img594.imageshack.us/img594/8003/arrowleft.png)
) a la carpeta Images de tu foro.
Ahora ve a la plantilla index y cambia todo por esto:
Guardas y ya puedes ver la caja de search deslizante en tu index.
Es grandioso todo lo que puedes hacer con un simple botón.
![[Image: sidebar.png]](http://img804.imageshack.us/img804/8738/sidebar.png)
Creditos: euantor
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 (
) 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.
Creditos: euantor
Tenía entendido que esto daba algo de incompatibilidades con MyBB 1.6...
Emm Asta el momento ami me funciona perfecto con 1.6
Sep, a mi me dio problemas... así que no lo puse... ¿Quizas sera por algun otro codigo javascript?
Emm que raro.
pero si es así desconozco el problema pero ami me funciona perfecto
pero si es así desconozco el problema pero ami me funciona perfecto
Lo raro es que lo probe con el tema defaul de MyBB y aun así no agarro =S
Yo lo uso en el default de mybb 1.6 O.O
Causa conflicto con algo que viene de MyBB 1.6...
Está bueno pero creo que me deformará un poco el skin, xD