تالار میدوری

نسخه کامل: درست کردن فهرست کناری با JQuery
شما در حال مشاهده نسخه تکمیل نشده می باشید. مشاهده نسخه کامل با قالب بندی مناسب.
درست کردن فهرست کناری با JQuery
آموزش درست کردن فهرست کناری در صفحه اصلی انجمن . منوی جالبی است که بدون ریفرش کردن صفحه باز و بسته می شود . با استفاده از جی کوئری است و نیاز به پلاگین ندارد.
نخست به قالب مورد استفاده و Index Templates----> Index بروید . ( ابتدا بک آپ بگیرید که در موقع پشیمانی قابل برگشت دادن به وضعیت اول باشید ) .
سپس محتویات داخل ایندکس را پاک کنید و کد های زیر را جایگزین کنید .

کد 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>
<style type="text/css">
.buttons {
    background: url(images/arrowright.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}
.clickedbuttons {
    background: url(images/arrowleft.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}
</style>
</head>
<body>
{$header}
<a class ="buttons" style="float: right;"></a>
<a class ="clickedbuttons" style="float: right;"></a>
<br class ="clear" />
<div class ="sidebar" style="float: right;width: 19%;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class ="tborder">
<tr>
<td class ="thead"><strong>
Latest News
</strong></td>
</tr>
<tr>
<td class ="trow1">
You can put some news stuff here
</td>
</tr>
</table>
</div>
<div class ="forums" style="float: left;width: 80%;">
{$forums}
</div>
<br class ="clear" />
{$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>

یک مقدار خلاقیت هم به خرج بدهید بد نیست ( در مورد بالا )
سپس به Ungrouped Templates -----> headerinclude بروید.
کد زیر را پیدا کنید

کد PHP:
{$stylesheets}

بالای کد ذکر شده کدهای زیر را وارد کنید

کد PHP:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.cookie.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/sidebar.js"></script>

کار تمام است .
احتیاج به دو تصویر و چهار فایل دارید که در زیر پیوست میکنم . دو تصویر را در پوشه images و چهار فایل جاوا را در jscripts قرار دهید .

[تصویر: house_link.png] منبع : http://community.mybb.com/thread-73062.html
[attachment=1862]
لینک مرجع