Zurb Foundation的样式自动完成 [英] Style autocomplete with Zurb Foundation

问题描述

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

What is the best practice to use Foundation features instead of jQuery CSS for Autocomplete?

这是我的代码： 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文件：

I just don't like to include another .css file which is overhead on the page:

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

所以我想我有两个问题：

So I guess I have two questions:

1. 有没有办法从Foundation使用下拉？似乎下拉仅适用于 topbar ，并且其css在特定用例之外搞砸了。

1. Is there a way to use dropdown from Foundation or something? It seems like dropdown is only for topbar and its css screwed up outside that particular use case.

在Foundation中创建下拉菜单的标准方法是什么？请帮助一些例子。因为我认为它是一堆行，或者它可能是来自下拉列表的调整

What is some "standard" way to create the dropdown menu in Foundation? Please help with some example. Because I was thinking it's either bunch of rows or it could be a tweak from dropdown

推荐答案

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

You could try to add the 'f-dropdown' class via jquery to the :

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

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

also set on the app.css o youystyle.css:

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

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

I hope it helps... http://jsfiddle.net/vgarcias/WdncE/

这篇关于Zurb Foundation的样式自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！