0
私は基礎6を使ってajaxで動くサイトを作っています。インデックスページでは、オフキャンバスとタブを使用してナビゲーションを行います。しかし、jquery datepickerウィジェットと対応するCSSを追加すると、ナビゲーションバーの外観に悪影響を及ぼします。jquery datepickerが追加され、そのCSSがページの他の部分に影響を与えます
私のナビゲーションソースコード内のuiクラスは参照しませんが、foundationや何かがそれらを提供されたバージョンに入れています。例えば
：
ソースコードスニペット：
<li>
<a id="select-sections" href="#tabs-2" class="hollow button secondary disabled" data-open="offCanvasLeft">
§§
</a>
</li>
が、放火犯を示しています明らかに
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="select-sections" aria-selected="false" aria-expanded="false">
<a id="select-sections" class="hollow button secondary disabled ui-tabs-anchor" href="#tabs-2" data-open="offCanvasLeft" role="presentation" tabindex="-1" aria-expanded="false" aria-controls="offCanvasLeft"> §§ </a>
</li>
、私はDatePickerのウィジェット用のCSSを追加するとき、それはそのI CSSスタイルを使用しています私のメニューで使うつもりはありませんでした。私は本当に私のコードに "ui-state-default"や "ui-corner-top"のようなものを追加したくありません。
- 何とか何とか作る私のナビゲーション
- にUI- *クラスの追加を防ぐ：私はちょうどそれを達成する方法がわからない、潜在的な問題を解決するために見ることができます
2つの方法それが助け場合は、CSS日付ピッカー
にのみ適用され、ここでは単純化し上場
<body>
<div class="full-height">
<div id="topbar" class="top-bar">
<div class="top-bar-title"> The site title... </div>
<div>
<div id="top-bar-left-content" class="top-bar-left"></div>
<div id-"top-bar-right-content" class="top-bar-right">
<form>
<ul class="logged_in menu">
<li>Date: </li>
<li><input type="text" id="datepicker" name="today" value="<%= @today %>"></li>
<li><input class="button primary" type="submit" value="Change Date"></li>
<li><button id="select-help" class="button primary">Help</button></li>
</ul>
</form>
</div>
</div>
</div>
<span id="notice"><%= notice %></span>
<!-- wrap entire document (2 divs) -->
<div class="off-canvas-wrapper container"><div class="off-canvas-wrapper-inner fill" data-off-canvas-wrapper>
<!-- tabs wrap around off-canvas and off-canvas data. using .tabs class distorts display. -->
<div id="tabs" class="fill ">
<!-- off canvas left (hidden) part -->
<div id="offCanvasLeft" class="off-canvas position-left fill" data-off-canvas data-close-on-click=false>
<!-- tabs content -->
<aside>
<div id="tabs-1">A list of links...</div>
<div id="tabs-2">A list of links...</div>
<div id="tabs-3">A list of links...</div>
<div id="tabs-4">A list of links...</div>
<div id="tabs-5">A list of links...</div>
</aside>
</div><!-- end off canvas left -->
<!-- rest of the page (on canvas) -->
<div id="left-scroll" class="off-canvas-content rows fill" data-off-canvas-content>
<!-- sidebar icons. these select the tab to display -->
<ul id="sidebar-closed" class="menu vertical sidebar-closed">
<!-- toggle sidebar -->
<li id="toggle-oc">
<a class="hollow button secondary" data-toggle="offCanvasLeft">
<i id="toggle-menu" class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</li>
<!-- search -->
<li>
<a id="select-search" href="#tabs-3" class="hollow button secondary is-active" data-open="offCanvasLeft">
<i class=" fa fa-search" aria-hidden="true"></i>
</a>
</li>
<!-- part list -->
<li>
<a id="select-parts" href="#tabs-1" class="hollow button secondary" data-open="offCanvasLeft">
<i class=" fa fa-list" aria-hidden="true"></i>
</a>
</li>
<!-- section list -->
<li>
<a id="select-sections" href="#tabs-2" class="hollow button secondary disabled" data-open="offCanvasLeft">
§§
</a>
</li>
<!-- letter list -->
<li>
<a id="select-letters-list" href="#tabs-4" class="hollow button secondary disabled" data-open="offCanvasLeft"><!-- data-pushstate="/sidebar_actions/letters" -->
<i class=" fa fa-files-o" aria-hidden="true"></i>
</a>
</li>
</ul>
<!-- main window content -->
<main>
links in the tabs are displayed here
</main>
</div><!-- rest of page (on canvas) wrapper -->
</div> <!-- tabs wrapper -->
</div></div> <!-- outer 2 off-canvas wrappers -->
</body>
とCSSをapplication.css.scssを経由してロードされます。
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*= require foundation_and_overrides
*= require jquery-ui/datepicker
*= require font-awesome
*/