zoukankan      html  css  js  c++  java
  • CoffeeScript编写简单新闻页(仅UI)

    CoffeeScript编写简单新闻页(仅UI)

    1. 配置(在公司搭建好的环境下配置)

    1. omnisocials-backend/src/backend/modules/member/config/main.php文件夹下配置如下代码:
    [
        'order' => 6,
        'title' => 'member_myNews',
        'name' => 'myNews',
        'state' => 'member-myNews'
    ],
    
    • order: 每加一个页面order数值加一。
    • title: pc端左侧导航栏(链接右侧页面)title。
    • name: pc端左侧导航栏链接的右侧html页面名称。
    • state: omnisocials-frontend/src/static/portal/modules/member/config.json中配置(稍后说明)。
    • 格式仿照上文,不能随意写,否则不能识别。
    1. omnisocials-frontend/src/static/portal/modules/member/i18n/locate-zh_cn.json配置title,代码如下:
    "member_myNews": "创建新闻",
    
    1. omnisocials-frontend/src/static/portal/modules/member/config.json配置state,代码如下:
    "member-myNews",
    
    1. omnisocials-frontend/src/static/portal/modules/member/partials写页面右侧链接html页面,例如:myNews.html.
    2. omnisocials-frontend/src/static/portal/modules/member/styles写页面右侧链接html页面的样式代码,例如: myNews.css。
    3. omnisocials-frontend/src/static/portal/modules/member/index.scss 把css页面配到里面,这样html才会有样式。
    4. /home/user/omnisocials/omnisocials-frontend/src/static/portal/modules/member/controllers写coffee脚本。

    2. 各文件代码

    • myNews.html
    <div wm-breadcrumb="myNews.breadcrumb"></div>
    <form>
        <div>
            <div class="plate-category">
                <span class="required-sign">*</span><span class="required-content">新闻作者</span>
                <input type="text" />
            </div>
        </div>
        <div>
            <div class="plate-category">
                <span class="required-sign">*</span ><span class="required-content">新闻标题</span>
                <input type="text"/>
            </div>
        </div>
        <div>
            <div class="plate-category">
                <span class="required-sign">*</span><span class="required-content">新闻内容</span>
                <textarea class="textarea-filed"></textarea>
            </div>
        </div>
        <input class="submit-button" type="submit" value="保存"/>
    </form>
    
    • myNews.css
    $required-sign-color:red;
    $border-color:#e2e2e2;
    $submit-button-color:#fff;
    $submit-button-background-color:#37c3aa;
    
    body {
        font-size: 14px;
    }
    input {
        display: block;
         50%;
        height: 30px;
        border: 1px solid $border-color;
    }
    .plate-category {
        margin-top: 50px;
    }
    .required-sign {
            color: $required-sign-color;
    }
    
    .required-content {
            font-family: Arial,'Microsoft YaHei';
    }
    
    .textarea-filed {
         50%;
        height: 106px;
        padding: 10px;
        border: 1px solid $border-color;
        border-radius: 2px;
        resize: vertical;
        box-sizing: border-box;
        box-shadow: none;
        display: block;
    }
    
    .submit-button {
        color: $submit-button-color;
        background-color: $submit-button-background-color;
        border-color: transparent;
         10%;
        margin-top: 50px;
    }
    
    • myNewsCtrl.coffee
    define [
    'wm/app'
    'wm/config'
    ], (app, config) ->
    app.registerController 'wm.ctrl.member.myNews', [
        'restService'
        '$filter'
        '$location'
        'notificationService'
        'utilService'
        (restService, $filter, $location, notificationService, utilService) ->
        vm = this
        
        initBreadcrumb = ->
            vm.breadcrumb = [
            text: 'member_myNews'
            icon: 'statmember'
            ]
        init = ->
            initBreadcrumb()
        init()
        vm
    ]
  • 相关阅读:
    org.dom4j.DocumentException: null Nested exception: null
    严重: 文档无效: 找不到语法。 at (null:2:19)
    微信 群好友 的返回微信号 有阉割
    Perl 面向对象的真正意思
    门外汉怎么成就咨询大单(1)——北漂18年(39)
    Perl 微信模块--Weixin::Client
    Solr使用入门指南
    Perl 对象是函数的第一个参数
    haproxy 4层负载
    mysql 从读负载
  • 原文地址:https://www.cnblogs.com/sinceForever/p/7658473.html
Copyright © 2011-2022 走看看