Mam aplikację szynową 4.Szyny z zakładkami Bootstrap
Próbuję włączyć zakładki Bootstrap.
Czytając dokumentację bootstrap, mówi się, że jeden sposób na to nie obejmuje żadnego js. Próbowałem wszystkich podejść w dokumentach, ale nie udało mi się uzyskać żadnego z nich w mojej aplikacji.
Moja obecna próba jest:
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active"> <a href="#terms" aria-controls="terms" role="tab" data-toggle="tab">Terms</a></li>
<li role="presentation"> <a href="#privacy" aria-controls="privacy" role="tab" data-toggle="tab">Privacy</a></li>
<li role="presentation"> <a href="#licence" aria-controls="licence" role="tab" data-toggle="tab">Licence</a></li>
<li role="presentation"> <a href="#trust" aria-controls="trust" role="tab" data-toggle="tab">Trust</a></li>
<li role="presentation"> <a href="#reliance" aria-controls="reliance" role="tab" data-toggle="tab">Reliance</a></li>
<li role="presentation"> <a href="#pricing" aria-controls="pricing" role="tab" data-toggle="tab">Pricing</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="terms"><%= render 'pages/legalpolicies/terms' %></div>
<div role="tabpanel" class="tab-pane" id="privacy"><%= render 'pages/legalpolicies/privacy' %></div>
<div role="tabpanel" class="tab-pane" id="licence"><%= render 'pages/legalpolicies/licence' %></div>
<div role="tabpanel" class="tab-pane" id="trust"><%= render 'pages/legalpolicies/trust' %></div>
<div role="tabpanel" class="tab-pane" id="reliance"><%= render 'pages/legalpolicies/reliance' %></div>
<div role="tabpanel" class="tab-pane" id="pricing"><%= render 'pages/legalpolicies/pricing' %></div>
</div>
Efekt jest, aby dać mi pasek kart w górnej części strony. Karty są klikalne.
Jednak cała zawartość każdego z osobnych okien zawartości karty wyświetla się tylko na jednej dużej długiej stronie tekstu. Linki nie działają.
Czy ktoś może zobaczyć, co jest wymagane, aby to działało?
czytałem to oświadczenie w docs:
można aktywować kartę lub pigułka nawigację bez pisania JavaScript po prostu podając dane-przełączanie = „Tab” lub data-przełączanie = „pigułka” na elemencie.
Rozumiem, że oznacza to, że nie jest wymagany js.
Zresztą starałem dokonywania privacy.js plik w moim folderze JavaScripts i dodając:
$('#myTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
To nic nie zrobił.
Próbowałem przenieść go do mojego pliku application.js. Bez różnicy. Czy wymagane jest więcej js? To dziwne dla mnie, że robi to wszystko, ponieważ nie mam nic o nazwie #myTabs w html. Czy jest coś jeszcze, co jest potrzebne, aby to zadziałało?
plik Gem posiada:
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5'
Arkusze stylów zawiera plik o nazwie: framework_and_overrides.css.css, która posiada:
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
folderu javascripts ma plik o nazwie application.js, który ma :
//= require underscore
//= require gmaps/google
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require_tree .
Więc - po poradę w sprawie instalacji gem bootstrap-Sass (dla Ruby on Rails, I mad e zmiany w moich arkuszach stylów i plikach js.
szczególności, że klejnot mówi:
Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.
Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.
Zmieniłem nazwę arkusza stylów aplikacja z application.css.scss do application.scss.
Zmieniłem zawartość tego pliku do:
@import "framework_and_overrides.css.scss";
@import "require_self";
@import "require_tree .";
*/
zmieniłem treść mojego framework_and_overrides.css.Plik SCSS obejmuje:
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-slider";
Mój plik application.js posiada:
//= require underscore
//= require gmaps/google
//= require jquery
//= require bootstrap-sprockets
//= require bootstrap-slider
//= require jquery_ujs
//= require_tree .
nie mieć pozytywny wpływ. Usuwa całą stylizację na moich stronach, usuwa wszystkie bootstrap stylizacji i ogólnie bałagan wszystkiego. Nie łączy linków zakładki z zawartością karty.
utknąłem -really próbując zrozumieć, jak korzystać z Bootstrap zakładki w Rails 4. Wszelkie porady będą bardzo mile widziane.
Kiedy zmienić go z powrotem, przynajmniej stylizacji odbija, ale wypustki js nie działają (w obu przypadkach).
kolejna próba:
Kiedy dodać import bootstrap na szczycie moich application.js:
@import "bootstrap";
//= require underscore
//= require gmaps/google
//= require jquery
//= require bootstrap
//= require bootstrap-sprockets
//= require bootstrap-slider
//= require jquery_ujs
//= require_tree .
zakładkach na górze strony w tym przykładzie pracy tak, że strona jest wskoczył do miejsca, w którym znajduje się początek odpowiedniej karty tekstowej. Nie tego chcę. Chcę częściowe zawierające ten tekst, aby wyświetlić na górze strony (oraz tekstu w każdej z pozostałych podszablonów być ukryte) - jak to pokazano na bootstrap przykład dla kart.
należy wymagać tylko jednego pliku Bootstrap JS, nie obu. To może pomóc. Zobacz [docs] (https://github.com/twbs/bootstrap-sass). > Koła rozruchowe i bootstrap nie powinny być dołączone do aplikacji.js – vanburen
Tak - dodałem tylko w "// = wymaganiu bootstrap" do pliku application.js, ponieważ nie mogłem wypróbować czegokolwiek innego. Usunąłem go, ale nadal mam ten sam problem. – Mel
Musisz włączyć JavaScript, aby zainicjować karty: http://getbootstrap.com/javascript/#tabs-usage. To może przejść do pliku application.js lub do innego pliku .js w twoim katalogu '/ javascripts /'. –