یک مؤلفه برگه جاوا اسکریپت با رابط کاربری پله ای تطبیقی \u200b\u200bایجاد کنید

در گذشته، من به شما نشان دادم که چگونه رابط های تب دار مختلف ایجاد کنید. امروز، یکی دیگر از اجزای برگه جاوا اسکریپت پاسخگو را می سازیم که در آن برگه های قابل کلیک به عنوان یک جزء پله ای ظاهر می شوند.

اگر با مؤلفه های پله ای آشنا نیستید، هدف اصلی آنها بهبود تجربه کاربر با سازماندهی بلوک های محتوای منطقی بزرگ در مراحل متوالی کوچک تر است. مورد استفاده گسترده از چنین مؤلفه ای ایجاد یک پرداخت چند مرحله ای در سایت های تجارت الکترونیک است.

جزء برگه ما

در اینجا چیزی است که ما می خواهیم ایجاد کنیم- اندازه مرورگر خود را تغییر دهید برای مشاهده نحوه تغییر طرح برگه:

1. با نشانه گذاری صفحه شروع کنید

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

به طور پیش فرض، تب اول فعال خواهد بود.

در اینجا نشانه گذاری مورد نیاز است:

1

 class="grid">

2

3

    
 class="active">

4

       href="">

5

         class="dot">

6

        ...

7

8

9

10

11

12

    
 class="active">...

13

14

15

2. CSS را اضافه کنید

بیایید روی سبک های اصلی تمرکز کنیم—شما می توانید همه آن ها را با کلیک کردن روی آن ببینید CSS برگه پروژه آزمایشی

در صفحه های بزرگ (بیش از 700 پیکسل)، مولفه برگه به \u200b\u200bاین صورت خواهد بود:

در موارد کوچکتر، به این صورت خواهد بود:

توجه کنید که چگونه استپر بسته به اندازه صفحه بین جهت افقی و عمودی جابجا می شود.

همچنین، در نظر بگیرید که تمام صفحات برگه روی هم چیده شده و 100٪ به سمت چپ منتقل می شوند. در هر زمان، فقط یکی با active کلاس ظاهر می شود و در موقعیت اولیه خود می نشیند.

در اینجا بخشی از سبک های مورد نیاز آمده است:

1

/*CUSTOM VARIABLES HERE*/

2

3

.grid {

4

  display: grid;

5

  grid-template-columns: auto auto;

6

  gap: 70px;

7

  max-width: 1000px;

8

  padding: 0 20px;

9

  margin: 0 auto;

10

}

11

12

.tab-list li {

13

  display: flex;

14

}

15

16

.tab-list li:not(:last-child) {

17

  margin-bottom: 40px;

18

}

19

20

.tab-list a {

21

  display: inline-flex;

22

  align-items: center;

23

  gap: 24px;

24

  text-decoration: none;

25

}

26

27

.tab-list a .dot {

28

  position: relative;

29

  display: inline-block;

30

  width: 32px;

31

  height: 32px;

32

  border-radius: 50%;

33

  border: 1px solid var(--stepper-outline-color);

34

}

35

36

.tab-list li a .dot::before,

37

.tab-list li:not(:last-child) a .dot::after {

38

  content: "";

39

  position: absolute;

40

  left: 50%;

41

}

42

43

.tab-list li a .dot::before {

44

  top: 50%;

45

  transform: translate(-50%, -50%) scale(0);

46

  width: 18px;

47

  height: 18px;

48

  border-radius: 50%;

49

  background: var(--stepper-active-color);

50

  transition: transform 0.3s;

51

}

52

53

.tab-list li:not(:last-child) a .dot::after {

54

  top: calc(100% + 1px);

55

  transform: translateX(-50%);

56

  height: 40px;

57

  border-left: 2px dashed var(--stepper-connector-color);

58

}

59

60

.tab-list li.active a {

61

  font-weight: bold;

62

}

63

64

.tab-list li.active a .dot::before {

65

  transform: translate(-50%, -50%) scale(1);

66

}

67

68

.tab-panels {

69

  display: grid;

70

  overflow: hidden;

71

}

72

73

.tab-panels > li {

74

  grid-area: 1/1;

75

  opacity: 0;

76

  transform: translateX(-100%);

77

  transition: opacity 0.35s ease-in-out, transform 0.7s ease-in-out;

78

}

79

80

.tab-panels > li.active {

81

  opacity: 1;

82

  transform: none;

83

}

84

85

@media (max-width: 700px) {

86

  .grid {

87

    grid-template-columns: 1fr;

88

    gap: 30px;

89

  }

90

91

  .tab-list {

92

    display: flex;

93

    justify-content: center;

94

  }

95

96

  .tab-list li:not(:last-child) {

97

    margin: 0 40px 0 0;

98

  }

99

100

  .tab-list li a span:last-child {

101

    display: none;

102

  }

103

104

  .tab-list a {

105

    gap: 0;

106

  }

107

108

  .tab-list li:not(:last-child) a .dot::after {

109

    top: 50%;

110

    left: calc(100% + 1px);

111

    transform: translateY(-50%);

112

    width: 40px;

113

    height: auto;

114

    border-bottom: 2px dashed var(--stepper-connector-color);

115

    border-left: 0;

116

  }

117

}

3. جاوا اسکریپت را اضافه کنید

هر بار که روی پیوند برگه کلیک می کنیم، آن را حذف می کنیم active کلاس از تب و پنل فعال فعلی. سپس، آن کلاس را در تب و پنل مرتبط با آن پیوند قرار می دهیم.

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

1

const tabList = document.querySelector(".tab-list");

2

const tabItems = tabList.querySelectorAll("li");

3

const tabLinks = tabList.querySelectorAll("a");

4

const tabPanelsList = document.querySelector(".tab-panels");

5

const tabPanels = tabPanelsList.querySelectorAll("li");

6

const ACTIVE_CLASS = "active";

7

8

for (const tabLink of tabLinks) {

9

  tabLink.addEventListener("click", function (e) {

10

    e.preventDefault();

11

    tabList.querySelector(`li.${ACTIVE_CLASS}`).classList.remove(ACTIVE_CLASS);

12

    tabPanelsList

13

      .querySelector(`li.${ACTIVE_CLASS}`)

14

      .classList.remove(ACTIVE_CLASS);

15

16

    const parent = tabLink.parentElement;

17

    let parentIndex = Array.from(tabItems).indexOf(parent);

18

    parent.classList.add(ACTIVE_CLASS);

19

    tabPanelsList

20

      .querySelector(`li:nth-child(${++parentIndex})`)

21

      .classList.add(ACTIVE_CLASS);

22

  });

23

}

پشتیبانی از صفحه کلید را اضافه کنید

اگرچه مؤلفه ما برای دسترسی بهینه نشده است، بیایید پشتیبانی برای پیمایش صفحه کلید اضافه کنیم.

در صفحه نمایش های کوچک، هر بار سمت چپ (←) یا راست (→) کلیدهای جهت دار فشار داده شده است، ما برگه فعال فعلی را می گیریم. از آنجا، ما بررسی می کنیم تا ببینیم روی کدام فلش کلیک شده است. مناگر فلش سمت راست باشد، تب فعال بعدی را به عنوان برگه ای که بلافاصله بعد از برگه فعال فعلی می آید تنظیم می کنیم. اگر چنین برگه ای وجود نداشته باشد، تب بعدی تبدیل به تب اول می شود. به طور مشابه، اگر روی فلش سمت چپ کلیک شود، تب بعدی را به عنوان برگه ای که بلافاصله قبل از برگه فعال فعلی قرار می گیرد، تنظیم می کنیم. اگر چنین برگه ای وجود نداشته باشد، تب بعدی آخرین تب می شود.

ما همین روند را با بالا (↑) و پایین (↓) کلیدهای صفحه نمایش بزرگ

در اینجا کد جاوا اسکریپت مربوطه آمده است:

1

...

2

3

tabList.addEventListener("keyup", function (e) {

4

  const activeTabListItem = tabList.querySelector(`li.${ACTIVE_CLASS}`);

5

6

  if (

7

    e.key === "ArrowUp" ||

8

    e.key === "ArrowDown" ||

9

    e.key === "ArrowLeft" ||

10

    e.key === "ArrowRight"

11

  ) {

12

    if (

13

      (mqSm.matches && (e.key === "ArrowUp" || e.key === "ArrowDown")) ||

14

      (mqLg.matches && (e.key === "ArrowLeft" || e.key === "ArrowRight"))

15

    ) {

16

      return;

17

    }

18

19

    if (e.key === "ArrowUp" || e.key === "ArrowLeft") {

20

      const prevActiveTabListItem = activeTabListItem.previousElementSibling

21

        ? activeTabListItem.previousElementSibling

22

        : lastTabListItem;

23

      prevActiveTabListItem.querySelector("a").click();

24

    } else {

25

      const nextActiveTabListItem = activeTabListItem.nextElementSibling

26

        ? activeTabListItem.nextElementSibling

27

        : firstTabListItem;

28

      nextActiveTabListItem.querySelector("a").click();

29

    }

30

  }

31

});

نتیجه گیری

تبریک میگم، مردم! ما این مؤلفه تب جاوا اسکریپت پاسخگو زیبا و منحصر به فرد را بدون نوشتن کد زیاد ساختیم. از آنجا، می توانید آن را همانطور که هست استفاده کنید و با بررسی کد یک مؤلفه مشابه مانند برگه های Bootstrap، آن را در دسترس تر کنید.

همچنین، می توانید طرح بندی فهرست برگه ها را که شبیه یک مؤلفه پله ای است، جدا کنید و با افزودن عملکرد برای پیکان های ناوبری و غیره، از آن به صورت دلخواه استفاده کنید.

قبل از بسته شدن، بیایید آنچه را که امروز ایجاد کردیم را به یاد بیاوریم:

مثل همیشه، خیلی ممنون که خواندید!