Zurb Foundation的样式自动完成

时间:2013-08-11 00:13:17

标签: javascript css jquery-ui jquery-autocomplete zurb-foundation

使用Foundation功能而不是jQuery CSS进行自动完成的最佳做法是什么?

这是我的代码:http://jsfiddle.net/qhoc/88kfb/

<div class="row">
 <form class="custom">
 <fieldset>
 <legend>Fieldset</legend>
 <div class="row">
  <div class="large-12 columns ui-widget">
   <label for="tags">Input Label</label>
    <input id="tags" type="text" placeholder="large-12.columns">
  </div>
 </div>
</div>   

我只是不想在页面上包含另一个.css文件:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

所以我猜我有两个问题:

  1. 有没有办法使用基金会的dropdown或其他什么?似乎dropdown仅适用于topbar,并且其css在特定用例之外搞砸了。

  2. 在Foundation中创建下拉菜单的“标准”方法是什么?请帮助一些例子。因为我认为它是rows或者是dropdown

  3. 的调整。

2 个答案:

答案 0 :(得分:13)

你可以尝试通过jquery将'f-dropdown'类添加到:

 $('.ui-autocomplete').addClass('f-dropdown');

也在app.css上设置了youystyle.css:

.ui-helper-hidden-accessible{display:none}

我希望它有所帮助... http://jsfiddle.net/vgarcias/WdncE/

答案 1 :(得分:4)

基金会现在正试图在其下一个版本中默认合并自动完成。您可以在此

中找到该条目

https://github.com/zurb/foundation/issues/3100