Home Explore Help
Sign In
asiainfo
/
static
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 1404 Releases 4 Wiki
Browse Source

页面更新，与分享操作封装

guohh 5 years ago
parent
c854441b25
commit
6635f367c0
11 changed files with 136 additions and 90 deletions
Split View Show Diff Stats
  1. 31 1
      2020/x/application-detail.html
  2. 0 43
      2020/x/biz/js/common/public.js
  3. 83 0
      2020/x/biz/js/common/tool.js
  4. 5 0
      2020/x/biz/js/page/application-detail.js
  5. 1 1
      2020/x/biz/js/page/contact-picker.js
  6. 1 1
      2020/x/biz/js/page/index.js
  7. 3 7
      2020/x/biz/js/page/message-detail.js
  8. 10 0
      2020/x/biz/js/page/task-detail.js
  9. 1 1
      2020/x/biz/js/require-config.js
  10. 0 17
      2020/x/message-detail.html
  11. 1 19
      2020/x/task-detail.html

+ 31 - 1
2020/x/application-detail.html
View File 

@ -11,7 +11,7 @@
11 11
12 12 
  <script src="ipu/lib/requirejs/require.js"></script>
13 13 
  <script src="biz/js/require-config.js"></script>
14 
  <script src="biz/js/page/message-detail.js"></script>
14 
  <script src="biz/js/page/application-detail.js"></script>
15 15 
</head>
16 16 
<body class="pages-task-detail">
17 17 
@ -58,17 +58,47 @@
58 58 
          </div>
59 59 
        </li>
60 60
61 
        <!-- 已审批使用 -->
62 
        <li class="ipu-list-item">
63 
          <div class="ipu-list-item-inner">
64 
            <div class="ipu-list-item-title application-info-label">审批结果</div>
65 
            <div class="ipu-list-item-after application-info-value">
66 
              <span class="application-state-pass">审批通过</span>
67 
            </div>
68 
          </div>
69 
        </li>
70
71 
        <!-- 已审批使用 -->
72 
        <li class="ipu-list-item">
73 
          <div class="ipu-list-item-inner">
74 
            <div class="ipu-list-item-title application-info-label">审批结果</div>
75 
            <div class="ipu-list-item-after application-info-value">
76 
              <span class="application-state-reject">审批驳回</span>
77 
            </div>
78 
          </div>
79 
        </li>
80
61 81 
      </ul>
62 82 
    </div>
63 83
84 
    <!-- 未审批使用 -->
64 85 
    <div class="application-note-input-wrap">
65 86 
      <div class="application-note-title">
66 87 
        备注
67 88 
      </div>
68 89 
      <textarea class="application-note-input" placeholder="请输入你的备注"></textarea>
69 90 
    </div>
91
92 
    <!-- 已审批使用 -->
93 
    <div class="application-note-input-wrap">
94 
      <div class="application-note-title">
95 
        备注
96 
      </div>
97 
      <textarea class="application-note-input" placeholder="请输入你的备注" readonly>年假余额不足</textarea>
98 
    </div>
70 99 
  </div>
71 100
101 
  <!-- 未审批使用 -->
72 102 
  <div class="ipu-flex-col">
73 103 
    <div class="ipu-flex ipu-flex-justify-end application-btns-wrap">
74 104 
      <button class="ipu-flex-grow-1 common-btn-short white ">驳回</button>

+ 0 - 43
2020/x/biz/js/common/public.js
View File 

@ -1,43 +0,0 @@
1 
define(["jquery"], function ($) {
2
3 
  // 扩展jquery增加一个回车的回调，不好的方便，不能取消绑定事件
4 
  $.fn.enter = function (back) {
5 
    $(this).on("keydown", function (e) { // 输入框是否有值
6 
      if (e.which == '13') {  // 回车事件
7 
        back.call(this);
8 
      }
9 
    });
10 
    return this;
11 
  };
12
13
14 
  $(function () {
15
16 
    // 搜索框交互部分
17 
    $(".common-search").each(function (i, obj) {
18 
      // 调用width()是为了让当前对元素的修改马上生效，默认应该是延迟生效，等待刷新时生效？
19 
      // 在获取元素宽度，高度时或位置时，会让前面，对dom的修改马上生效
20
21 
      $(".common-search-input", this).focus(function () { // 输入框激活时
22 
        $(obj).addClass("common-search-active");
23 
      });
24
25 
      $(".common-search-input", this).blur(function () { // 输入框未激活时
26 
        $(obj).removeClass("common-search-active");
27 
      });
28
29 
      $(".common-search-input", this).on("keyup keydown", function (e) { // 输入框是否有值
30 
        $(obj).toggleClass("common-search-value", $(this).val() != "").width();
31 
      });
32
33 
      $(".common-search-input-clear", this).click(function () { // 清除按钮
34 
        $(".common-search-input", obj).val("").focus();
35 
        $(obj).removeClass("common-search-value"); // .width();
36 
      });
37
38
39 
    });
40
41 
  });
42
43 
});

+ 83 - 0
2020/x/biz/js/common/tool.js
View File 

@ -0,0 +1,83 @@
1 
define(["jquery", "ipuUI"], function ($, ipuUI) {
2
3 
  // 扩展jquery增加一个回车的回调，不好的方便，不能取消绑定事件
4 
  $.fn.enter = function (back) {
5 
    $(this).on("keydown", function (e) { // 输入框是否有值
6 
      if (e.which == '13') {  // 回车事件
7 
        back.call(this);
8 
      }
9 
    });
10 
    return this;
11 
  };
12
13
14 
  $(function () {
15
16 
    // 搜索框交互部分
17 
    $(".common-search").each(function (i, obj) {
18 
      // 调用width()是为了让当前对元素的修改马上生效，默认应该是延迟生效，等待刷新时生效？
19 
      // 在获取元素宽度，高度时或位置时，会让前面，对dom的修改马上生效
20
21 
      $(".common-search-input", this).focus(function () { // 输入框激活时
22 
        $(obj).addClass("common-search-active");
23 
      });
24
25 
      $(".common-search-input", this).blur(function () { // 输入框未激活时
26 
        $(obj).removeClass("common-search-active");
27 
      });
28
29 
      $(".common-search-input", this).on("keyup keydown", function (e) { // 输入框是否有值
30 
        $(obj).toggleClass("common-search-value", $(this).val() != "").width();
31 
      });
32
33 
      $(".common-search-input-clear", this).click(function () { // 清除按钮
34 
        $(".common-search-input", obj).val("").focus();
35 
        $(obj).removeClass("common-search-value"); // .width();
36 
      });
37
38
39 
    });
40
41 
  });
42
43 
  var actionTpl = '<div class="ipu-actions-modal common-action">'
44 
    + '<div class="actions-modal-group-list">'
45 
    + ' <div class="actions-modal-group">'
46 
    + '   <div class="ipu-flex ipu-flex-align-center actions-modal-button" data-action="share">'
47 
    + '     <i class="actions-icon ri-share-box-line"></i>分享'
48 
    + '   </div>'
49 
    + '   <div class="ipu-flex ipu-flex-align-center actions-modal-button" data-action="addSchedule">'
50 
    + '     <i class="actions-icon ri-edit-box-line"></i>新增日程'
51 
    + '   </div>'
52 
    + ' </div>'
53 
    + ' <div class="actions-modal-group">'
54 
    + '   <div class="actions-modal-label" data-action="cancel">取消</div>'
55 
    + ' </div>'
56 
    + '</div>';
57
58 
  /**
59 
   *
60 
   * @param {Function} actionHandler 操作项回调函数
61 
   * @param {String} actionHandler.action 回调函数参数，操作项类型
62 
   */
63 
  function action(actionHandler) {
64 
    var modalEl = $(actionTpl).appendTo("body")[0];
65 
    ipuUI.openModal(modalEl);
66
67 
    function removeActionDialog() { // 关闭弹窗并移除遮掩绑定事件
68 
      ipuUI.closeModal(modalEl);
69 
      $(".ipu-modal-overlay").off("click", removeActionDialog);
70 
    }
71
72
73 
    $(".ipu-modal-overlay").on("click", removeActionDialog);     // 点击遮掩，移除弹框
74
75 
    $(".actions-modal-label, .actions-modal-button", modalEl).click(function () {
76 
      actionHandler && actionHandler($(this).data("action"));  // 有回调函数则调用回调函数
77 
      removeActionDialog();
78 
    });
79 
  }
80
81 
  return {action: action};
82
83 
});

+ 5 - 0
2020/x/biz/js/page/application-detail.js
View File 

@ -0,0 +1,5 @@
1 
require(["ipuUI", "jquery"], function (ipuUI, $) {
2 
  $(function () {
3
4 
  });
5 
});

+ 1 - 1
2020/x/biz/js/page/contact-picker.js
View File 

@ -1,4 +1,4 @@
1 
require(["ipuUI", "jquery", 'public'], function (ipuUI, $) {
1 
require(["ipuUI", "jquery", 'tool'], function (ipuUI, $, tool) {
2 2 
  // todo 增加没有头像处理，名字选1，做样式处理
3 3
4 4 
  $(function () {

+ 1 - 1
2020/x/biz/js/page/index.js
View File 

@ -1,4 +1,4 @@
1 
require(["ipuUI", "jquery", 'public'], function (ipuUI, $, public) {
1 
require(["ipuUI", "jquery", 'tool'], function (ipuUI, $, tool) {
2 2 
  $.sizeReady(function () {
3 3
4 4 
    // 页面公共逻辑

+ 3 - 7
2020/x/biz/js/page/message-detail.js
View File 

@ -1,14 +1,10 @@
1 
require(["ipuUI", "jquery"], function (ipuUI, $) {
1 
require(["ipuUI", "jquery", 'tool'], function (ipuUI, $, tool) {
2 2 
  $(function () {
3 3 
    // 分享功能，可能可以提取一下，别的页面复用
4 4 
    $(".toolbar-more-action").click(function () {
5 
      var modalEl = $($("#shareTpl").html()).appendTo("body")[0];
6 
      ipuUI.openModal(modalEl);
7
8 
      $(".actions-modal-label", modalEl).click(function () {
9 
        ipuUI.closeModal(modalEl);
5 
      tool.action(function (action) {
6 
        console.log(action);
10 7 
      });
11
12 8 
    });
13 9 
  });
14 10 
});

+ 10 - 0
2020/x/biz/js/page/task-detail.js
View File 

@ -0,0 +1,10 @@
1 
require(["ipuUI", "jquery", 'tool'], function (ipuUI, $, tool) {
2 
  $(function () {
3 
    // 分享功能，可能可以提取一下，别的页面复用
4 
    $(".toolbar-more-action").click(function () {
5 
      tool.action(function (action) {
6 
        console.log(action);
7 
      });
8 
    });
9 
  });
10 
});

+ 1 - 1
2020/x/biz/js/require-config.js
View File 

@ -14,7 +14,7 @@ require.config({
14 14 
    'FastClick': 'fastclick/fastclick',
15 15 
    'ipuUI': '../ui/js/ipuUI',
16 16
17 
    'public': '../../biz/js/common/public'
17 
    'tool': '../../biz/js/common/tool'
18 18 
  },
19 19 
  //缓存
20 20 
  waitSeconds: 0,  // js加载时长不限制，默认为7s，超过时长会报错

+ 0 - 17
2020/x/message-detail.html
View File 

@ -51,22 +51,5 @@
51 51 
  </div>
52 52 
</div>
53 53
54 
<script type="text/html" id="shareTpl">
55 
  <div class="ipu-actions-modal common-action">
56 
    <div class="actions-modal-group-list">
57 
    <div class="actions-modal-group">
58 
      <div class="ipu-flex ipu-flex-align-center actions-modal-button">
59 
        <i class="actions-icon ri-share-box-line"></i>分享
60 
      </div>
61 
      <div class="ipu-flex ipu-flex-align-center actions-modal-button">
62 
        <i class="actions-icon ri-share-box-line"></i>新增日程
63 
      </div>
64 
    </div>
65 
    <div class="actions-modal-group">
66 
      <div class="actions-modal-label">取消</div>
67 
    </div>
68 
  </div>
69 
</script>
70
71 54 
</body>
72 55 
</html>

+ 1 - 19
2020/x/task-detail.html
View File 

@ -11,7 +11,7 @@
11 11
12 12 
  <script src="ipu/lib/requirejs/require.js"></script>
13 13 
  <script src="biz/js/require-config.js"></script>
14 
  <script src="biz/js/page/message-detail.js"></script>
14 
  <script src="biz/js/page/task-detail.js"></script>
15 15 
</head>
16 16 
<body class="pages-task-detail">
17 17 
@ -111,23 +111,5 @@
111 111 
  </div>
112 112 
</div>
113 113
114
115 
<script type="text/html" id="shareTpl">
116 
  <div class="ipu-actions-modal common-action">
117 
    <div class="actions-modal-group-list">
118 
      <div class="actions-modal-group">
119 
        <div class="ipu-flex ipu-flex-align-center actions-modal-button">
120 
          <i class="actions-icon ri-share-box-line"></i>分享
121 
        </div>
122 
        <div class="ipu-flex ipu-flex-align-center actions-modal-button">
123 
          <i class="actions-icon ri-share-box-line"></i>新增日程
124 
        </div>
125 
      </div>
126 
      <div class="actions-modal-group">
127 
        <div class="actions-modal-label">取消</div>
128 
      </div>
129 
    </div>
130 
</script>
131
132 114 
</body>
133 115 
</html>