Jak mogę wstępnie przełączać przycisk w grupie btn Bootstrapa?

Question

Jak mogę wdrożyć grupę przycisków radiowych i wykonać jeden z przycisków pre-toggled?

Mam grupę przycisków z liczbami dni z wartościami tygodni. To jeden:

<div class="btn-group" data-toggle="buttons-radio"> 
    <button class="btn" id="test0">Mon</button> 
    <button class="btn" id="test1">Tue</button> 
    <button class="btn" id="test2">Wed</button> 
    <button class="btn" id="test3">Thu</button> 
    <button class="btn" id="test4">Fri</button> 
    <button class="btn" id="test5">Sat</button> 
    <button class="btn" id="test6">Sun</button> 
</div> 

Co potrzebne jest, aby pobrać aktualną wartość dniowy (używając var currentDay = new Date().getDay()) i toggle (aktywacji) odpowiedni przycisk w grupie.

I staram się przestawić go z następnego kodu (tylko w celach testowych):

$("#test0").button('toggle') 

To nie działa.

Answer 1

Możesz skorzystać z klasy bootstraps .btn.active i po prostu dodać ją do przycisku, który chcesz przełączyć jako pierwszy, i możesz użyć jQuerys toggleClass, aby zdezogować przyciski. Demo.

---

Właśnie zauważyłem, że Twitter ma skrypt przycisku, który można wywołać ten efekt, tutaj jest stałym demo z wynikami się spodziewałeś.

---

Po obejrzeniu tego, co faktycznie chciałeś z tego komentarza, zaktualizowałem moje skrzypce o wyniki, których szukasz.

I dodaje się funkcję, która ściąga aktualny dzień za pomocą obsługiwać JavaScript getDay sposób tablicy i przełącza odpowiedniego dnia na grupy przycisków od targetting identyfikator przycisku: demo

odpowiedni kod:

JS

function today() { 
    var arr = ["0", "1", "2", "3", "4", "5", "6"]; //first day of the week is sunday and its index is 0 
    var currentDay = new Date().getDay(); 

    return (arr[currentDay]); 
} 

var day = '[id="test' + today() +'"]'; // we take the current day from the array and add the beginning of the class name and save it in a variable 

$(day).button('toggle'); 

Answer 2

próbowałem powyżej, ale chciałem tylko rozwiązanie HTML/CSS.

znalazłem podejście oparte nacisk będzie pracować dla Bootstrap 3. Zauważ, że autofocus jest atrybutem HTML5.

<div class="btn-group"> 
     <button class="btn" id="test0" autofocus="true">Mon</button> 
     <button class="btn" id="test1">Tue</button> 
     <button class="btn" id="test2">Wed</button> 
     <button class="btn" id="test3">Thu</button> 
     <button class="btn" id="test4">Fri</button> 
     <button class="btn" id="test5">Sat</button> 
     <button class="btn" id="test6">Sun</button> 
</div> 

znajdę Bootply łatwiej skrzypce z bootstrap.
Oto moja próba bootply: http://www.bootply.com/cSntVlPZtU

Answer 3

I napotkał ten sam problem, ale chcieliśmy prostsze rozwiązanie. Zauważyłem, że dodanie "aktywnego" do klasy nie rozwiązuje problemu, ponieważ zostało ono jakoś usunięte (nie sprawdziłem, dlaczego to robi).

Rozwiązaniem jest dołączanie "aktywnych aktywnych" do zajęć. W ten sposób tylko jeden jest usuwany, a drugi omija magię, która dzieje się z tyłu. To naprawdę brudne rozwiązanie, ale rozwiązuje problem. Mam nadzieję, że to pomoże!

Answer 4

tylko naśladować przycisk samopoczucie kliknięcie na stronie obciążenia.

$ ("# buttonid") spustu ("kliknięcie");

Pracowałem dla mnie nad innym podobnym standardowym przyciskiem, który chciałem pokazać po kliknięciu na stronie ładowania - akcja przycisku była wymagana do ustawienia domyślnego widoku tabeli strony, którą chciałem wyświetlić. Pozostałe przyciski zapewniają różne widoki, ale domyślny pokazuje wszystkie dane.