FineUploader div 不会显示类答案

【问题标题】：FineUploader div will not display classFineUploader div 不会显示类
【发布时间】：2013-05-15 18:56:02
【问题描述】：

这是一个 sn-p 的代码：

<div id="manual-fine-uploader"></div>
<div id="triggerUpload" class="button" style="margin-top: 10px;">Save</div>

<script type="text/javascript" src="~/js/fineuploader/fineuploader-3.5.0.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
      var manualuploader = new qq.FineUploader({
         element: $('#manual-fine-uploader')[0],
         request: {
            endpoint: 'server/handleUploads'
         },
         autoUpload: false,
         text: {
            uploadButton: 'Select Files'
         }
      });

      $('#triggerUpload').click(function () {
         manualuploader.uploadStoredFiles();
      });
   });
</script>

作为背景，我使用的是 FineUploader V3.5.0，我使用的是独立的无依赖版本。我刚刚为 FineUploader 开发人员复制了 this 示例。我将第二个 div 更改为 class="button"（我在应用程序中随处使用的 CSS 样式）。但是，没有样式发生。另外，我会在哪里引用我的一种样式到 javascript 中的自定义样式 uploadButton？

谢谢。

【问题讨论】：

嗨！在下载包中，出现了fineuploader-3-5-0.css。在那里您可以更改按钮样式。甚至js或者css都有一个“连接”来改变这个类，例如：qq-button（在css文件中）。
我无法理解您的问题。您是否在问为什么 #triggerUpload 按钮元素的样式未按照您期望的方式设置？
@RayNicholus 我正在尝试同时设置“保存”按钮和“选择文件”按钮的样式。
@ViniciusLima 直接修改fineuploader.css 对我没有任何改变。例如，我修改了qq-upload-button（我的“保存”按钮。实际上“选择文件”按钮甚至从未出现过。
@kmarks2，这很奇怪。我曾经很好地上传并且我已经更改了css并且我的按钮以不同的方式显示。 js和css之间是有关系的。如果你在 js 中找到，你会找到与 css 相关的类。很抱歉问你，但是你在你的页面中导入 fileupload css 文件吗？再次抱歉问这个问题。

标签： javascript html asp.net css fine-uploader

【解决方案1】：

正如您在 cmets 中提到的，您希望设置“保存”按钮（您已创建）和“选择文件”按钮（由 Fine Uploader 创建）的样式。

就“保存”按钮而言，这与 Fine Uploader 完全无关。您已创建此按钮，它不是 Fine Uploader 的一部分。你可以通过 CSS 设置你喜欢的样式。

关于“选择文件”按钮，您有三个选项：

创建您自己的 div/anchor/etc 元素，并通过 button option 将其传递给 Fine Uploader。 Fine Uploader 将添加一个不透明的文件输入元素作为此按钮元素的子元素。使用 CSS 为您的元素设置您喜欢的样式。
创建您自己的 CSS（文件），以 Fine Uploader 的 UI 模块创建的默认按钮为目标。有很多方法可以确保您的 CSS 属性“获胜”，但这只是一个 CSS 问题，实际上超出了这里的范围。
覆盖template 选项。我建议不要走这条路。 Fine Uploader 的模板选项比较脆弱，需要在以后的版本中改进。您可以在first half of the styling readme 中阅读有关覆盖模板的更多信息，但我再次建议您不要这样做。

在上面的三个选项中，第一个选项是最简单的，也是我个人推荐的。

听起来您只是没有正确导入 Fine Uploader 随附的 CSS 文件。这在demo page/website 的第一个示例“设置”中有所介绍。

【讨论】：

谢谢。我会试试这些。我很困惑为什么fineuploader.com 演示/代码被简化到无法工作的地步。好像少了点什么。
在每个示例中重复相同的导入语句和样板代码真的没有意义。它们是用于演示特定功能/概念的代码 sn-ps，假设您了解任何 javascript/css 文件也必须导入，并且存在适当的 HTML 文档。第一个示例：正如我提到的，设置也包括这些导入语句。如果您有一个有效的 HTML 文档，并且您已经导入了您使用的任何 js/css 文件，那么演示就可以正常工作。