logo标签列表

遍历本地文件夹并动态创建元素

javascriptjqueryhtmlcssdirectory
3

我想制作一个jquery-ui选项卡菜单，每个选项卡包括54张图片。我有880张图片存储在一个文件夹中，使用<img>标签添加这些图片将需要很长时间。我能否遍历每个图片并动态地将它们附加到选项卡上？我想要的是每个选项卡看起来像这样。

img {
    width: 35px;
    height: 35px;
}
#tabs {
    width: 420px;
    height: 300px;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
   float: left;
   padding: .1em .175em;
   text-decoration: none;
}
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
      img {
          width: 35px;
          height: 35px;
      }
      #tabs {
          width: 420px;
          height: 300px;
      }
      .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
   float: left;
   padding: .1em .175em;
   text-decoration: none;
      }
  </style>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">1</a></li>
    <li><a href="#tabs-2">2</a></li>
    <li><a href="#tabs-3">3</a></li>
    <li><a href="#tabs-4">4</a></li>
    <li><a href="#tabs-5">5</a></li>
    <li><a href="#tabs-6">6</a></li>
    <li><a href="#tabs-7">7</a></li>
    <li><a href="#tabs-8">8</a></li>
    <li><a href="#tabs-9">9</a></li>
    <li><a href="#tabs-10">10</a></li>
    <li><a href="#tabs-11">11</a></li>
    <li><a href="#tabs-12">12</a></li>
    <li><a href="#tabs-13">13</a></li>
    <li><a href="#tabs-14">14</a></li>
    <li><a href="#tabs-15">15</a></li>
    <li><a href="#tabs-16">16</a></li>
    <li><a href="#tabs-17">17</a></li>
  </ul>
  <div id="tabs-1">
    <img src="emojis-master/100.png"/>
    <img src="emojis-master/1234.png"/>
    <img src="emojis-master/8ball.png"/>
    <img src="emojis-master/a.png"/>
    <img src="emojis-master/ab.png"/>
    <img src="emojis-master/abc.png"/>
    <img src="emojis-master/abcd.png"/>
    <img src="emojis-master/accept.png"/>
    <img src="emojis-master/aerial_tramway.png"/>
    <img src="emojis-master/airplane.png"/>
    <img src="emojis-master/alarm_clock.png"/>
    <img src="emojis-master/alien.png"/>
    <img src="emojis-master/ambulance.png"/>
    <img src="emojis-master/anchor.png"/>
    <img src="emojis-master/angel.png"/>
    <img src="emojis-master/anger.png"/>
    <img src="emojis-master/angry.png"/>
    <img src="emojis-master/anguished.png"/>
    <img src="emojis-master/ant.png"/>
    <img src="emojis-master/apple.png"/>
    <img src="emojis-master/aquarius.png"/>
    <img src="emojis-master/aries.png"/>
    <img src="emojis-master/arrow_backward.png"/>
    <img src="emojis-master/arrow_double_down.png"/>
    <img src="emojis-master/arrow_double_up.png"/>
    <img src="emojis-master/arrow_down.png"/>
    <img src="emojis-master/arrow_down_small.png"/>
    <img src="emojis-master/arrow_forward.png"/>
    <img src="emojis-master/arrow_heading_down.png"/>
    <img src="emojis-master/arrow_heading_up.png"/>
    <img src="emojis-master/arrow_left.png"/>
    <img src="emojis-master/arrow_lower_left.png"/>
    <img src="emojis-master/arrow_lower_right.png"/>
    <img src="emojis-master/arrow_right.png"/>
    <img src="emojis-master/arrow_right_hook.png"/>
    <img src="emojis-master/arrow_up.png"/>
    <img src="emojis-master/arrow_up_down.png"/>
    <img src="emojis-master/arrow_up_small.png"/>
    <img src="emojis-master/arrow_upper_left.png"/>
    <img src="emojis-master/arrow_upper_right.png"/>
    <img src="emojis-master/arrows_clockwise.png"/>
    <img src="emojis-master/arrows_counterclockwise.png"/>
    <img src="emojis-master/art.png"/>
    <img src="emojis-master/articulated_lorry.png"/>
    <img src="emojis-master/atm.png"/>
    <img src="emojis-master/b.png"/>
    <img src="emojis-master/baby.png"/>
    <img src="emojis-master/baby_bottle.png"/>
    <img src="emojis-master/baby_chick.png"/>
    <img src="emojis-master/back.png"/>
    <img src="emojis-master/bad.png"/>
    <img src="emojis-master/baggage_claim.png"/>
    <img src="emojis-master/balloon.png"/>
    <img src="emojis-master/ballot_box_with_check.png"/>
  </div>
  <div id="tabs-2">
  </div>
  <div id="tabs-3">
  </div>
  <div id="tabs-4">
  </div>
  <div id="tabs-5">
  </div>
  <div id="tabs-6">
  </div>
  <div id="tabs-7">
  </div>
  <div id="tabs-8">
  </div>
  <div id="tabs-9">
  </div>
  <div id="tabs-10">
  </div>
  <div id="tabs-11">
  </div>
  <div id="tabs-12">
  </div>
  <div id="tabs-13">
  </div>
  <div id="tabs-14">
  </div>
  <div id="tabs-15">
  </div>
  <div id="tabs-16">
  </div>
  <div id="tabs-17">
  </div>
</div>
 
 
</body>
</html>

感谢您的提前帮助。我需要写这些话，否则我不能发布这个问题，因为里面有大量的代码，请忽略这部分内容。
1
我有Java...也许我应该使用它？@Occam'sRazor - MBJH
2
好的，Java可以使用。我建议在后端编写一个脚本来创建一个JSON文件，其中包含每个文件名，然后通过ajax读取JSON文件并循环它。 - I wrestled a bear once.
1
请查看tabs:通过Ajax获取外部内容。 - gaetanoM
1
@gaetanoM 这是比我的建议更好的解决方案。不错！ - JO3-W3B-D3V
2
可能是重复的问题：有没有办法仅使用Javascript从文件夹中返回所有图像文件名的列表？ - agrm
显示剩余3条评论
1个回答
1

如果您的文件位于服务器上并且希望动态填充HTML文件，或者如果您的文件位于常规（非服务器）设备上，则需要运行一些文件操作，因此您需要一个服务器端解决方案。不幸的是，在浏览器环境中，这两个选项都不可用。

在服务器端，您可以使用PHP的scandir()方法或Node.js的fs.readdir()方法将文件列表转储为文本，并插入JavaScript变量列表或URL数组等内容到页面中。或者，您可以使用其中之一来编译JSON表示形式的文件或文件结构，并将其AJAX到应用程序中。

在非服务器环境下，我建议创建一个文件列表以供应用程序使用，可以使用命令行 ls function 或者如果你选择所有文件并按 Ctrl+C 复制它们，然后将其粘贴到文本文档中，你就会得到一个文件地址列表，这可以很容易地转换为 JavaScript 数组或 JSON 文件。个人而言，我会考虑使用 JSON 方法。
你可能还会发现以下链接有用...

;)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接