tejariapp-new-logotejariapp-new-logotejariapp-new-logotejariapp-new-logo
  • صفحه اصلی
  • پروژه ها
    • پروژه طراحی سایت
    • پروژه های اندروید
    • پروژه های تحت ویندوز
    • UI & UX
    • ربات تلگرام
  • سفارش پروژه
    • انجام پروژه اندروید (Android)
    • طراحی و ساخت اپلیکیشن موبایل
    • انجام پروژه طراحی سایت با php
    • انجام پروژه طراحی سایت با Asp.net
    • انجام پروژه سی شارپ
    • فرم سفارش پروژه
  • مدرسه ی تجاری اپ
    • طراحی سایت
    • اندروید
    • سی شارپ
    • آموزش پایگاه داده
    • برنامه های کاربردی
  • لینک های مفید
    • پرداخت آنلاین
    • درباره تجاری اپ
    • تماس با ما
استخدام برنامه نویس متلب
سفارش پروژه
✕
            هیچ نتیجه ای یافت نشدمشاهده همه نتایج

            ساخت باکس وب با منوی تب دار با bootstrap

            • صفحه نخست
            • مدرسه ی تجاری اپ آموزش طراحی سایت
            • ساخت باکس وب با منوی تب دار با bootstrap
            سورس کد فرم login با Asp.net MVC
            سورس کد فرم ورود به سایت با Asp.net MVC
            2 اسفند 1395
            semantic Tags در html 5
            تگ های معنایی یا semantic Tags در HTML5
            10 اسفند 1395
            منتشر شده توسط خانم منطق
            ساخت باکس وب با منوی تب دار با bootstrap

            ساخت باکس وب با منوی تب دار با bootstrap

            ساخت باکس وب با منوی تب دار با bootstrap ، در این آموزش قصد داریم طراحی باکس وب با منوی تب دار (tab) با bootstrap و جاوا اسکریپت را به شما آموزش دهیم.

            ساخت باکس وب با منوی تب دار با bootstrap :

            تب

            تب ها یا زبانه ها برای جدا کردن مطالب در پنل های مختلف استغاده می شود که در هر زمان فقط یک تب یا زبانه قابل مشاهده می باشد.

            بوت استرپ (bootstrap)

            مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع Javascript برای تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و دیگر عناصر مورد نیاز طراحی وب می باشد.

            برای ایجاد زبانه ها (tabs) میتوان از Bootstrap ، Jquery و CSS استفاده کرد که در این آموزش ما مثالی برای طراحی با بوت استرپ را برای شما خواهیم آورده ایم.

            اگر پروژه شما خود به طور پیشفرض بوت استرپ را درون خود نداشت تنها کافی است این فریم ورک را از سایت بوت استرپ دانلود کنید و فولدر های درونش (CSS, JS, Img) را به محل ذخیره سازی پروژه کپی کنید سپس درون ویژوال استودیو قسمت solution برنامه گزینه show All files را انتخاب کرده

            ساخت باکس وب با منوی تب دار با bootstrap
            ساخت باکس وب با منوی تب دار با bootstrap

            سپس خواهید دید که فولدر هایی با رنگ سفید به سلوشن اضافه شدند

            ساخت باکس وب با منوی تب دار با bootstrap
            ساخت باکس وب با منوی تب دار با bootstrap

            حال کافی است برروی فولدر های بوت استرپی که اضافه کردید به پروژه کلیک راست کرده و گزینه Include in Project را کلیک کنید تا به سلوشن اضافه شوند.

            حال یک فایل HTML ایجاد میکنیم برای کدنویسی Tabها .برای استفاده از بوت استرپ باید درون فایل HTML باید در تگ head لینک های مربوطه را قرار دهیم.

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            

            در ادامه در تگ head یک کلاس نیز برای محتویات هر تب نیز در نظر میگیریم

            <style>
                    .tabContent {
                        display: none;
                    }
                </style>
            

            این استایل کمک میکند که هنگام لود شدن صفحه هیچکدام از محتویات نمایش داده نشوند.
            در نهایت کدهای درون تگ head به صورت زیر خواهد شد

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <title>Bootstrap Case</title>
                <meta charset="utf-8">
            
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            
                <style>
                    .tabContent {
                        display: none;
                    }
                </style>
            </head>
            

            حال کدنویسی های درون تگ body را شروع میکنیم که شامل عنوان زبانه ها و محتویاتشان که با کلیک برروی هرکدام نمایش داده خواهند شد

            <div class="container">
                    <h3>زبانه ها با بوت استرپ و جاوا اسکریپت</h3>
                    <ul class="nav nav-tabs">
                        <li class="tabTitle active" onclick="Tabs(event, 'HTML')">
                            <a href="javascript:void(0)">HTML</a>
                        </li>
                        <li class=" tabTitle " onclick="Tabs(event, 'JavaScript')">
                            <a href="javascript:void(0)">JavaScript</a>
                        </li>
                        <li class=" tabTitle " onclick="Tabs(event, 'CSS')">
                            <a href="javascript:void(0)">CSS</a>
                        </li>
                        <li class=" tabTitle " onclick="Tabs(event, 'PHP')">
                            <a href="javascript:void(0)">PHP</a>
                        </li>
                        <li class=" tabTitle " onclick="Tabs(event, 'Asp.net')">
                            <a href="javascript:void(0)">Asp.net</a>
                        </li>
                    </ul>
            

            تمامی عنوان ها و وتنظیمات مربوط به زبانه هارا درون یک لیست <ul> قرار میدهیم توجه کنید که لیست دارای کلاس nav nav-tabs میباشد که این کلاس ها, کلاس های بوت استرپ میباشد پس خود زبانه هارا طراحی میکند.

            توجه کنید که برای هرکدام از عناصر لیست کلاس tabTitle در نظر گرفته شده (این کلاس در استایل تعریف نشده و درواقع اصلا ایجاد نشده بلکه برای اشاره به زبانه ها از طریق دستورات جاوا اسکریپت میباشد)در ادامه در رویداد onCLick  آیتم های لیست اشاره به متد Tabs با دو پارامتر event و مقادیری که اشاره به محتویات میکنند, اشاره میکنند. نکته دیگر مقدار دهی href تگ هایa  درون لیست است که با javascript:void(0) مقدار دهی شده.

            این مقدار درواقع به نقطه ای اشاره نمیکند مانند علامت #  اما با مقدار دهی href با این علامت , در آدرس بار این علامت را نشان داده میشود اما با javascript:void(0) در آدرس بار هیچ مقداری به آدرس کنونی اضافه نمیشود.

            در ادامه مقادیری که میخواهیم با کلیک برروی زبانه ها نمایش داده شود را تعریف میکنیم

            <div id="HTML" class="tabContent" style="display:block">
                        <ul>
                            <li>HTML stands for Hyper Text Markup Language</li>
                            <li>HTML describes the structure of Web pages using markup</li>
                            <li>HTML elements are the building blocks of HTML pages</li>
                            <li>HTML elements are represented by tags</li>
                            <li>HTML tags label pieces of content such as "heading".../li>
                            <li>Browsers do not display the HTML tags, but use ...</li>
                        </ul>
                    </div>
                    <div id="JavaScript" class=" tabContent">
                        <ul>
                            <li>Javascript is a dynamic computer programming language.</li>
                            <li>It is lightweight and most commonly used as a part of web pages...</li>
                            <li>whose implementations allow client-side script to ...</li>
                            <li>It is an interpreted programming language with ...</li>
                        </ul>
                    </div>
                    <div id="CSS" class=" tabContent">
                        <p>
                            <ul>
                             <li> CSS stands for Cascading Style Sheets</li>
                                <li> CSS describes how HTML elements are to be displayed on ...</li>
                                <li> CSS saves a lot of work. It can control the layout of ...</li>
                                <li>External stylesheets are stored in CSS files</li>
                            </ul>
                        </p>
                    </div>
                    <div id="PHP" class=" tabContent">
                        <ul>
                            <li> PHP is an acronym for "PHP: Hypertext Preprocessor"</li>
                            <li> PHP is a widely-used, open source scripting language</li>
                            <li>PHP scripts are executed on the server</li>
                            <li> PHP is free to download and use</li>
                        </ul>
                    </div>
                    <div id="Asp.net" class=" tabContent">
                        <ul>
                            <li>  ASP.NET was released in 2002 as a successor to Classic ASP.</li>
                            <li>  ASP.NET pages have the extension .aspx and are normally ...</li>
                            <li>  ASP.NET 4.6 is the latest official version of ASP.NET.</li>
                            <li> ASP.NET 5 was expected to be an important redesign of ASP.NET.</li>
                            <li> However, the development of ASP.NET 5 was stopped in favor of ASP.NET Core</li>
                        </ul>
                    </div>
                </div>
            

            در تعریف این مقادیر توجه کنید که ای دی مربوط به تگ های حاوی اطلاعات ، دقیقا برابر با مقادیر ارسالی به متد جاوا اسکریپت باشند.

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

            <script>
            
                    function Tabs(evt, title) {
            
                        var tabcontent = document.getElementsByClassName("tabContent");
            
                        //for hide last content that clicked
            
                        for (var i = 0; i < tabcontent.length; i++) {
            
                            tabcontent[i].style.display = "none";
            
                        }
            
                        var tabtitile = document.getElementsByClassName("tabTitle");
            
                          //for inactive all tabs
            
                        for (var i = 0; i < tabtitile.length; i++) {
            
                           tabtitile[i].className= tabtitile[i].className.replace("active", "");
            
                        }
            
                          //show tabContetnt that has id equals title parameter
            
                        document.getElementById(title).style.display = "block"
            
                          //active clicked tab
            
                        evt.currentTarget.className += "active";
            
                    }
            
            </script>
            
            

            دستورات جاوا اسکریپت زمانی که برروی یکی از زبانه ها کلیک شود اجرا میشوند که به ترتیب  با دو حلقه for  تمامی tabContent هارا مخفی میکند سپس تمامی زبانه هارا نیز  غیر فعال میکند سپس content مربوط به زبانه کلیک شده را به صورت block نمایش میدهد همچنین کلاس active را به زبانه کلیک شده اضافه میکند.

            در نهایت پروژه را اجرا کنید و نتیجه ای مشابه زیر ببینید

            tab3
            ساخت باکس وب با منوی تب دار با bootstrap
            اشتراک گذاری

            پست های مرتبط

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            30 بهمن 1400

            دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            30 بهمن 1400

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            توابع در زبان برنامه نویسی دارت (Dart)

            توابع در زبان برنامه نویسی دارت (Dart)

            27 بهمن 1400

            توابع در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب

            دیدگاهتان را بنویسید لغو پاسخ

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

            ساخت اپلیکیشن های موبایل

            • ساخت اپلیکیشن فروشگاهی
            • ساخت اپلیکشن ابزاری و خدماتی
            • ساخت اپلیکیشن آموزشی
            • و هزاران موضوع دیگر

             
            کلیک کنید

            آخرین دیدگاه ها

            • 7 خرداد 1401

              داودی نظر در آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6

            • 6 فروردین 1401

              yasaman نظر در راست چین کردن متن در فیگما Figma

            • 3 فروردین 1401

              رضا نظر در مفاهیم Observable و Observer در RxJava

            تجاری اپ در شبکه های اجتماعی

            لوگوی تایید پرداخت آنلاین

            2015-2022 © تمامي حقوق مادي و معنوي اين وب سايت نزد تجاری اپ محفوظ بوده و هر گونه کپي برداري از مطالب پيگرد قانوني به همراه دارد! | طراح سایت : ProgRun
            سفارش پروژه
                      هیچ نتیجه ای یافت نشدمشاهده همه نتایج