Question

我正在为餐馆建立一个内部应用程序。我不确定动态创建按钮/链接列表的最佳方法是什么。

我有组合餐盒的列表，让我们说box1，box2，box3（组合框的数量会改变）将显示在屏幕上。在选择给定的框时，将显示弹出窗口，其中包含项目列表，例如item1 ... item5。用户可以选择形成项目并继续。

我想实现一个按钮或链接列表，它们的行为类似于组合框列表和每个按钮的弹出面板，以显示项目并继续。

请指导我创建动态按钮/链接列表的最佳方法。按钮是否是正确的控件或其他东西可用于调用面板。

我使用asp.net（vs 2010）来构建应用程序。

Answer 1

假设您想要用按钮和/或链接填充的div的id是：cat 然后使用jQuery：

$('#cat').html('<input type="button" name="" value="Button1"/>');

添加更多文字：

 $('#cat').append('<a href="http://www.google.com">Click Here</a>');

Answer 2

根据这些小信息，只能提出非常通用的建议。

首先，链接和按钮之间的区别：

链接旨在带您到地方，它从不使用POST方法，应该不更改服务器中的任何状态，因此应该被视为机器人安全（意味着搜索引擎蜘蛛将关注链接）
按钮，特别是在HTML5中，是一个通用的UI元素，可以做很多不同的事情（例如在JavaScript的帮助下），但通常是 NOT 被视为机器人安全意味着搜索引擎蜘蛛可能不会点击按钮（如果它们绑定到POST形式，则不定义，尽管Google现在正在渲染JavaScript并可能会跟随{{ 1}}形式）。

从上面开始 - 如果你的弹出式面板只是一个带有链接的子菜单，那么GET链接可能是好的。

但是如果弹出的面板是<a href="#">触发服务器中的某些更改（例如添加某些东西到购物车等），那么form最好传达面板的真正目的。 / p>

关于生成布局，目前的最佳做法是使用<button>，遍历所有餐盒并为每个用餐框生成<ul>元素。然后使用CSS设置每个框和JavaScript的高度和JavaScript以弹出面板。

例如：

<li>

使用类附加CSS并单击事件处理程序并使用按钮ID，您知道单击了哪个用餐框按钮，因此您可以弹出正确的面板。

PS：要隐藏列表项项目符号，请使用与此类似的CSS：

<ul class="mealboxes">
  <li class="mealbox"><button id="box1" class="mealbox">Meal Box 1</button></li>
  <li class="mealbox"><button id="box2" class="mealbox">Meal Box 2</button></li>
  <li class="mealbox"><button id="box3" class="mealbox">Meal Box 3</button></li>
</ul>

什么是动态生成按钮/链接列表的最佳方法

2 个答案: