تالار میدوری

نسخه کامل: پهنای قالب سایت خود را متحرک کنید
شما در حال مشاهده نسخه تکمیل نشده می باشید. مشاهده نسخه کامل با قالب بندی مناسب.
پهنای قالب سایت خود را متحرک کنید

در صورتی که خواهان تنوع هستید این راه کار بدردتان میخورد . پهنای سایت خود را با استفاده از جی کوئری متحرک کنید و به چهار اندازه تغییر دهید.
نخست کد زیر را ( من در ناوبری گذاشتم شما هرجا که خواستید بگذارید ) در ناوبری nav در آخر قرار دهید.
قالبها--->قالب مورد استفاده----> Navigation Templates
------>nav

کد PHP:
<span style="float:left;"><img id="default-width" src="{$theme['imgdir']}/dwidth.png" title="Default"/> 
<img id="large-width" src="{$theme['imgdir']}/lwidth.png"  title="Large"/> 
<img id="medium-width" src="{$theme['imgdir']}/mwidth.png"  title="Medium"/> 
<img id="small-width" src="{$theme['imgdir']}/swidth.png"  title="Small"/></span>
</div>
<script src='{$mybb->settings['bburl']}/jscripts/jquery.min.js'></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/cookie.js"/></script>
<script type="text/javascript">
var jwidth = jQuery.noConflict();
jwidth(document).ready(function($) {
original = jwidth('#container').css('width'),
jwidth('#default-width').click(function() {
    jwidth('#container').animate({ width: [original, 'swing'] },{duration: 600});
    jwidth.cookie('mybbextras_width', 'default');
});
jwidth('#large-width').click(function() {
    jwidth('#container').animate({ width: ['95%', 'swing'] },{duration: 600});
    jwidth.cookie('mybbextras_width', '95');
});
jwidth('#medium-width').click(function() {
    jwidth('#container').animate({ width: ['65%', 'swing'] },{duration: 600});
    jwidth.cookie('mybbextras_width', '65');
});
jwidth('#small-width').click(function() {
    jwidth('#container').animate({ width: ['55%', 'swing'] },{duration: 600});
    jwidth.cookie('mybbextras_width', '55');
});
<!--Cookies midori-->
if ( jwidth.cookie('mybbextras_width') == 'default' ) {
    jwidth('#container').css('width', original);
}
if ( jwidth.cookie('mybbextras_width') == '95' ) {
    jwidth('#container').css('width', '95%');
}
if ( jwidth.cookie('mybbextras_width') == '65' ) {
    jwidth('#container').css('width', '65%');
}
if ( jwidth.cookie('mybbextras_width') == '55' ) {
    jwidth('#container').css('width', '55%');
}
jwidth('#default-width').css('cursor', 'pointer');
jwidth('#medium-width').css('cursor', 'pointer');
jwidth('#small-width').css('cursor', 'pointer');
jwidth('#large-width').css('cursor', 'pointer');
});
</script>

سپس فایل های cookie.js , jquery.min.js زیر را در پوشه jscripts آپلود کنید . ( در صورتی که موجود دارید این مرحله را انجام ندهید و یا برای اجرای بهتر در جای دیگری قرار دهید و آدرس بالا را هم به جای جدید تغییر دهید)
ودر آخر تصویر ها را در پوشه images آپلود کرده و نتیجه کار را ببینید . امید که مفید باشد و به کار بیاید.

[attachment=1205]
=================
دریافت کد بالا در یک فایل متنی
لینک مرجع