心通达OA便签模块前端开发说明

便签模块是心通达OA的一个简单入门模块,本文以开发过程视角,对心通达便签模块前端代码进行讲解,希望对研究心通达OA的爱好者有些指导和启示。心通达OA便签模块如下图所示:
心通达OA便签模块前端开发说明_第1张图片
页面HTML代码

<body onload="Initialization_load()">
<div class="dingbu">
       <div class="headImg">
            <img src="/img/commonTheme/${sessionScope.InterfaceModel}/bianqian.png" >
        div>
        <div class="divTitle">
            <fmt:message code="url.th.Note" />
        div>
div>
<div class="content">
    <div class="tishi" style="height: 100%;text-align: center;border: none;display: none">
        <div style="width:100%;padding-top:15%;"><img style="margin-top: 2%;text-align: center;" src="/img/noData.png" alt="">div>
        <h2 style="margin: auto;text-align: center;font-size: 20px;font-weight: normal;"><fmt:message code="doc.th.NoData" />h2>
    div>
div>
<br>
<button style="top: 6px;width: 100px;" id="but_ns" class=" btn_sps b_but b_new"><img style="margin-right: 3px" src="/img/mywork/newbuildworjk.png" alt=""><fmt:message code="adding.th.note" />button>

<div class="modal fade bs-example-modal-sm modal_bbb" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm">
        <div class="modal_cols" style="background-color:#c4ffc6">div>
        <div class="modal_cols" style="background-color:#ffaeab">div>
        <div class="modal_cols" style="background-color:#fffab6">div>
        <div class="modal_cols" style="background-color:#b2ebfe">div>
        <div class="modal_cols" style="background-color:#f0c3ff">div>
        <div class="modal_cols" style="background-color:#ffd1b0">div>
    div>
    <div class="new_con">
        <div class='bianqian' style='background-color: #000;width: 100%;height: 57px;position: absolute;top: 0;left: 0;opacity: 0.3;border-top-left-radius: 5px;border-top-right-radius: 5px;'>div>
        <textarea   class='new_content'>textarea>
        <div class="new_butt">
            <img src="/img/notes/gos_bc.png" title="保存" class="btn_1" onclick="new_btns(0)">
            <img src="/img/notes/gos_bc.png" title="保存" class="btn_9" onclick="new_btns(9)">
            <img src="/img/notes/gos_gb.png" title="关闭" class="btn_2" onclick="new_btns(1)">
        div>
    div>
div>
div>
body>

调用后台接口,初始化页面。根据后台标签数据,显示前端标签区域。

function Initialization_load() {
	var data = {
		page: 1,
		pageSize: 15,
		useFlag: true,
		timestamp: new Date().getTime()
	}
	$.ajax({
		'url': '/Notes/selectNotes',
		'type': 'get',
		'dataType': 'json',
		'data': data,
		success: function(rsp) {
			if (rsp.obj.length != 0) {
				var length = rsp.obj.length;
				var divstr = '';
				for (var i = 0; i < length; i++) {
					var color = rsp.obj[i].color;
					var colorol;
					if (color == 0) {
						colorol = "#c4ffc6"
					};
					if (color == 1) {
						colorol = "#ffaeab"
					};
					if (color == 2) {
						colorol = "#fffab6"
					};
					if (color == 3) {
						colorol = "#b2ebfe"
					};
					if (color == 4) {
						colorol = "#f0c3ff"
					};
					if (color == 5) {
						colorol = "#ffd1b0"
					};
					var content = rsp.obj[i].content;
					var uid = rsp.obj[i].uid;
					var noteId = rsp.obj[i].noteId;
					var timeStamp = rsp.obj[i].editTime;
					var time = new Date(timeStamp * 1000);
					var year = time.getFullYear(); //年
					var month = time.getMonth() + 1; //月
					var date = time.getDate(); //日
					var hour = time.getHours(); //时
					var minu = time.getMinutes(); //分
					var conds = time.getSeconds(); //秒
					var new_months;
					var new_dates;
					var new_hours;
					var new_minus;
					var new_condss;
					if (month < 10) {
						new_months = "0" + month
					} else {
						new_months = month;
					}
					if (date < 10) {
						new_dates = "0" + date
					} else {
						new_dates = date;
					}
					if (minu < 10) {
						new_minus = "0" + minu
					} else {
						new_minus = minu;
					}
					if (hour < 10) {
						new_hours = "0" + hour;
					} else {
						new_hours = hour;
					}
					if (conds < 10) {
						new_condss = "0" + conds;
					} else {
						new_condss = conds;
					}
					var str_time = year + "-" + new_months + "-" + new_dates;
					var str_hour = new_hours + ":" + new_minus + ":" + new_condss;
					var new_time = str_time + '       ' + str_hour;

					divstr += "<div class='yuan yuan" + noteId + "' style='margin:10px 12px;height:200px;width:200px;left:8px;background-color:" + colorol + ";float:left'>" + "<div style='background-color: #000;width: 100%;height: 44px;position: absolute;top: 0;left: 0;opacity: 0.3;border-top-left-radius: 15px;border-top-right-radius: 15px;'>" + "div>" + "<p style='position: relative;margin-top: 22px;left: 28px'>" + "<span class='title_time'>" + new_time + "span>" + "<span class='title_hms'style='display: none'>" + str_hour + "span>p>" + "<p class='textList contents' style='background-color:" + colorol + ";margin-top: 12px;padding-left: 12px;' style='width:90%;margin:0 auto'>" + content + "p>" + "<span class='span_bj' onclick='redact(this)' ><img src='/img/notes/gos_xxx.png' class='span_remove' onclick='removes(this)' >span>div>"
				}

				$(".content").html(divstr);

				gon_hover();
			} else {
				$('.tishi').css("display", "block");
			}
		}
	});
}

效果如下图
心通达OA便签模块前端开发说明_第2张图片
页面DOM加载完成后,用$(document).ready绑定事件

$(document).ready(function() {
  //对话框弹出
  $('.bs-example-modal-sm').on('show.bs.modal',
  function() {
    var arr = ["c4ffc6", "ffaeab", "fffab6", "b2ebfe", "f0c3ff", "ffd1b0"];
    var index = Math.floor((Math.random() * arr.length));
    $(".new_con").css("background-color", "#" + arr[index] + "");
    $(".new_con").find(".new_content").css("background-color", "#" + arr[index] + "");

    $(".new_content").val("");
    $(".new_con").show();
    $(".btn_1").show();
    $(".btn_9").hide();

    setTimeout(function() {
      $(".new_content").focus();
    },
    1000);
  });
  //点击新建调用模态太对话框
  $("#but_ns").click(function() {
    $('.bs-example-modal-sm').modal('show');
  });
  //换色
  $(".modal_cols").click(function() {
    colorb = $(this).css("background-color");
    $(".new_con").css("background-color", colorb);
    $(".new_con").find(".new_content").css("background-color", colorb);
  });
});

事件绑定后,点击后页面元素,出现如下编辑效果
心通达OA便签模块前端开发说明_第3张图片
本文说明了心通达OA开发前端页面的主体框架,其他保存、删除操作的前端代码,有兴趣的可以自行研究《心通达低代码开发平台》的便签模块前端源码。http://community.8oa.cn/forum.php?mod=viewthread&tid=2&extra=page%3D1

你可能感兴趣的:(心通达OA,javascript,html,ajax)