javascript - HTML 5 管理区域编辑

Question

我正在尝试创建一个显示进度条的页面。

这个想法是有一个从 0 开始的条形图的客户端页面。每次用户完成挑战时，管理员可以转到他们的管理页面，单击一个按钮并将 10% 添加到该条形图上。然后这将在客户端页面上更新。

到目前为止，我有一个可以从客户端页面更新的进度条，这不是很好。

我试图使用沙发 cms ，但失败了。

欢迎任何帮助。

谢谢

Answer 1

这听起来不像是传统意义上的“进度条”。相反，构成“进度条”的元素只是从服务器端代码动态提供的。

考虑一个存储这些数据的数据库表。像这样简单的东西：

User | Progress
---------------
1    | 30
2    | 50
3    | 10

依此类推，只为每个用户存储“进度”。在您的管理界面中，会有增加或减少这些值的控件。他们所做的只是更新数据库。他们不更新“页面”，因为这是一个单独的问题。

然后用户页面在加载时简单地读取该用户的值并相应地呈现一些 UI 元素。如果您对 UI 使用任何类型的“进度条”插件，那么我想数据库中的数值将仅用作该进度条的当前状态。例如，如果您使用 jQuery UI 进度条，您将使用给定值初始化它：

$('#progressbar').progressbar({
  value : 30
});

您如何将该值发送到页面完全取决于您的服务器端代码。例如，在 ASP.NET MVC 中，它可能是这样的：

$('#progressbar').progressbar({
  value : @Model.UserProgress
});

当然，这只是一个例子。我不知道您使用的是什么服务器端技术（如果有的话）。

用户页面不需要任何方式来更改进度条本身，他们将在下次访问页面时看到当前状态。（假设我正确理解您的用例。）