最新消息:VPS服务器又从fzhost.net换回Linode了,主题仍用朋友推荐的大前端D8

【记录】Mac下用Eclipse去开发销售易的自定义页面代码开发

Eclipse crifan 263浏览 0评论

已经折腾了:

【记录】Mac下用Eclipse去开发销售易的自定义业务逻辑代码

后,再去:

试试自定义页面代码

先去参考示例写了代码,没有style的:

<code>&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt;
  &lt;title&gt;会议室预定&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div id="dialog" title="预定会议室" style="display: none;height:none"&gt;
    &lt;div class="container-fluid"&gt;
         &lt;div class="meeting-form col-sm-6 col-md-6 col-lg-4 col-md-offset-3 col-sm-offset-3 col-lg-offset-4"&gt;
            &lt;form act="save_meeting_form"&gt;
                &lt;input type="hidden" name="dimDepart" act="create_dim_depart"&gt;
                &lt;input type="hidden" name="entityType" act="create_entity_type"&gt;
                &lt;input type="hidden" name="meetingRoom" act="create_meetingRoom"&gt;
                &lt;input type="hidden" name="ownerId" act="create_ownerId"&gt;
                &lt;label&gt;会议室名称 &lt;/label&gt; &lt;input type="text" disabled="disabled" act="create_room_name"&gt;&lt;br&gt;
                &lt;label&gt;会议用途&lt;/label&gt; &lt;input type="text" name="name"&gt;&lt;br&gt;
                &lt;label&gt;预定日期&lt;/label&gt; &lt;input type="date" act="create_begin_time"&gt;&lt;br&gt;
                &lt;label&gt;开始时间&lt;/label&gt; &lt;input type="time" act="create_begin_time_time"&gt;&lt;br      
                &lt;label&gt;持续 : &lt;select act="create_continued"&gt;
                        &lt;option value="30"&gt;30分钟&lt;/option&gt;
                        &lt;option value="60"&gt;1小时&lt;/option&gt;
                        &lt;option value="120"&gt;2小时&lt;/option&gt;
                        &lt;option value="180"&gt;3小时&lt;/option&gt;
                        &lt;option value="240"&gt;4小时&lt;/option&gt;
                        &lt;option value="300"&gt;5小时&lt;/option&gt;
                        &lt;option value="360"&gt;6小时&lt;/option&gt;
                        &lt;option value="720"&gt;全天&lt;/option&gt;
                &lt;/select&gt;&lt;br&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
&lt;/body&gt;

</code>

先去试试效果

 去打开

https://lapp.ingageapp.com/4aa7/1696/meeting/meetingroom.html

看看

是空白的,但是有源码的。

加了style,貌似代码本身也没有效果的:

<code>&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt;
  &lt;title&gt;会议室预定&lt;/title&gt;
  &lt;style type="text/css"&gt;
    * {
      font-family: "微软雅黑";
    }

    body {
      margin: 0;
      padding: 0;
      font-family: "微软雅黑";      
    }

    .header {
      width: 100%;
      border-bottom: 1px solid #cfdae5;
      padding-bottom: 10px;
    }

    .content {
      width: 100%;
      overflow: auto;
    }

  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div id="dialog" title="预定会议室" style="display: none;height:none"&gt;
    &lt;div class="container-fluid"&gt;
         &lt;div class="meeting-form col-sm-6 col-md-6 col-lg-4 col-md-offset-3 col-sm-offset-3 col-lg-offset-4"&gt;
            &lt;form act="save_meeting_form"&gt;
                &lt;input type="hidden" name="dimDepart" act="create_dim_depart"&gt;
                &lt;input type="hidden" name="entityType" act="create_entity_type"&gt;
                &lt;input type="hidden" name="meetingRoom" act="create_meetingRoom"&gt;
                &lt;input type="hidden" name="ownerId" act="create_ownerId"&gt;
                &lt;label&gt;会议室名称 &lt;/label&gt; &lt;input type="text" disabled="disabled" act="create_room_name"&gt;&lt;br&gt;
                &lt;label&gt;会议用途&lt;/label&gt; &lt;input type="text" name="name"&gt;&lt;br&gt;
                &lt;label&gt;预定日期&lt;/label&gt; &lt;input type="date" act="create_begin_time"&gt;&lt;br&gt;
                &lt;label&gt;开始时间&lt;/label&gt; &lt;input type="time" act="create_begin_time_time"&gt;&lt;br      
                &lt;label&gt;持续 : &lt;select act="create_continued"&gt;
                        &lt;option value="30"&gt;30分钟&lt;/option&gt;
                        &lt;option value="60"&gt;1小时&lt;/option&gt;
                        &lt;option value="120"&gt;2小时&lt;/option&gt;
                        &lt;option value="180"&gt;3小时&lt;/option&gt;
                        &lt;option value="240"&gt;4小时&lt;/option&gt;
                        &lt;option value="300"&gt;5小时&lt;/option&gt;
                        &lt;option value="360"&gt;6小时&lt;/option&gt;
                        &lt;option value="720"&gt;全天&lt;/option&gt;
                &lt;/select&gt;&lt;br&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
&lt;/body&gt;

</code>

去看看更新后的效果。

https://lapp.ingageapp.com/4aa7/1696/meeting/meetingroom.html

去改style代码后,页面可以显示了:

所以去改源码。

然后通过:

container-fluid

和:

col-sm-6

之类的写法,知道了:

示例代码中用的是bootstrap

所以去加上bootstrap

然后去:

起步 · Bootstrap v3 中文文档

引用bootstrap 3

再去:

http://www.bootcdn.cn

找jquery

http://www.bootcdn.cn/jquery/

参考:

全局 CSS 样式 · Bootstrap v3 中文文档

去写form表单

最后代码是:

<code>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt;
  &lt;title&gt;会议室预定&lt;/title&gt;

  &lt;!-- &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"; integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"; integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"&gt;&lt;/script&gt;

  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"; integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"; integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"&gt;&lt;/script&gt; --&gt;

  &lt;script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;;

  &lt;!-- 最新版本的 Bootstrap 核心 CSS 文件 --&gt;
  &lt;link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"; integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;!-- 可选的 Bootstrap 主题文件(一般不用引入) --&gt;
  &lt;link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"; integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  &lt;!-- 最新的 Bootstrap 核心 JavaScript 文件 --&gt;
  &lt;script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"; integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;

  &lt;!-- &lt;style type="text/css"&gt;
    * {
      font-family: "微软雅黑";
    }

    body {
      margin: 0;
      padding: 0;
      font-family: "微软雅黑";      
    }

    .header {
      width: 100%;
      border-bottom: 1px solid #cfdae5;
      padding-bottom: 10px;
    }

    .content {
      width: 100%;
      overflow: auto;
    }

  &lt;/style&gt; --&gt;

&lt;/head&gt;

&lt;body&gt;
  &lt;div id="dialog" title="预定会议室" style="height:800px;"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;div class="meeting-form col-sm-6 col-md-6 col-lg-4 col-md-offset-3 col-sm-offset-3 col-lg-offset-4"&gt;
          &lt;form act="save_meeting_form" class="form-inline"&gt;
              &lt;input type="hidden" name="dimDepart" act="create_dim_depart"&gt;
              &lt;input type="hidden" name="entityType" act="create_entity_type"&gt;
              &lt;input type="hidden" name="meetingRoom" act="create_meetingRoom"&gt;
              &lt;input type="hidden" name="ownerId" act="create_ownerId"&gt;
              &lt;!-- &lt;label&gt;会议室名称 &lt;/label&gt; &lt;input type="text" disabled="disabled" act="create_room_name"&gt;&lt;br&gt; --&gt;
              &lt;fieldset class="form-group"&gt;
                &lt;label for="meetingRoomName"&gt;会议室名称&lt;/label&gt;
                &lt;input type="text" class="form-control" id="meetingRoomName" placeholder="请输入会议室名称"&gt;
              &lt;/fieldset&gt;

              &lt;!-- &lt;label&gt;会议用途&lt;/label&gt; &lt;input type="text" name="name"&gt;&lt;br&gt; --&gt;
              &lt;fieldset class="form-group"&gt;
                &lt;label for="meetingPurpose"&gt;会议室用途&lt;/label&gt;
                &lt;input type="text" class="form-control" id="meetingPurpose" placeholder="请输入会议室用途"&gt;
              &lt;/fieldset&gt;

              &lt;!-- &lt;label&gt;预定日期&lt;/label&gt; &lt;input type="date" act="create_begin_time"&gt;&lt;br&gt; --&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="meetingOrderDate"&gt;预定日期&lt;/label&gt;
                &lt;input type="date" class="form-control" id="meetingOrderDate" placeholder="请输入预定日期"&gt;
              &lt;/div&gt;

              &lt;!-- &lt;label&gt;开始时间&lt;/label&gt; &lt;input type="time" act="create_begin_time_time"&gt;&lt;br       --&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="meetingStartTime"&gt;开始时间&lt;/label&gt;
                &lt;input type="time" class="form-control" id="meetingStartTime" placeholder="请输入开始时间" act="create_begin_time_time"&gt;
              &lt;/div&gt;

              &lt;div class="form-group"&gt;
                &lt;label for="duration"&gt;持续&lt;/label&gt;
                &lt;select class="form-control" act="create_continued"&gt;
                    &lt;option value="30"&gt;30分钟&lt;/option&gt;
                    &lt;option value="60"&gt;1小时&lt;/option&gt;
                    &lt;option value="120"&gt;2小时&lt;/option&gt;
                    &lt;option value="180"&gt;3小时&lt;/option&gt;
                    &lt;option value="240"&gt;4小时&lt;/option&gt;
                    &lt;option value="300"&gt;5小时&lt;/option&gt;
                    &lt;option value="360"&gt;6小时&lt;/option&gt;
                    &lt;option value="720"&gt;全天&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              
              &lt;div class="form-group"&gt;
                &lt;div class="col-sm-offset-2 col-sm-10"&gt;
                  &lt;button type="submit" class="btn btn-primary"&gt;提交&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
&lt;/body&gt;

&lt;/html&gt;
</code>

效果:

https://lapp.ingageapp.com/4aa7/1696/meeting/meetingroom.html

但是总体逻辑是这样的。

抽空可以继续优化。

转载请注明:在路上 » 【记录】Mac下用Eclipse去开发销售易的自定义页面代码开发

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
60 queries in 0.249 seconds, using 12.05MB memory