ijquery

اسکرول به صورت تب

sadsadsa

با استفاده از این پلاگین می توانید تبی داشته باشید که با پایین آوردن اسکرول ، تب ظاهر می شود (این تب کاملا ریسپانسیو است) .

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery.fluidContentScroller.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="../css/jquery.fluidContentScroller.css" />

2-  کد html جهت استفاده پلاگین

<div id="content">
    <div class="col right">
        <div id="scroll-content">
            <div class="post">
                <h4 data-cs-title="1">مطلب 1</h4>
                <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p>
            </div>

            <div class="post">
                <h4 data-cs-title="2">مطلب 2</h4>

                <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p>
            </div>

            <div class="post">
                <h4 data-cs-title="3">مطلب 3</h4>

                <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p>
            </div>

            <div class="post">
                <h4 data-cs-title="4">مطلب 4</h4>

                <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p>
            </div>

            <div class="post">
                <h4 data-cs-title="5">مطلب 5</h4>

                <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p>
            </div>

            <div class="post">
                <h4 data-cs-title="6">مطلب 6</h4>

                <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p>
            </div>

            <div class="post">
                <h4 data-cs-title="7">مطلب 7</h4>

                <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p>
            </div>

            <div class="post">
                <h4 data-cs-title="8">مطلب 8</h4>

                <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#scroll-content').find("> .post").fluidContentScroller({
            container: '#scroll-content',
            navItem: {
                title: '[data-cs-title]'
            }
        });
    });
</script>

پیش نمایش دانلود فایل پلاگین

3 دیدگاه دربارهٔ «اسکرول به صورت تب»

  1. سلام ، خسته نباشید ، خیلی مطالب فوق العاده ای دارید . موفق باشید .
    من خیلی دنبال یه افزونه یا اسکریپتی گشتم برای سایت ولی تو سایتهای ایرانی پیداش نکردم . اگر سایت ورزش 3 یا بعضی دیگه از سایت ها رو دیده باشین برای نمایش هفته های لیگ برتر یا برنامه بازیها از منو خاصی استفاده میکنند . اگر ممکنه برای ساختش یا پیدا کردن یه افزونه شبیه به اون راهنمایی بفرمایید .

    http://www.varzesh3.com/

    ممنون از لطف شما

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *