Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Anchor
回到顶部
回到顶部
Table of Contents
maxLevel3

HTML
   <style>
    #temp-video-cover {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      z-index: 11;
      background-color: rgba(0, 0, 0, 0.3);
      transition: .15s;
      opacity: 0;
      font-family: "微软雅黑", "PingFangSC", "Helvetica neue", "Hiragino sans gb", "Arial", "Microsoft YaHei UI", "Microsoft YaHei", "SimSun", "sans-serif";
    }

    #temp-video-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }

    #temp-video-title {
      position: absolute;
      opacity: 0;
      right: 10px;
      top: 0px;
      transition: .15s;
    }

    #temp-video-container:hover #temp-video-title {
      display: inline;
      opacity: 1;
      top: 10px;
    }

    .FUI-dialog-header {
      position: relative;
      display: flex;
      align-items: center;
      padding: 0.5rem 0 0.5rem 0.5rem;
      background-color: #FFFFFF;
      height: 2rem;
      min-height: 2rem;
      cursor: move;
      user-select: none;
      -ms-user-select: none;
    }

    .FUI-dialog-header-title {
      font-size: 1rem;
      word-break: keep-all;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      flex-grow: 1;
      color: white;
    }


    .FUI-dialog-header {
      border: 1px solid rgb(79, 129, 189);
      padding: 0.25rem 0.3rem;
      height: 1.25rem;
      background-color: rgb(79, 129, 189);
      color: white;
      cursor: move;
    }

    .FUI-dialog-header-close {
      width: 1.25rem;
      height: 1.25rem;
      min-width: 1.25rem;
      min-height: 1.25rem;
      font-size: 1rem;
      line-height: 1.25rem;
      border: 1px solid #ddd;
      border-radius: 0.125rem;
      color: white;
      text-align: center;
      font-family: Arial;
      transition: background-color 0.5s;
      cursor: pointer;
    }

    .FUI-dialog-header-close:hover {
      color: white;
      background-color: rgba(255, 50, 50, 0.6);
    }

    .FUI-dialog-header-close {
      font-size: 1.5rem;
      line-height: 2rem;
      width: 2rem;
      height: 2rem;
      min-width: 2rem;
      min-height: 2rem;
      text-align: center;
      cursor: pointer;
      color: dimgray;
      transition: all linear 0.15s;
      user-select: none;
      -ms-user-select: none;
    }

    .FUI-dialog-header-close:hover {
      cursor: pointer;
      color: white;
      background-color: red;
    }

    .FUI-dialog-content {
      position: relative;
      flex-grow: 1;
      background-color: #F0F0F0;
	  font-size: 0;
    }

    .FUI-dialog-footer {
      position: relative;
      height: 3rem;
      min-height: 3rem;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      padding: 0.5rem;
      background-color: #F0F0F0;
    }

    .FUI-dialog-header {
      border: 1px solid rgb(79, 129, 189);
      padding: 0.25rem 0.3rem;
      height: 1.25rem;
      background-color: rgb(79, 129, 189);
      color: white;
      cursor: move;
    }

    .FUI-dialog-header-close {
      width: 1.25rem;
      height: 1.25rem;
      min-width: 1.25rem;
      min-height: 1.25rem;
      font-size: 1rem;
      line-height: 1.25rem;
      border: 1px solid #ddd;
      border-radius: 0.125rem;
      color: white;
      text-align: center;
      font-family: Arial;
      transition: background-color 0.5s;
      cursor: pointer;
    }

    .FUI-dialog-header-close:hover {
      color: white;
      background-color: rgba(255, 50, 50, 0.6);
    }

    .FUI-button-svg {
      display: inline-block;
    }
    
  </style>
   <div style="text-align:right;">
    <a title="观看本节视频" href="javascript:showVideo();" style="text-decoration:none;">
		<img src="http://help.grapecity.com.cn/download/attachments/23594008/VideoButton.png?api=v2" />
	</a>
   </div>
  
  <div id="temp-video-cover">
    <div id="temp-video-container">
      <div class="FUI-dialog-header" style="background-color: rgb(0, 135, 205); border-color: rgb(0, 135, 205);">
        <span class="FUI-dialog-header-title">活字格视频</span>
        <div class="FUI-dialog-header-close" id="FUI-dialog-close" title="" onclick="closeVideo()">
          <span class="FUI-button-svg"></span><span class="FUI-button-text">×</span></div>
      </div>

      <div class="FUI-dialog-content" width="820px" height="470px">
	    <div style="overflow:hidden;">
         <video id="temp-video" src="http://video1.grapecity.com.cn/HuoZiGe/Tutorials/v5.0/教学视频/关键字.mp4"
            height="450" controls="controls" onplaying="startplay()">您的浏览器不支持播放此视频。</video>
        </div>
      </div>
    </div>
  </div>

  <script>
    var videoContainer = document.getElementById("temp-video-container");
    var videoCover = document.getElementById("temp-video-cover");
    var video = document.getElementById("temp-video");

    function showVideo() {
      videoCover.style.display = "block";
      setTimeout(function () {
        videoCover.style.opacity = 1;
		video.play();
      }, 200);
    }

    function closeVideo() {
      videoCover.style.opacity = 0;
      setTimeout(function () {
        videoCover.style.display = "none";
        video.pause();
      }, 150);
      return false;
    }

    var isplayed = 1;
    var startplay = function () {
      if (isplayed) {
        ga('send', 'event', 'Play Video', '活字格');
        isplayed = 0;
      }
      return false;
    }

    videoCover.onclick = function (e) {
      if (e.target.nodeName === "A") {
        closeVideo();
      }
    }
  </script>



Image Modified1.描述Image Modified

在活字格中有一些有特别意义的字符串,以%开头并且以%结尾,叫做关键字。

活字格提供里一系列关键字,可以方便的获取应用程序中的一些特殊数据,如当前登录用户的一些属性信息。

Image Modified2.关键字Image Modified

关键字可以用于在页面上显示信息、结合查询命令查询特定的记录、结合条件命令控制特定的流程、结合数据表操作命令更新特定的值到数据库中等。

灵活使用关键字可以使得应用程序的功能更灵活,权限控制更细致。

表1  关键字列表
类别

关键字

属性

说明

登录用户信息%CurrentUser.UserName%用户名返回登录用户的用户名。
%CurrentUser.Role%角色返回登录用户的角色。如果登录用户有多个角色,用逗号分隔开。
%CurrentUser.OrganizationSuperior%组织上级返回登录用户的组织上级。如果登录用户有多名组织上级,用逗号隔开。
%CurrentUser.FullName%全名返回登录用户的全名。
%CurrentUser.Email%邮件地址返回登录用户的邮件地址。
%CurrentUser.[PropertyName]%自定义属性返回登录用户的自定义属性值。
%CurrentUser.[OrganizationLevelName]%指定组织级别的值返回登录用户的指定组织级别的值。
%CurrentUser%登录用户返回登录用户的值。
工作流

%AssignTo%担当者担当者。
%Creator%创建者创建者。
%LastModifier%最后修改者最后修改者。
其他

%Null%Null表示未定义状态(空)。
%GUID%GUID返回GUID作为值,只能在“数据表操作”命令中使用。
%AutoGeneratedID%自动生成ID只能在“设置单元格属性”命令中使用。

Image Modified3.插入关键字Image Modified

选择“插入->关键字”,在关键字列表中单击一个即可将关键字插入到页面中。

图1  插入关键字

其中,用户名、用户全名、邮箱地址、角色为用户的基本属性,头衔为自定义属性,公司、事业部、部门、项目为组织级别。

例如,在页面上插入关键字,运行后在页面中就能显示出登录用户的属性信息。

图2  关键字


第三十七章 第三十八章 关键字