zoukankan      html  css  js  c++  java
  • 在SAP WebClient UI里显示倒数计时的UI

    First let’s have a look at what is achieved: Once you click work center “Jerry count down”, the count down is displayed with a small animation.

    The steps to build this application are almost the same as Step by step to create Bar Chart in Webclient UI.

    (1) Create a new WebUI component with a view main.htm:

    Paste the following source code for the created view:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <script src="count/jquery.lwtCountdown-1.0.js"></script>
      <link rel="Stylesheet" type="text/css" href="count/main.css"></link>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Countdown demo</title>
    </head>
    <body>
      <div id="container">
        <h1>Jerry's count down demo</h1>
        <h2 class="subtitle">Time left for year 2017</h2>
    
        <div id="countdown_dashboard">
          <div class="dash weeks_dash">
            <span class="dash_title">weeks</span>
            <div class="digit">0</div>
            <div class="digit">0</div>
          </div>
    
          <div class="dash days_dash">
            <span class="dash_title">days</span>
            <div class="digit">0</div>
            <div class="digit">0</div>
          </div>
    
          <div class="dash hours_dash">
            <span class="dash_title">hours</span>
            <div class="digit">0</div>
            <div class="digit">0</div>
          </div>
    
          <div class="dash minutes_dash">
            <span class="dash_title">minutes</span>
            <div class="digit">0</div>
            <div class="digit">0</div>
          </div>
    
          <div class="dash seconds_dash">
            <span class="dash_title">seconds</span>
            <div class="digit">0</div>
            <div class="digit">0</div>
          </div>
        </div>
        <script language="javascript" type="text/javascript">
          jQuery(document).ready(function() {
            $('#countdown_dashboard').countDown({
              targetDate: {
                'day':    31,
                'month':  11,
                'year':   2017,
                'hour':   23,
                'min':    59,
                'sec':    59
              }
            });
          });
        </script>
      </div>
    </body>
    </html>
    

    As you see I hard code the last second of year 2017 as the time to count down here, feel free to replace with your own date and time.

    (2) Go to tcode SE80, tab MIME Repository, create a new folder named count and import these nine files.

    (3) Create a new work center and put the ui component into it.

    Please find step by step about how to achieve it from this wiki page How to add an custom UI component into a new work center.

    要获取更多Jerry的原创文章,请关注公众号"汪子熙":

  • 相关阅读:
    fiddler 抓https坑
    20171029机器学习之特征值选择
    20171028机器学习之线性回归过拟合问题的解决方案
    使用Matplotlib画对数函数
    对朴素贝叶斯的理解(python代码已经证明)
    解决Mac系统下matplotlib中文显示方块问题
    个人工作总结08(第二次冲刺)
    个人工作总结07(第二次冲刺)
    个人工作总结06(第二次冲刺)
    个人工作总结05(第二次冲刺)
  • 原文地址:https://www.cnblogs.com/sap-jerry/p/13581909.html
Copyright © 2011-2022 走看看