ایجاد ساید بار کنار سایت یا کلیک کردن

[صالح غلامیان]

درود

با تشکر از میدوی عزیز برای این که قابلیت باز و بسته شدن با کلیک را ایجاد کنید نیاز به کمی جاوا اسکریپت دارید

خوب من برای تکمیل کردنش نحوه ی کلی قرار دادنش رو براتون میگم البته هنوز خودم این کد را تست نکردم و نمیدونم آخرش چه شکلی میشه

به قالب مورد نظر و سپس قالب های گروه بندی نشده برید سپس به هدر اینکلود
کد زیر را آخر کد ها کپی کنید و ذخیره

کد:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

    <script type="text/javascript">
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //class of the element that will become your tab
            pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
            imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
            imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
            tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '200px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });

    });

    </script>

سپس به قالب هدر یا جایی که که میخواهید باکس اونجا رویت بشه برید و کد زیر را در جای مناسب قرار بدید ( تست کنید ببینید کجا بهتره)

کد:

<div class="slide-out-div">
            <a class="handle" href="http://link-for-non-js-users.html">Content</a>
            <h3>Contact me</h3>
            <p>Thanks for checking out my jQuery plugin, I hope you find this useful.
            </p>
            <p>This can be a form to submit feedback, or contact info</p>
        </div>

سپس بیرد به پوسته ها و پوسته ی مورد نظر و سپس global.css

حالا کد زیر را آخر کد ها کپی کنید

کد php:

.slide-out-div {
          padding: 20px;
          width: 250px;
          background: #ccc;
          border: 1px solid #29216d;
      } 


خوب حالا یک شات بزارید ببینیم چه شد

ضمنا با جست و جو در گوگل برای مثلا : باکس جی کوری باز باز شونده مطلب و کد های آماده پیدا خواهید کرد.

نکته خط اول در کد اول

کد:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

که گذاشتیم برای فراخوانی کتاب خانه جی کوئری هستش اگه این بانک قبلا در قالب شما برای قابلیتی دیگر فراخوانی شده نیازی نیست دوباره تکرار شود.
و خط های بعدی نیز برای دستوراتی هست که به کتابخانه داده میشه

منظور کد های زیر است

کد:

<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

    <script type="text/javascript">
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //class of the element that will become your tab
            pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
            imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
            imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
            tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '200px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });

    });

    </script>

موفق باشید