CoffeeScript编写简单新闻页(仅UI)
CoffeeScript编写简单新闻页(仅UI)
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中配置(稍后说明)。
- 格式仿照上文,不能随意写,否则不能识别。
- omnisocials-frontend/src/static/portal/modules/member/i18n/locate-zh_cn.json配置title,代码如下:
"member_myNews": "创建新闻",
- omnisocials-frontend/src/static/portal/modules/member/config.json配置state,代码如下:
"member-myNews",
- omnisocials-frontend/src/static/portal/modules/member/partials写页面右侧链接html页面,例如:myNews.html.
- omnisocials-frontend/src/static/portal/modules/member/styles写页面右侧链接html页面的样式代码,例如: myNews.css。
- omnisocials-frontend/src/static/portal/modules/member/index.scss 把css页面配到里面,这样html才会有样式。
- /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;
width: 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 {
width: 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;
width: 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
]
CoffeeScript编写简单新闻页(仅UI)的更多相关文章
- Python 利用Python编写简单网络爬虫实例3
利用Python编写简单网络爬虫实例3 by:授客 QQ:1033553122 实验环境 python版本:3.3.5(2.7下报错 实验目的 获取目标网站“http://bbs.51testing. ...
- Python 利用Python编写简单网络爬虫实例2
利用Python编写简单网络爬虫实例2 by:授客 QQ:1033553122 实验环境 python版本:3.3.5(2.7下报错 实验目的 获取目标网站“http://www.51testing. ...
- 学习 Linux,101: 自定义或编写简单脚本【转】
转自:http://www.ibm.com/developerworks/cn/linux/l-lpic1-105-2/index.html 学习如何使用标准的 shell 语法.循环和控制结构,以及 ...
- 编写简单的辅助脚本来在 Google 表格上记账
我的第二份工作入职在即,而这一次则真的是完全跑到了一个陌生的城市了.租房,购置相关用品,还尚未工作钱就花掉一堆.尽管我个人之前一直都没有过记账的习惯,但为了让自己能够搞清楚自己的钱都花在哪里了,于是还 ...
- 编写简单的ramdisk(选择IO调度器)
前言 目前linux中包含anticipatory.cfq.deadline和noop这4个I/O调度器.2.6.18之前的linux默认使用anticipatory,而之后的默认使用cfq.我们在前 ...
- 编写简单的Mapreduce程序并部署在Hadoop2.2.0上运行
今天主要来说说怎么在Hadoop2.2.0分布式上面运行写好的 Mapreduce 程序. 可以在eclipse写好程序,export或用fatjar打包成jar文件. 先给出这个程序所依赖的Mave ...
- android 学习随笔九(网络:简单新闻客户端实现)
1.简单新闻客户端 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xm ...
- 【转】用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程
原文链接:http://www.cnblogs.com/shuoer/p/7779131.html 用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程 首先解释下什么 ...
- SLAM+语音机器人DIY系列:(二)ROS入门——5.编写简单的消息发布器和订阅器
摘要 ROS机器人操作系统在机器人应用领域很流行,依托代码开源和模块间协作等特性,给机器人开发者带来了很大的方便.我们的机器人“miiboo”中的大部分程序也采用ROS进行开发,所以本文就重点对ROS ...
随机推荐
- 百度地图api设置点的自定义图标不显示
百度地图api设置点的设置代码为: var myIcon = new BMap.Icon(): 所以首先要找到这行代码,并在括号中加上图片信息: var myIcon = new BMap.Icon( ...
- 2019/10/27 TZOJ
1001 Gaussian Prime http://www.tzcoder.cn/acmhome/problemdetail.do?&method=showdetail&id=379 ...
- GB/T2659-2000《世界各国和地区名称代码》
代码 代码名称 004 阿富汗 008 阿尔巴尼亚 012 阿尔及利亚 016 美属萨摩亚 020 安道尔 024 安哥拉 660 安圭拉 010 南极洲 028 安提瓜和巴布达 032 阿根廷 05 ...
- Google XSS game writeup
用过Chrome的应该知道它的XSS Auditor,它可是灭掉了不少XSS代码呢……Google对XSS是很有研究的,不然也不敢大张旗鼓的悬赏(7500刀哦亲),还开发了一个XSS小游戏 http: ...
- Lambda -语法使用,代码简化
使用Lambda的方式实现线程 线程中()是run方法的(),可用来接受参数,格式: new Thread(()->{ System.out.println(Thread.currentThre ...
- jmeter 把返回数据写到文件
jmeter如何把返回数据写入到文件 作者:WhoisTester 2015-10-20 20:11 1. 首先我们可以使用 regular expression extractor 正则表达式 ...
- 耗时近一个月,终于录完了VUE.JS2.0前端视频教程!
这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束. vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了,学到 ...
- Python : Polymorphism
class Animal: def __init__(self, name): # Constructor of the class self.name = name def talk(self): ...
- 66.Subarray Sum Equals K(子数组和为K的个数)
Level: Medium 题目描述: Given an array of integers and an integer k, you need to find the total number ...
- Page.IsPostBack
ASP.NET页面的执行顺序说明:Page_Init(页面初始化引发的事件)——Page_Load(加载页面时引发的事件)——ControlEvent(服务器控件引发的事件)——Page_UnLoad ...