I'm using foundation 6 to make an ajax powered site. The index page uses off canvas and tabs for navigation. But when I added the jquery datepicker widget and the corresponding css, it is adversely affecting the appearance of my navigation bar.
I make no reference to the ui classes in my navigation source code, but foundation or something is putting them into the served version.
for example:
source code snippet:
<li>
<a id="select-sections" href="#tabs-2" class="hollow button secondary disabled" data-open="offCanvasLeft">
§§
</a>
</li>
but firebug shows:
<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>
Obviously, when I add the CSS for datepicker widget, It's using css styles that I never intended to use on my menus. I really don't want it to add stuff like "ui-state-default" and "ui-corner-top" to my code.
Two possible ways I can see to potentially solve the problem, just don't know how to accomplish it:
If it helps, here is a simplified listing
<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>
and the css is loaded via 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
*/
答案 0 :(得分：0)
我将css仅应用于datepicker小部件。对于Ror：
id。id添加到CSS Scope输入。*= require jquery-ui/datepicker
url(images/*的任何引用更改为url(/images/*