基于api调用的样式按钮

Question

我正在创建一个页面,显示集群中多个服务器的状态.我已经在我的Web服务上创建了一个状态路由,如果服务器正常运行,则返回'ok',如果没有,则返回一些错误.我想有几个按钮,可以显示绿色,如果API调用返回正常,红色如果没有(也许更好的选择？).一个问题是这些调用将是跨域的,尽管我们的公司防火墙内部.

很简单,但我是一个webservice开发人员,在这个领域几乎没有经验.我的想法是在页面加载时调用每个服务器状态路由并设置样式.我很尴尬地说我老实说不知道从哪里开始.我发现的每一个教程似乎都缺少一些拼图,可以为我"点击".

所以,我的最终问题是,是否有一个符合以下标准的已知教程:

• 启用html5/CSS3(最好是移动显示的响应式设计)
• 必要时jquery/angularjs库
• 支持跨域api调用
• 按钮(绘图)基于api调用结果.

如果这是很容易只是直接的HTML和JS的问题响应机构,将被罚款以及显示.我添加其他部分的唯一原因是,这只是我正在构建的仪表板的一小部分,它将集成统计图和管理功能.因此,与稍后集成相比,从这些功能开始将是理想的.

提前致谢.如果这个问题不够具体,请告诉我.我会编辑.

Answer 1

你不一定需要一个基于jQuery的解决方案,它很容易,但有一个纯CSS/JS解决方案也是一个选项.如果您只是使用jQuery来更改颜色或添加类,那么您最有可能做错了.

实现您想要达到的目标的最常用方法是远程调用服务器,您可以使用XHR,具体取决于XHR的响应和状态,您可以随时更新视图.我提供了一个进度条的示例,以达到您想要的可以遵循类似的方法.

例如,您正在创建进度条.使用HTML作为:

  <div class="progress_bar">
      <div class="progress"></div>
  </div>

CSS部分包含.

   .progress_bar{
      display:inline-block;
      position:relative;
      margin:20px;
      width:100%; 
      height:40px;
      max-width:100px; /* For Computers */
   }
   .progress_bar .progress{
      height:100%;
      position:absolute;
      left:0px;
      top:0px;
      width:0%;
   }
   @media(max-width:320px){
      max-width:100%;
      margin:10px;
   }
   .progress_bar::before{
        display:block; text-align:center;
        content:"Loading";
        color:black;
        font-size:16px;
    }
    .progress_bar.completed::before{
        content:"Finished";
    }
    .progress_bar.error::before{
        content:"Error Occured";
    }

现在您可以进行JS API调用(假设您正在下载文件)

你可以改变.progress元素的宽度.

function ProgressBar(elem){
   var bar = elem.getElementsByClassName('progress')[0];
   this.setProgress = function(x){
       bar.style.width = x + '%';
   }
   this.completed = function(){
       elem.classList.add("completed");
   }
   this.errored = function(){
       elem.classList.add("errored");
   }
}

现在你可以创建一个对象并使用新的XHR2.0 API来控制你的JS部分,但是通过添加类等来实现这一点,你可以获得响应式设计,因为js中的一些更改或某些逻辑会导致应用CSS类,此类可以使用媒体查询为其定义多个规则.希望这可以帮助.

有关XHR2.0的更多信息,请参阅http://www.html5rocks.com/en/tutorials/file/xhr2/