• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

jak zakodować button

VPS Starter Arubacloud
+1 głos
473 wizyt
pytanie zadane 13 listopada 2020 w JavaScript przez dz3101 Nowicjusz (220 p.)

Czy podpowie mi ktokolwiek. Słabo umiem kodowanie w javascript. Mianowicie chce zrobić przycisk , który spowoduję pokazanie kilku przycisków. Jeśli wybiorę obojętnie któryś z nich i nacisnę przycisk(potwierdzam) pokaże mi się komunikat ,,Czy jesteś pewny że chcesz wybrać ten przycisk" z dwoma button-ami -> OK i CANCEL. 

Z góry bardzo dziękuję :D

2 odpowiedzi

+1 głos
odpowiedź 15 listopada 2020 przez VBService Ekspert (251,210 p.)
wybrane 17 listopada 2020 przez dz3101
 
Najlepsza

Nie wiem czy do końca zrozumiałem Twoje pytanie, ale poniżej jest Moja propozycja. wink. Oczywiście "ostylowanie" elementów html jest tylko na potrzeby przykładu, możesz je zmienić. Codepen


<div class="container">
  <section>
    <button class="main unchecked">Grupa 1</button>
  
    <button class="submain hidden" value="1-1">pozycja 1-1</button>
    <button class="submain hidden" value="1-2">pozycja 1-2</button>
    <button class="submain hidden" value="1-3">pozycja 1-3</button>
  </section>
</div>
<div class="container">
  <section>
    <button class="main unchecked">Grupa 2</button>
  
    <button class="submain hidden" value="2-1">pozycja 2-1</button>
    <button class="submain hidden" value="2-2">pozycja 2-2</button>
  </section>
</div>
<div class="container">
  <section>
    <button class="main unchecked">Grupa 3</button>
  
    <button class="submain hidden" value="3-1">pozycja 3-1</button>
    <button class="submain hidden" value="3-2">pozycja 3-2</button>
    <button class="submain hidden" value="3-3">pozycja 3-3</button>
    <button class="submain hidden" value="3-4">pozycja 3-4</button>    
  </section>
</div>

<div class="message-box hidden" data-action="">
  <span class="message"></span>
  <button value="ok">Ok</button>
  <button value="cancel">Cancel</button>
</div>
.container {
  margin: 1em;
}
section {
  display: inline;
}
section button {
  font: 0.9em monospace;
  cursor: pointer;
  color: black;
  height: 2em;
  outline: none;
  border-radius: 0.5em;
  border: 1px solid gray;
  transition: all 0.1s;
}
section button.main {
  width: 6em;
  margin-right: 2em;
}
section button.submain {
  width: 8em;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
section button.submain:active {
  box-shadow: none;
}

.checked {
   box-shadow: none;
   color: lawngreen;
   background-color: seagreen;
   border-color: lawngreen;
}
.unchecked {
   box-shadow: 2px 2px 1px rgba(0,0,0,0.4);
}
.visible {
  visibility: visible;
}
.hidden {
  visibility: hidden;
}


.message-box {
  font: 1em monospace;
  margin: 1em;
  height: 1.4em;
}
.message-box button {
  font: 1em monospace;
  font-variant: small-caps;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
  margin: 0 0.2em;
  width: 4em;
  height: 1.5em;
  text-align: center;
  outline: none;
  border-radius: 0.5em;
  cursor: pointer;
}
.message-box button:hover {
  color: seagreen;
}
.message-box button:active {
  box-shadow: none;
}
const main_buttons = document.querySelectorAll('.main');
main_buttons.forEach((button) => {
  button.addEventListener('click', ( {target} ) => {
    if (target.classList.contains('checked')) {
      target.classList.remove('checked');
      target.classList.add('unchecked');
      subButtons('hidden', target);
    } else {
      target.classList.remove('unchecked');
      target.classList.add('checked'); 
      subButtons('visible', target);
    }
  });
});

const section_buttons = document.querySelectorAll('.submain');
section_buttons.forEach((button) => { 
  button.addEventListener('click', ( {target} ) => {
    let text = 'Czy jesteś pewny że chcesz wybrać przycisk:';
    text = `${text} <b>${target.value}</b> ?`    
    messageBox('show', text, target.value);
  });
});

const message_box = document.querySelector('.message-box');
const message = document.querySelector('.message-box .message');
const message_box_buttons = document.querySelectorAll('.message-box button');

message_box_buttons.forEach((button) => {
  button.addEventListener('click', ( {target} ) => {
    switch(target.value) {
      case 'cancel':
        messageBox('hide');
        break;
      case 'ok':        
        const action = message_box.getAttribute('data-action');
        // tu akcja
        alert('Akcja dla: ' + action);
        /* swich(action) {
              case '1-1':
                dla przycisku <button value="1-1">
                break;
              . . .  
              case '3-2':
                dla przycisku <button value="3-2">
                break;
              itp.
           }
        */
        break;
    }
  });
});

function messageBox(cmd, msg='', action='') {
  let class_remove = '';
  let class_add = '';
  
  switch(cmd) {
    case 'show':
      class_remove = 'hidden';
      class_add = 'visible';
      break;
    case 'hide':      
      class_remove = 'visible';
      class_add = 'hidden';
      break;
  }
  
  message_box.setAttribute('data-action', action);
  message.innerHTML = msg;
  message_box.classList.remove(class_remove);
  message_box.classList.add(class_add);
}

function subButtons(cmd, target) {
  const section_buttons = target.closest('section');  
  if(!! section_buttons) {
    const sub_buttons = section_buttons.querySelectorAll('.submain');
    if(!! sub_buttons) {
      sub_buttons.forEach((sub_button) => {
        if(cmd == 'visible') {
          sub_button.classList.remove('hidden');
          sub_button.classList.add('visible');        
        } else {
          sub_button.classList.remove('visible');
          sub_button.classList.add('hidden');         
        }
      });
    }
  }
}

komentarz 15 listopada 2020 przez dz3101 Nowicjusz (220 p.)
edycja 15 listopada 2020 przez dz3101

chodzi mi aby zakodować jak na tym filmiku od 2:00 min.

https://nevonprojects.com/doctor-appointment-booking-system/

 

komentarz 15 listopada 2020 przez VBService Ekspert (251,210 p.)

Kod działa, sprawdź oryginał na Codepen, źle coś implementujesz ten kod najwyraźniej. wink

komentarz 15 listopada 2020 przez dz3101 Nowicjusz (220 p.)

Zapomniałem dodać , że robię to w asp net mvc entity framework .

Chce zrobić aby wyświetlało kalendarz i po wybraniu daty i naciśnięciu przycisku sprawdź , wyświetliło godziny(button na czerwoną- zajęte, button na zieloną wolne) i po wybraniu konkretnej godziny zatwierdziło przyciskiem, który informuje ,,Czy jesteś pewny że chcesz zarezerwować tą godzinę" przycisk Ok potwierdzam wybór, przycisk Anuluj -anulowuje. 


chodzi mi aby zakodować jak na tym filmiku od 2:00 min.

https://nevonprojects.com/doctor-appointment-booking-system/

0 głosów
odpowiedź 13 listopada 2020 przez CubeStorm Pasjonat (15,020 p.)

Ustaw tym przyciskom display: none, po naciśnięciu tego głównego nadaj im w js wartość display: block. Potem stworzył bym w html i css diva, który pełniłby funkcje alertu i nadał mu wartość display: none. Tak jak poprzednio, po przyciśnięciu guzika nadaj temu alertowi display: block, czy tam display: flex.

 

Przydatne materiały:

https://kursjs.pl/kurs/dom/dom-wlasciwosci.php

https://kursjs.pl/kurs/dom/dom-relacje.php

https://kursjs.pl/kurs/dom/style.php

Podobne pytania

0 głosów
1 odpowiedź 978 wizyt
pytanie zadane 20 października 2019 w HTML i CSS przez Kubs Mądrala (5,190 p.)
0 głosów
1 odpowiedź 904 wizyt
pytanie zadane 29 czerwca 2017 w HTML i CSS przez Adrian86452 Użytkownik (690 p.)
0 głosów
2 odpowiedzi 664 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...