Toast ها و Scrollspy در بوت استرپ

          برنامه نویس 
            بازدید : 54
          دوشنبه 24 تیر 1398
           نظرات (0)
        

toast در بوت استرپ چیست؟

در بوت استرپ کامپوننتی به نام toast وجود دارد که در واقع یک alert box (پیام های هشدار) است و زمانی که کاربر کاری را انجام دهد تنها برای چند ثانیه نمایش داده می شود (مثلا روی دکمه ای کلیک شود، فرمی ثبت شود و …).

ایجاد این toast ها کار بسیار آسانی است؛ تنها کافی است که کلاس toast. را بسازید (با عنصر دلخواه، مثلا <div>) و به آن کلاس های toast-header. و toast-body. را اضافه کنید:

 



1
2
3
4
5
6
7
8

<div class="toast">
  <div class="toast-header">
    Toast Header
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

البته Toast ها به صورت خودکار فعال نمی شوند و باید با jQuery آن ها را فعال کنید؛ یعنی عنصر مورد نظر را انتخاب کرده و آن را با متد ()toast فعال نمایید. در مثال زیر تمامی toast ها را با جی کوئری فعال کرده ایم:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h3>Toast Example</h3>
  <p>Atoast islike an alert box that isonly shown foracouple of seconds when something happens(i.e.whenauser clicks onabutton,submitsaform,etc.).</p>
  <p>Inthisexample,we useabutton toshow the toast message.</p>
 
  <button type="button"class="btn btn-primary"id="myBtn">Show Toast</button>
 
  <div class="toast">
    <div class="toast-header">
      Toast Header
    </div>
    <div class="toast-body">
      Sometextinsidethetoastbody
    </div>
  </div>
</div>
 
<script>
$(document).ready(function(){
  $("#myBtn").click(function(){
    $('.toast').toast('show');
  });
});
</script>
 
</body>
</html>

مشاهده ی خروجی در JSBin

نمایش دائمی Toast

همانطور که گفتیم Toast ها در حالت عادی پنهان هستند و در اثر اتفاقی که در صفحه صورت می گیرد، ظاهر می شوند اما شما می توانید با اضافه کردن "data-autohide="false آن ها را به صورت پیش فرض نمایش دهید. برای حذف آن هم دکمه ای (<button>) بسازید و "data-dismiss="toast را به آن اضافه کنید. ما این کار را در مثال زیر انجام داده ایم:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h3>Toast Example</h3>
  <p>Inthisexample,we usedata-autohide="false"toshow the toast by default.You can close it by clicking on the close(x)icon inside the toast header.</p>
 
  <div class="toast"data-autohide="false">
    <div class="toast-header">
      <strong class="mr-auto text-primary">Toast Header</strong>
      <small class="text-muted">5mins ago</small>
      <button type="button"class="ml-2 mb-1 close"data-dismiss="toast">&times;</button>
    </div>
    <div class="toast-body">
      Sometextinsidethetoastbody
    </div>
  </div>
</div>
 
<script>
$(document).ready(function(){
  $('.toast').toast('show');
});
</script>
 
</body>
</html>

مشاهده ی خروجی در JSBin

اگر به مثال بالا دقت کرده باشید متوجه وجود کلاس های mr-auto و ml-2 و mb-1 می شوید. از این کلاس ها برای اضافه کردن margin استفاده می شود و در قسمت های آینده در مورد آن ها صحبت خواهیم کرد.

Scrollspy در بوت استرپ چیست؟

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  body {
      position:relative;
  }
  </style>
</head>
<body data-spy="scroll"data-target=".navbar"data-offset="50">
 
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  
  <ul class="navbar-nav">
    <li class="nav-item">
      <aclass="nav-link"href="#section1">Section1</a>
    </li>
    <li class="nav-item">
      <aclass="nav-link"href="#section2">Section2</a>
    </li>
    <li class="nav-item">
      <aclass="nav-link"href="#section3">Section3</a>
    </li>
    <li class="nav-item dropdown">
      <aclass="nav-link dropdown-toggle"href="#"id="navbardrop"data-toggle="dropdown">
        Section4
      </a>
      <div class="dropdown-menu">
        <aclass="dropdown-item"href="#section41">Link1</a>
        <aclass="dropdown-item"href="#section42">Link2</a>
      </div>
    </li>
  </ul>
</nav>
 
<div id="section1"class="container-fluid bg-success"style="padding-top:70px;padding-bottom:70px">
  <h1>Section1</h1>
  <p>Trytoscroll thissection andlook at the navigation bar whilescrolling!Trytoscroll thissection andlook at the navigation bar whilescrolling!</p>
  <p>Trytoscroll thissection andlook at the navigation bar whilescrolling!Trytoscroll thissection andlook at the navigation bar whilescrolling!</p>
</div>
<div id="section2"class="container-fluid bg-warning"style="padding-top:70px;padding-bottom:70px">
  <h1>Section2</h1>
  <p>Trytoscroll thissection andlook at the navigation bar whilescrolling!Trytoscroll thissection andlook at the navigation bar whilescrolling!</p>
  <p>Trytoscroll thissection andlook at the navigation bar whilescrolling!Trytoscroll thissection andlook at the navigation bar whilescrolling!</p>
</div>
<div id="section3"class="container-fluid bg-secondary"style="padding-top:70px;padding-bottom:70px">
  <h1>Section3</h1>
  <p>Trytoscroll thissection andlook at the navigation bar whilescrolling!Trytoscroll thissection andlook at the navigation bar whilescrolling!</p>
  <p>Trytoscroll thissection andlook at the navigation bar whilescrolling!Trytoscroll thissection andlook at the navigation bar whilescrolling!</p>
</div>
<div id="section41"class="container-fluid bg-danger"style="padding-top:70px;padding-bottom:70px">
  <h1>Section4Submenu1</h1>
  <p>Trytoscroll thissection andlook at the navigation bar whilescrolling!Trytoscroll thissection andlook at the navigation bar whilescrolling!</p>
  <p>Trytoscroll thissection andlook at the navigation bar whilescrolling!Trytoscroll thissection andlook at the navigation bar whilescrolling!</p>
</div>
<div id="section42"class="container-fluid bg-info"style="padding-top:70px;padding-bottom:70px">
  <h1>Section4Submenu2</h1>
  <p>Trytoscroll thissection andlook at the navigation bar whilescrolling!Trytoscroll thissection andlook at the navigation bar whilescrolling!</p>
  <p>Trytoscroll thissection andlook at the navigation bar whilescrolling!Trytoscroll thissection andlook at the navigation bar whilescrolling!</p>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

توضیحات:

ابتدا “data-spy=”scroll را به عنصری اضافه کنید که عمل اسکرول در فضای آن اتفاق می افتد (در اکثر اوقات عنصر<body> می باشد).
سپس data-target را اضافه کنید و به آن مقدار id یا کلاسِ نوار آدرس (navigation bar) سایت را بدهید (در مثال بالا navbar.). با این کار navigation bar را به قسمت اسکرول شونده متصل می کنیم.
توجه داشته باشید که عناصر اسکرول شونده باید دارای id لینک ها در navigation bar باشند (در مثال بالا <"div id="section1> و <"a href="#section1> یکی هستند).
مقدار data-offset (این خصوصیت دلخواه است و می تواند حذف شود) تعداد پیکسل های offset شده از بالا هنگام اسکرول را مشخص می کند. این مسئله یعنی چه؟ یعنی اگر حس می کنید که لینک های navigation bar زودتر از اسکرول تغییر می کنند یا بنا بر سلیقه ی خود دوست دارید دیرتر تغییر کنند می توانید به data-offsetمقدار بیشتری بدهید. مقدار پیش فرض 10 پیکسل است.

نکته مهم: عنصری که “data-spy=”scroll را دارد باید خصوصیت position و مقدار relative را بگیرد تا درست کار کند.

البته این ویژگی با هر نوع Nav Bar ای کار می کند. در مثال زیر از Nav Bar عمودی استفاده کرده ایم:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  body {
    position:relative;
  }
  ul.nav-pills {
    top:20px;
    position:fixed;
  }
  div.col-8 div {
    height:500px;
  }
  </style>
</head>
<body data-spy="scroll"data-target="#myScrollspy"data-offset="1">
 
<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-3 col-4"id="myScrollspy">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <aclass="nav-link active"href="#section1">Section1</a>
        </li>
        <li class="nav-item">
          <aclass="nav-link"href="#section2">Section2</a>
        </li>
        <li class="nav-item">
          <aclass="nav-link"href="#section3">Section3</a>
        </li>
        <li class="nav-item dropdown">
          <aclass="nav-link dropdown-toggle"data-toggle="dropdown"href="#">Section4</a>
          <div class="dropdown-menu">
            <aclass="dropdown-item"href="#section41">Link1</a>
            <aclass="dropdown-item"href="#section42">Link2</a>
          </div>
        </li>
      </ul>
    </nav>
    <div class="col-sm-9 col-8">
      <div id="section1"class="bg-success">    
        <h1>Section1</h1>
        <p>Trytoscroll thissection andlook at the navigation list whilescrolling!</p>
      </div>
      <div id="section2"class="bg-warning">
        <h1>Section2</h1>
        <p>Trytoscroll thissection andlook at the navigation list whilescrolling!</p>
      </div>        
      <div id="section3"class="bg-secondary">        
        <h1>Section3</h1>
        <p>Trytoscroll thissection andlook at the navigation list whilescrolling!</p>
      </div>
      <div id="section41"class="bg-danger">         
        <h1>Section4-1</h1>
        <p>Trytoscroll thissection andlook at the navigation list whilescrolling!</p>
      </div>      
      <div id="section42"class="bg-info">         
        <h1>Section4-2</h1>
        <p>Trytoscroll thissection andlook at the navigation list whilescrolling!</p>
      </div>
    </div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

منبع: روکسو

ارسال نظر برای این مطلب