├── 组件.rar ├── groot-1.1.js ├── groot-1.11.js ├── groot-1.1.min.js ├── groot-1.11.min.js ├── Demo ├── images │ ├── cover.png │ └── peter-avatar.jpg ├── font │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.ttf │ └── fontawesome-webfont.woff ├── templete │ ├── foot.html │ └── head.html ├── README.md ├── UIComponent │ ├── list.js │ └── list.html ├── list.html ├── css │ └── ui.css ├── table.html ├── sample.html └── js │ └── ui.js ├── 针对研究代码者的精简版本 ├── index.html ├── object.html ├── list.html └── groot.js ├── README.md ├── groot-1.0-min.js ├── groot-2.0-min.js └── groot-1.0.js /组件.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/time-go/grootJs/HEAD/组件.rar -------------------------------------------------------------------------------- /groot-1.1.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/time-go/grootJs/HEAD/groot-1.1.js -------------------------------------------------------------------------------- /groot-1.11.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/time-go/grootJs/HEAD/groot-1.11.js -------------------------------------------------------------------------------- /groot-1.1.min.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/time-go/grootJs/HEAD/groot-1.1.min.js -------------------------------------------------------------------------------- /groot-1.11.min.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/time-go/grootJs/HEAD/groot-1.11.min.js -------------------------------------------------------------------------------- /Demo/images/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/time-go/grootJs/HEAD/Demo/images/cover.png -------------------------------------------------------------------------------- /Demo/font/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/time-go/grootJs/HEAD/Demo/font/FontAwesome.otf -------------------------------------------------------------------------------- /Demo/images/peter-avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/time-go/grootJs/HEAD/Demo/images/peter-avatar.jpg -------------------------------------------------------------------------------- /Demo/font/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/time-go/grootJs/HEAD/Demo/font/fontawesome-webfont.eot -------------------------------------------------------------------------------- /Demo/font/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/time-go/grootJs/HEAD/Demo/font/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /Demo/font/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/time-go/grootJs/HEAD/Demo/font/fontawesome-webfont.woff -------------------------------------------------------------------------------- /Demo/templete/foot.html: -------------------------------------------------------------------------------- 1 |
2 |
Copyright © time-go
3 |
前端代码示例
4 |
-------------------------------------------------------------------------------- /Demo/README.md: -------------------------------------------------------------------------------- 1 | 说明 2 | ======= 3 | 里面包含了一些grootjs的应用个最新的一些实验性质的东西;需放在服务器上预览 4 | 5 | + 1.list.htm 里面包含了最新groot.UIComponent的用法;UIComponenternt文件夹里放置了模块实现代码和分页控件 6 | + 2.sample.html文件里面包含了groot.imcrop的运用,一个图片才裁剪的demo,还有日历控件 7 | + 3.table.html 里面主要是弹窗 groot.page的运用有三个参数,这里把sample.html作为了一个弹窗 8 | 9 | 四个向父窗口传递消息的函数 10 | 11 | + 1.groot.msg.render();重新计算弹窗的大小 12 | + 2.groot.msg.show();显示弹窗 13 | + 3.groot.msg.close(); 关闭弹窗 14 | + 4.groot.msg.send(); 向父窗口发送消息,groot.page的回调函数里接受到发来的消息 -------------------------------------------------------------------------------- /针对研究代码者的精简版本/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GrootJs双向绑定实现 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /针对研究代码者的精简版本/object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GrootJs双向绑定实现 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Demo/UIComponent/list.js: -------------------------------------------------------------------------------- 1 | exports.UIComponent = function (element, id, data) { 2 | groot.createElement(require("list.html!text"), id, element); 3 | var m = groot.view(id, function (vm, ve) { 4 | vm.list = data; 5 | ve.upSex = function ($self) {//修改性别 6 | $self.sexState = true; 7 | $self.sexStateRender(); 8 | } 9 | ve.submitSex = function ($self) {//保存修改 10 | $self.sexState = false; 11 | $self.sexStateRender(); 12 | } 13 | ve.upInfo = function ($self) {//修改简介 14 | $self.infoState = true; 15 | $self.sexStateRender(); 16 | } 17 | ve.submitInfo = function ($self) {//保存修改 18 | $self.infoState = false; 19 | $self.sexStateRender(); 20 | } 21 | ve.remove = function ($self) {//删除 22 | groot.confrim("温馨提示", "确认要删除吗?", function () { 23 | vm.listsplice($self.$index, 1); 24 | }) 25 | } 26 | 27 | ve.wh = function ($self, value) { 28 | console.log(value); 29 | } 30 | }) 31 | var page = groot.paging($("#page"), function (p) { 32 | console.log(p); 33 | page(p, 15) 34 | }) 35 | page(9, 15); 36 | return { 37 | push: function (data) { 38 | m.listpush(data); 39 | } 40 | } 41 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | GrootJs 前端mvvm框架 2 | ======= 3 | ###名称来源 4 | 名字取 grass 和root 两个单词的组合,既“草根”之意。在创作的中,本着尽量简单实用的原则构思完成的 5 | 6 | ###GrootJs不同于其他mvvm的三大亮点: 7 | 8 | 1. model模型自动回收。在框架中加入了垃圾回收机制,程序员不回再为了因不断创建大量model不能回收, 9 | 或不便于回收造成内存占用太高而烦恼 10 | 11 | 2. 全新的变量值变化监模型,改善其他mvvm框架对一些动态数组中得变量变化不便于监控的问题 12 | 13 | 3. 全新的ui控件开发接口,使控件的值和页面页面模型的值实现同步,操作开发的控件时 就像操作html内置控件一样 14 | 15 | ###联系方式和技术支持 16 | 17 | + 作者联系方式:qq289880020 18 | + 官方技术支持QQ群330603020 19 | + 官网地址http://time-go.github.io/grootJs 20 | + 升级版QC http://time-go.github.io/qc 21 | 22 | ### 发布历史 23 | + 2015-08-04 grootjs 第一个稳定版本1.0发布 24 | + 2015-12-21 grootjs 1.1版本发布(此版本在原来的基础上进一步对框架性能做了优化) 25 | + 2016-01-04 grootjs 1.11版本发布(修正特殊字符"\0"的bug) 26 | + 2016-01-06 grootjs 2.0版本发布 27 | 28 | ### 关于精简版GrootJs版本 29 | 精简版的是针对研究代码的人单独写的,只保留了最精华的功能,加注释只有142代码。功能: 30 | + 1.单属性的绑定 31 | + 2.支持text类型的input 32 | + 3.支持绑定对象 33 | + 4.支持数组绑定 对数组的包装只有xxxpush 34 | 35 | 36 | ### 关于GrootJs2.0新功能 37 | + 1.增加gt-prop指令,用于绑定readonly等类似属性 38 | + 2.增加groot.UIComponent 更方便的进行组件化开发 39 | + 3.gt-ui 改为gt-widget 40 | + 4.在官网的在线示例里封装iframe的用法http://time-go.github.io/grootJs/Demo/ 41 | 42 | ### iframe弹窗函数groot.page(title,url,callback),四个辅助函数 43 | + groot.msg.render();重新计算弹窗的大小 44 | + groot.msg.show() 45 | + groot.msg.close()关闭窗体 46 | + groot.msg.send(); 向父窗口发送消息,groot.page的回调函数里接受到发来的消息 47 | 48 | ### groot.page特点 49 | + 可以和子窗口互动 50 | + 弹窗里面嵌套弹窗不会有子弹窗卡在父弹窗出不来的问题 51 | -------------------------------------------------------------------------------- /针对研究代码者的精简版本/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GrootJs双向绑定实现 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /Demo/templete/head.html: -------------------------------------------------------------------------------- 1 |
2 | 40 |
-------------------------------------------------------------------------------- /Demo/UIComponent/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 23 | 31 | 38 | 39 | 40 |
头像性别简介操作
14 | 15 | 19 | 修改 20 | 确定 21 | 取消 22 | 24 | 25 | 修改 26 | 28 | 确定 29 | 取消 30 | 32 | 33 | 34 | 35 | 36 | 37 |
41 |
42 | 43 |
44 | 45 | -------------------------------------------------------------------------------- /Demo/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 前端模版 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 |
19 |
20 | 26 |
27 |
28 |
29 |
30 | 31 | 32 |
33 |
34 |
35 |
36 |
37 |
查询
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
新增
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /针对研究代码者的精简版本/groot.js: -------------------------------------------------------------------------------- 1 | var groot = (function ($) { 2 | var PREFIX = "gt"; 3 | var RENDEAR = "Render"; 4 | //---------------初始化对象----------------// 5 | var groot = {}; 6 | groot.vms = {};//储存vm所有对象 7 | groot.view = function (name, factory) { 8 | groot.vms[name] = {}; 9 | factory(groot.vms[name]);//vm对象 10 | groot.sweep(groot.vms[name], $("[" + PREFIX + "-view='" + name + "']")); 11 | return groot.vms[name]; 12 | } 13 | 14 | //---------------扫描事件----------------// 15 | // 没有参数扫描所有,2个参数 扫面指定的 vn 和 html片段// 16 | //-------------------------------// 17 | groot.sweep = function (vm, element) { 18 | _bindData(vm, element); 19 | } 20 | //---------------私有函数-----------------// 21 | function _bindData(vm, element) { 22 | function findArr(p) { 23 | var _eltArrs = element.find("[" + PREFIX + "-each='" + pro + "']:eq(0)").removeAttr(PREFIX + "-each"); 24 | if (_eltArrs.length > 0) { 25 | vm["$$arr" + pro] = {"element": _eltArrs, "templ": _eltArrs.html()}; 26 | _eltArrs.html(""); 27 | } 28 | } 29 | 30 | function findObj(p) { 31 | var _eltObjcts = element.find("[" + PREFIX + "-object='" + pro + "']:eq(0)").removeAttr(PREFIX + "-object"); 32 | if (_eltObjcts.length > 0) { 33 | vm["$$obj" + pro] = {"element": _eltObjcts, "templ": _eltObjcts.html()}; 34 | _eltObjcts.html(""); 35 | } 36 | } 37 | 38 | for (var pro in vm) {//保存数组对象模板 39 | if (!$.isFunction(vm[pro]) && pro.indexOf("$$") < 0) { 40 | if ($.isArray(vm[pro])) {//数组 41 | findArr(pro); 42 | } else if (typeof vm[pro] == "object") {//对象; 43 | findObj(pro); 44 | } 45 | } 46 | } 47 | for (var pro in vm) {//初始化对象 48 | if (!$.isFunction(vm[pro]) && pro.indexOf("$$") < 0) { 49 | if ($.isArray(vm[pro])) {//绑定数组 50 | _bindingArry(vm, pro); 51 | } else if (typeof vm[pro] == "object") { 52 | _bindingObject(vm, pro);//绑定对象 53 | } else {//绑定属性 54 | _bindingProperty(element, vm, pro); 55 | } 56 | } 57 | } 58 | } 59 | 60 | /* 61 | @vm 绑定的数据模型 62 | @pro 要绑定的属性 63 | * */ 64 | function _bindingObject(vm, pro) { 65 | var _temp = vm["$$obj" + pro]; 66 | _temp.element.html(_temp.templ); 67 | _bindData(vm[pro], _temp.element); 68 | vm[pro + RENDEAR] = function () { 69 | var _temp = vm["$$obj" + pro]; 70 | _temp.element.html(_temp.templ); 71 | _bindData(vm[pro], _temp.element); 72 | }; 73 | } 74 | 75 | /* 76 | @element html元素 77 | @vm 绑定的数据模型 78 | @pro 要绑定的属性 79 | * */ 80 | function _bindingProperty(element, vm, pro) { 81 | var _eltText = element.find("[" + PREFIX + "-text^='" + pro + "']").html(vm[pro]).removeAttr(PREFIX + "-text");; 82 | var _eltChange = element.find("[" + PREFIX + "-value-change='" + pro + "']").val(vm[pro]).removeAttr(PREFIX + "-value-change"); 83 | _eltChange.bind("input propertychange keyup", function () { 84 | vm[pro] = $(this).val(); 85 | vm[pro + RENDEAR](); 86 | }); 87 | vm[pro + RENDEAR] = function () { 88 | var value = vm[pro]; 89 | _eltText.html(value); 90 | _eltChange.each(function () { 91 | if (document.activeElement !== this) { 92 | $(this).val(value); 93 | } 94 | }) 95 | }; 96 | } 97 | 98 | /*绑定数组 99 | @element html元素 100 | @vm 绑定的数据模型 101 | @pro 要绑定的属性 102 | * */ 103 | function _bindingArry(vm, pro) { 104 | _initArry(vm, pro); 105 | vm[pro + RENDEAR] = function () { 106 | if (arguments.length > 0) { 107 | var element = vm["$$child" + pro][arguments[0]]; 108 | var _arr = vm["$$arr" + pro]; 109 | var _newElement = $(_arr.templ).insertBefore(element); 110 | element.remove(); 111 | vm["$$child" + pro][arguments[0]] = _newElement; 112 | _bindData(vm[pro][arguments[0]], _arr.element); 113 | } else { 114 | _initArry(vm, pro); 115 | } 116 | } 117 | } 118 | 119 | function _initArry(vm, pro) { 120 | vm["$$child" + pro] = []; 121 | var _temp = vm["$$arr" + pro]; 122 | _temp.element.html(""); 123 | for (var i = 0; i < vm[pro].length; i++) { 124 | if (!$.isFunction(vm[pro]) && pro.indexOf("$$") < 0) { 125 | var _child = $(_temp.templ); 126 | _temp.element.append(_child); 127 | _bindData(vm[pro][i],_child); 128 | vm["$$child" + pro].push(_child); 129 | } 130 | } 131 | vm[pro + "push"] = function (value) { 132 | vm[pro].push(value); 133 | var _temp = vm["$$arr" + pro]; 134 | var _child = $(_temp.templ); 135 | _temp.element.append(_child); 136 | _bindData(value, _temp.element); 137 | vm["$$child" + pro].push(_child); 138 | } 139 | } 140 | return groot; 141 | }) 142 | (jQuery); -------------------------------------------------------------------------------- /Demo/css/ui.css: -------------------------------------------------------------------------------- 1 | 2 | /*t弹出框通用样式*/ 3 | .pop-bg { 4 | position: fixed; 5 | top: 0; 6 | left: 0; 7 | right: 0; 8 | bottom: 0; 9 | background: black; 10 | opacity: 0.5; 11 | z-index: 2; 12 | } 13 | 14 | .pop-container { 15 | transform: scale(0, 0); 16 | -webkit-transform: scale(0, 0); 17 | opacity: 0; 18 | -webkit-opacity: 0; 19 | position: absolute; 20 | top: 0; 21 | left: 0; 22 | z-index: 3; 23 | } 24 | 25 | .pop-container-animate { 26 | transition-property: left, top, opacity, -webkit-opacity, -moz-opacity, -o-opacity, Transform, -webkit-Transform, -o-Transform, -moz-Transform; 27 | transition-duration: .3s; 28 | transition-timing-function: ease; 29 | } 30 | 31 | /*图片裁剪*/ 32 | .imcrop { 33 | width: 635px; 34 | } 35 | 36 | .imcrop .middle { 37 | width: 100%; 38 | height: 310px; 39 | position: relative; 40 | padding: 15px; 41 | box-sizing: border-box; 42 | } 43 | 44 | .imcrop .imgbig0 { 45 | width: 280px; 46 | height: 280px; 47 | position: absolute; 48 | top: 15px; 49 | left: 15px; 50 | border: 1px solid #d8d8d8; 51 | } 52 | 53 | .imcrop .imgbig0-bg { 54 | display: block; 55 | border-width: 0; 56 | position: absolute; 57 | width: 100%; 58 | height: 100%; 59 | z-index: 2; 60 | top: 0; 61 | left: 0; 62 | right: 0; 63 | bottom: 0; 64 | background-color: #ddd; 65 | opacity: 0.5; 66 | } 67 | 68 | .imcrop .imgcrop-bg { 69 | width: 280px; 70 | height: 280px; 71 | position: absolute; 72 | top: 15px; 73 | left: 315px; 74 | } 75 | 76 | .imcrop .img3 { 77 | display: block; 78 | border-width: 0; 79 | position: absolute; 80 | z-index: 3; 81 | overflow: hidden; 82 | background-color: white; 83 | border: 2px solid #E4EAEF; 84 | } 85 | 86 | .imcrop .img3 img { 87 | position: absolute; 88 | display: block; 89 | border-width: 0; 90 | } 91 | 92 | .imcrop .img1 { 93 | display: block; 94 | border-width: 0; 95 | position: absolute; 96 | z-index: 1; 97 | } 98 | 99 | .imcrop .img2 { 100 | display: block; 101 | border-width: 0; 102 | position: absolute; 103 | z-index: 3; 104 | overflow: hidden; 105 | border: 1px dashed #767676; 106 | background-color: white; 107 | cursor: move; 108 | } 109 | 110 | .imcrop .rightup { 111 | width: 20px; 112 | height: 20px; 113 | position: absolute; 114 | right: 0; 115 | bottom: 0; 116 | cursor: se-resize; 117 | z-index: 4; 118 | } 119 | 120 | .imcrop .img2 img { 121 | position: absolute; 122 | display: block; 123 | border-width: 0; 124 | } 125 | 126 | .imcrop .imgbig0 { 127 | 128 | } 129 | 130 | .imcrop canvas { 131 | display: none; 132 | } 133 | 134 | .imcrop .post { 135 | position: absolute; 136 | top: 0; 137 | left: 0; 138 | width: 100%; 139 | height: 100%; 140 | z-index: 7; 141 | opacity: 0.2; 142 | background-color: black; 143 | } 144 | 145 | .imcrop .ptext { 146 | position: absolute; 147 | top: 46%; 148 | left: 50%; 149 | font-size: 16px; 150 | margin-left: -48px; 151 | z-index: 8; 152 | background-color: white; 153 | color: #666666; 154 | } 155 | 156 | .no-select { 157 | moz-user-select: -moz-none; 158 | -moz-user-select: none; 159 | -o-user-select: none; 160 | -khtml-user-select: none; 161 | -webkit-user-select: none; 162 | -ms-user-select: none; 163 | user-select: none; 164 | } 165 | 166 | ::-webkit-scrollbar-track { 167 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); 168 | } 169 | 170 | ::-webkit-scrollbar { 171 | width: 8px; 172 | height: 6px; 173 | } 174 | 175 | ::-webkit-scrollbar-thumb { 176 | border-radius: 3px; 177 | background: rgba(0, 0, 0, 0.2); 178 | } 179 | 180 | .calendar { 181 | display: inline-block; 182 | position: relative 183 | } 184 | 185 | .calendar div.dialog { 186 | padding: 7px 5px 5px 5px; 187 | position: absolute; 188 | min-height: 100px; 189 | width: 236px; 190 | left: 0; 191 | top: 33px; 192 | z-index: 1; 193 | } 194 | 195 | .calendar .weeks span { 196 | display: block; 197 | width: 14.28%; 198 | text-align: center; 199 | font-weight: bold; 200 | float: left; 201 | } 202 | 203 | .calendar .days span { 204 | width: 32px; 205 | text-align: center; 206 | float: left; 207 | line-height: 32px; 208 | height: 32px; 209 | border-radius: 4px; 210 | } 211 | 212 | .calendar .btns span { 213 | margin-left: 5px; 214 | } 215 | 216 | .calendar .input-group { 217 | width: 237px; 218 | } 219 | 220 | .calendar .icon-arrow-left, .calendar .icon-arrow-right { 221 | cursor: pointer; 222 | border-radius: 4px; 223 | } 224 | 225 | .calendar .icon-arrow-left:hover, .calendar .icon-arrow-right:hover { 226 | background-color: #f4f4f4; 227 | } 228 | 229 | .calendar .other { 230 | cursor: pointer; 231 | } 232 | 233 | .calendar .other:hover { 234 | background-color: #f4f4f4; 235 | } 236 | 237 | .calendar .bg-main { 238 | } 239 | 240 | .calendar .active { 241 | color: #0ae !important; 242 | background-color: #eff !important; 243 | cursor: default; 244 | } 245 | 246 | .calendar .active :hover { 247 | color: #0ae !important; 248 | background-color: #eff !important; 249 | } 250 | 251 | .calendar .nomonth { 252 | cursor: pointer; 253 | color: #999999;; 254 | } 255 | 256 | .calendar .nomonth:hover { 257 | background-color: #f4f4f4; 258 | } 259 | 260 | .calendar select { 261 | border-radius: 4px; 262 | scrollbar-face-color: #FFFFFF; 263 | scrollbar-shadow-color: #C1C1BB; 264 | scrollbar-highlight-color: #C1C1BB; 265 | scrollbar-3dlight-color: #EBEBE4; 266 | scrollbar-darkshadow-color: #EBEBE4; 267 | scrollbar-track-color: #F4F4F0; 268 | scrollbar-arrow-color: #CACAB7; 269 | color: #666666; 270 | } 271 | 272 | /* 273 | .calendar select::-webkit-scrollbar { 274 | width:10px; 275 | height:10px; 276 | } 277 | */ 278 | 279 | .calendar input[readonly] { 280 | background-color: white; 281 | cursor: default; 282 | } 283 | 284 | .calendar .dialog { 285 | display: none; 286 | } 287 | 288 | .pages li[page] { 289 | cursor: pointer; 290 | } 291 | 292 | .pages .disabled a { 293 | color: #999999; 294 | background-color: white; 295 | cursor: default; 296 | } 297 | 298 | .pages .disabled a:hover { 299 | color: #999999; 300 | background-color: white; 301 | cursor: default; 302 | } 303 | 304 | .pages .active a { 305 | color: #0ae !important; 306 | background-color: #eff !important; 307 | } 308 | 309 | .pages .active:hover a { 310 | color: #0ae !important; 311 | background-color: #eff !important; 312 | } 313 | -------------------------------------------------------------------------------- /Demo/table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 前端模版 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 |
20 |
21 | 27 |
28 |
29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 |
37 |
38 |
查询
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
新增
47 |
信息提示
48 |
弹窗
49 |
50 |
51 |
52 |
53 |
54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 76 | 84 | 91 | 92 | 93 |
头像性别简介操作
67 | 68 | 72 | 修改 73 | 确定 74 | 取消 75 | 77 | 78 | 修改 79 | 81 | 确定 82 | 取消 83 | 85 | 86 | 87 | 88 | 89 | 90 |
94 |
95 |
96 | 97 |
98 |
99 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /Demo/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 前端模版 9 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 37 |
38 |
39 | 45 |
46 |
47 |
48 |
49 | 50 |
51 |
52 |
53 | 54 | 55 |
56 |
57 |
58 |
59 |
60 | 61 |
62 |
63 | 64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 | 72 |
73 |
74 |
75 |
76 | 77 |
78 |
79 | 80 | 按钮 81 |
82 |
83 |
84 |
85 | 86 |
87 |
88 |
89 | 90 | 91 |
92 |
93 |
94 | 95 |
96 |
97 | 98 |
99 |
100 |
101 | 104 | 107 |
108 |
109 |
110 |
111 |
112 | 113 |
114 |
115 |
116 | 119 | 122 | 125 | 128 | 131 | 132 |
133 |
134 |
135 | 136 |
137 |
138 | 139 |
140 |
141 | 146 |
147 |
148 |
149 |
150 | 151 |
152 |
153 | 155 |
156 |
157 |
158 |
159 | 160 |
161 |
162 |
163 |
张三
164 |
张三
165 |
张三
166 |
张三
167 |
张三
168 |
张三
169 |
张三
170 |
张三
171 |
张三
172 |
张三
173 |
张三
174 |
张三
175 |
176 |
177 | 180 | 188 |
189 |
190 |
191 |
192 | 193 | 194 |
195 |
196 |
197 |
198 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /groot-1.0-min.js: -------------------------------------------------------------------------------- 1 | (function(w,$){var tmpTag=document.location.protocol+"//";var _cssCache={};var _absUrl=(function(){var a;return function(url){if(!a){a=document.createElement("a")}a.href=url;return a.href}})();var _define=function(factory){var _exports={};var _module={};_module.exports={};factory(_exports,_module);return $.extend(true,{},_exports,_module.exports)};var _require=function(parent,path){var _moudle;var _type="js";var _basePath;if(path.indexOf(tmpTag)<0){if(path.substr(0,2)=="./"){path=path.substr(2);_basePath=parent+path}else{if(path.substr(0,1)=="/"){_basePath=tmpTag+window.location.host+path}else{var _host;if(parent==""){_host=window.location.href}else{_host=parent}if(_host.indexOf("/")>-1){_host=_host.substr(0,_host.lastIndexOf("/")+1)}else{_host=_host+"/"}_basePath=_host+path}}}else{_basePath=path}var _path=_basePath;_basePath=_basePath.substr(0,_basePath.lastIndexOf("/")+1);if(_path.lastIndexOf("!")>-1){_type=_path.substr(_path.lastIndexOf("!")+1);_path=_path.substr(0,_path.lastIndexOf("!"))}else{if(_path.lastIndexOf(".js")<0){_path=_path+".js"}}var _myUrl=_absUrl(_path);$.ajax({type:"get","url":_myUrl+"?r="+(new Date()-1),"cache":true,"dataType":"text","error":function(){groot.log(_myUrl+"加载失败")},"async":false,"success":function(data){_moudle=data}});if(_type=="js"){var _script="_define(function(exports,module){\n";_script+='var $parent = "'+_basePath+'";\n';_script+=_moudle.replace(/require\(/g,"_require($parent,");_script+=";\n});"+"//@ sourceURL="+_myUrl;_moudle=eval(_script)}else{if(_type=="css"){var _key=_myUrl;if(!_cssCache.hasOwnProperty(_key)){$("").html(_moudle).appendTo("head");_cssCache[_key]="load"}}}return _moudle};window.require=function(path){return _require("",path)}})(window,jQuery);var groot=(function($){var PREFIX="gt";var RENDER="Render";function isNum(value){return typeof value=="number"}var groot={};groot.ui={};groot.bindingHandler=[];groot.bindExtend=function(){for(var i=0;i0){vm["$$arr"+pro]={"element":_eltArrs,"tmpl":_eltArrs.html()};_eltArrs.html("")}}function findObj(p){var _eltObjcts=$("["+PREFIX+"-object='"+p+"']",element).first().removeAttr(PREFIX+"-object");if(_eltObjcts.length>0){vm["$$obj"+pro]={"element":_eltObjcts,"tmpl":_eltObjcts.html()};_eltObjcts.html("")}}for(var pro in vm){if(!$.isFunction(vm[pro])&&pro.indexOf("$$")<0){if($.isArray(vm[pro])){findArr(pro)}else{if(typeof vm[pro]=="object"){findObj(pro)}}}}for(var pro in vm){if(!$.isFunction(vm[pro])&&pro.indexOf("$$")<0){if($.isArray(vm[pro])&&vm.hasOwnProperty("$$arr"+pro)){_bindingArry(vm,pro,ve) 2 | }else{if(typeof vm[pro]=="object"&&vm.hasOwnProperty("$$obj"+pro)){_bindingObject(vm,pro,ve)}}}}var _renderText=_bindText(element,vm,ve);if(!vm.hasOwnProperty("outerParent")){_sweepEvents(vm,element,ve)}_renderText();_collection()}function _bindText(element,vm,ve){var textlsit=[];for(var pro in vm){if(vm[pro]==null){vm[pro]=""}if(!$.isFunction(vm[pro])&&pro.indexOf("$$")<0){if(!$.isArray(vm[pro])&&typeof vm[pro]!="object"){textlsit.push(pro)}}}function _selecs(selector){var _ls=[];if(element.attr(selector)!=undefined){_ls.push(element[0])}var _ele=$("["+selector+"]",element);if(_ele.length>0){_ele.each(function(){_ls.push(this)})}return $(_ls)}var _eltText=_selecs(PREFIX+"-text");var _expressionsText=[];_eltText.each(function(){var _expression=$(this).attr(PREFIX+"-text");_expressionsText.push({ele:this,expr:_expression})});_eltText.removeAttr(PREFIX+"-text");var _eltClass=_selecs(PREFIX+"-class");var _expressionsClass=[];_eltClass.each(function(){var _expression=$(this).attr(PREFIX+"-class");_expressionsClass.push({ele:this,expr:_expression})});_eltClass.removeAttr(PREFIX+"-class");var _eltCss=_selecs(PREFIX+"-css");var _expressionsCss=[];_eltCss.each(function(){var _expression=$(this).attr(PREFIX+"-css");_expressionsCss.push({ele:this,expr:_expression})});_eltCss.removeAttr(PREFIX+"-css");var _eltAttr=_selecs(PREFIX+"-attr");var _expressionsAttr=[];_eltAttr.each(function(){var _expression=$(this).attr(PREFIX+"-attr");_expressionsAttr.push({ele:this,expr:_expression})});_eltAttr.removeAttr(PREFIX+"-attr");var _eltVisable=_selecs(PREFIX+"-visible");var _expressionsVisible=[];_eltVisable.each(function(){var _expression=$(this).attr(PREFIX+"-visible");_expressionsVisible.push({ele:this,expr:_expression})});_eltVisable.removeAttr(PREFIX+"-visible");function replaceAll(str,ostr,nstr){if(str.indexOf(ostr)>-1){str=str.replace(ostr,nstr);return replaceAll(str,ostr,nstr)}else{return str}}function renderText(){for(var i=0;i<_expressionsText.length;i++){var _o=_expressionsText[i];var _expshow=_o.expr;for(var k=0;k")[0];$(_o.wrap).insertAfter($(_o.ele));$(_o.ele).detach()}}}catch(e){}}}function _render(){renderText();renderClass();renderCss();renderAttr();renderVisable()}vm.$$renderText=_render;(function(){var _eltValue0=_selecs(PREFIX+"-value");var _eltChange0=_selecs(PREFIX+"-value-change"); 3 | var _eltBlur0=_selecs(PREFIX+"-value-blur");var _eltRadio0=_selecs(PREFIX+"-radio");var _elSelect0=_selecs(PREFIX+"-select");var _elCheck0=_selecs(PREFIX+"-check");var _elUi0=_selecs(PREFIX+"-ui");function bindSinle(vm,pro,ve){var _eltValue=getElement(_eltValue0,PREFIX+"-value",pro);var _eltChange=getElement(_eltChange0,PREFIX+"-value-change",pro);var _eltBlur=getElement(_eltBlur0,PREFIX+"-value-blur",pro);var _eltRadio=getElement(_eltRadio0,PREFIX+"-radio",pro);var _elSelect=getElement(_elSelect0,PREFIX+"-select",pro);var _elCheck=getElement(_elCheck0,PREFIX+"-check",pro);var _elUi=getElement(_elUi0,PREFIX+"-ui",pro);var _objElements={"_eltValue":_eltValue,"_eltChange":_eltChange,"_eltBlur":_eltBlur,"_eltRadio":_eltRadio,"_elSelect":_elSelect,"_elCheck":_elCheck,"_elUi":_elUi};for(var e in _objElements){var _elmt=_objElements[e];if(typeof _elmt.attr(PREFIX+"-watch")!="undefined"){var _fun=_elmt.attr(PREFIX+"-watch");if($.isFunction(ve[_fun])){vm[pro+"watch"]=(function($this,$ve){return function(){var args=$.makeArray(arguments);$ve.apply($this,args)}})(_elmt[0],ve[_fun])}_elmt.removeAttr(PREFIX+"-watch")}}var _uiList=[];_elUi.each(function(){var _uiname=$(this).attr(PREFIX+"-ui");_uiname=_uiname.substring(_uiname.indexOf("(")+1,_uiname.lastIndexOf(")"));$(this).removeAttr(PREFIX+"-ui");var _data=null;if(typeof $(this).attr(PREFIX+"-ui-data")!="undefined"){var _default=$(this).attr(PREFIX+"-ui-data");if(_default.indexOf("uiInit")>-1){_default=_default.substring(_default.indexOf("[")+1,_default.lastIndexOf("]"));_data=groot.uiInit[_default]}else{_data=eval("("+_default+")")}$(this).removeAttr(PREFIX+"-ui-data")}var _id=new Date()-1;if(typeof $(this).attr(PREFIX+"-ui-id")!="undefined"){_id=$(this).attr(PREFIX+"-ui-id");$(this).removeAttr(PREFIX+"-ui-id")}else{_id="ui"+_id}_uiList.push(_id);groot.ui[_uiname]($(this),_id,_data,vm[pro],(function(_id){return function(){vm[pro]=groot.vms[_id].uivalue;vm[pro+"Render"]()}})(_id))});_elCheck.removeAttr(PREFIX+"-check");if(vm[pro]){_elCheck.attr("checked","checked")}else{_elCheck.removeAttr("checked")}_elCheck.change(function(){if($(this).is(":checked")){vm[pro]=true;vm[pro+RENDER]()}else{vm[pro]=false;vm[pro+RENDER]()}});_elSelect.removeAttr(PREFIX+"-select");_elSelect.find("option[value='"+vm[pro]+"']").attr("selected","selected");_elSelect.change(function(){vm[pro]=$(this).val();vm[pro+RENDER]()});_eltRadio.removeAttr(PREFIX+"-radio");_eltRadio.each(function(){if($(this).val()==vm[pro]){$(this).click()}});_eltRadio.change(function(){if($(this).is(":checked")){vm[pro]=$(this).val();vm[pro+RENDER]()}});var temp=$("
"+vm[pro]+"
");_eltValue.removeAttr(PREFIX+"-value").val(temp.text());var _eblist=[];for(var i=0;i"+vm[pro]+"");_eltChange.removeAttr(PREFIX+"-value-change").val(temp.text());_eltChange.bind("input propertychange",function(){vm[pro]=$(this).val();vm[pro+RENDER]()});var temp=$("
"+vm[pro]+"
");_eltBlur.removeAttr(PREFIX+"-value-blur").val(temp.text());_eltBlur.change(function(){vm[pro]=$(this).val();vm[pro+RENDER]()});vm[pro+RENDER]=function(){if(pro.indexOf("$p.")>-1){if(vm.hasOwnProperty(pro+"#")){delete vm[pro+"#"]}else{var arr=pro.split("$p.");var parent=vm;for(var i=0;i0){var _child=vm["$$child"+pro][arguments[0]];var _temp=$(vm["$$arr"+pro].tmpl).insertBefore(_child);_child.remove();vm["$$child"+pro][arguments[0]]=_temp;_IndexInit(vm[pro]);_creatArrProperty(vm,vm[pro],vm[pro][arguments[0]]);_bindData(vm[pro][arguments[0]],_temp,ve);_IndexRender(vm[pro])}else{_initArry(vm,pro,ve)}}}function _IndexInit(vm){for(var i=0;i0){if(!ves.hasOwnProperty(_bindEvents[i]+"-"+e)){var _class=PREFIX+(new Date()-1);ves[_bindEvents[i]+"-"+e]={bname:_bindEvents[i],bevent:ve[e],bclass:_class};chs.removeAttr(PREFIX+"-"+_bindEvents[i]);chs.attr(PREFIX+"event",_class);if(typeof(chs.attr(PREFIX+"-attr"))=="undefined"){chs.attr(PREFIX+"-attr",PREFIX+"index:{$index}")}else{var oldvalue=chs.attr(PREFIX+"-attr");var newvalue=oldvalue+","+PREFIX+"index:{$index}";chs.attr(PREFIX+"-attr",newvalue)}}}}}var tmpl=$("
").append(element.clone()).remove().html();_arr.tmplshort=tmpl;function events(_e,_vm){return function(){var index=$(this).attr(PREFIX+"index");_e.call(this,_vm[index])}}for(var e in ves){_arr.element.off(ves[e]["bname"],"["+PREFIX+"event='"+ves[e]["bclass"]+"']");_arr.element.on(ves[e]["bname"],"["+PREFIX+"event='"+ves[e]["bclass"]+"']",events(ves[e]["bevent"],vm[pro]))}for(var i=0;i-1){delete m[p]}else{if($.isArray(m[p])){_getModel(m[p])}else{if(typeof m[p]=="object"){_getModel(m[p])}}}}}}}_getModel(_o);return _o};groot.log=function(a){window.console&&console.log&&console.log(a)};groot.asyn=function(foo){setTimeout(foo,10)};groot.createElement=function(html,id,element){var _temp=$(html+"');element.html(_temp);element.attr(PREFIX+"-view",id);_dynVMS[id]=id;return element};return groot})(jQuery);(function(b,a){a.bindExtend({"Name":"show","Handler":function(d,c){if(c==true){d.show()}else{d.hide()}}},{"Name":"height","Handler":function(d,c){d.height(c)}},{"Name":"width","Handler":function(d,c){d.width(c)}},{"Name":"readonly","Handler":function(d,c){if(c==false){d.attr("readonly","readonly")}else{d.removeAttr("readonly")}}},{"Name":"disabled","Handler":function(d,c){if(c==false){d.attr("disabled","disabled")}else{d.removeAttr("disabled")}}},{"Name":"focus","Handler":function(d,c){if(c){d.focus()}}});a.filter({"d":function(c,d){if(!c){return}if(!d){d="yyyy-MM-dd"}switch(typeof c){case"string":c=new Date(c.replace(/-/,"/"));break;case"number":c=new Date(c);break}if(!c instanceof Date){return}var e={"yyyy":c.getFullYear(),"M":c.getMonth()+1,"d":c.getDate(),"H":c.getHours(),"m":c.getMinutes(),"s":c.getSeconds(),"MM":(""+(c.getMonth()+101)).substr(1),"dd":(""+(c.getDate()+100)).substr(1),"HH":(""+(c.getHours()+100)).substr(1),"mm":(""+(c.getMinutes()+100)).substr(1),"ss":(""+(c.getSeconds()+100)).substr(1)};return d.replace(/(yyyy|MM?|dd?|HH?|ss?|mm?)/g,function(){return e[arguments[0]]})}})})(jQuery,groot); 6 | -------------------------------------------------------------------------------- /groot-2.0-min.js: -------------------------------------------------------------------------------- 1 | (function(w,$){var random=new Date().getTime();function getRandom(){random++;return random}var tmpTag=document.location.protocol+"//";var _cssCache={};var _absUrl=(function(){var a;return function(url){if(!a){a=document.createElement("a")}a.href=url;return a.href}})();var _define=function(factory){var _exports={};var _module={};_module.exports={};factory(_exports,_module);return $.extend(true,{},_exports,_module.exports)};var _require=function(parent,path){var _moudle;var _type="js";var _basePath;if(path.indexOf(tmpTag)<0){if(path.substr(0,2)=="./"){path=path.substr(2);_basePath=parent+path}else{if(path.substr(0,1)=="/"){_basePath=tmpTag+window.location.host+path}else{var _host;if(parent==""){_host=window.location.href}else{_host=parent}if(_host.indexOf("/")>-1){_host=_host.substr(0,_host.lastIndexOf("/")+1)}else{_host=_host+"/"}_basePath=_host+path}}}else{_basePath=path}var _path=_basePath;_basePath=_basePath.substr(0,_basePath.lastIndexOf("/")+1);if(_path.lastIndexOf("!")>-1){_type=_path.substr(_path.lastIndexOf("!")+1);_path=_path.substr(0,_path.lastIndexOf("!"))}else{if(_path.lastIndexOf(".js")<0){_path=_path+".js"}}var _myUrl=_absUrl(_path);$.ajax({type:"get","url":_myUrl+"?r="+(getRandom()),"cache":true,"dataType":"text","error":function(){groot.log(_myUrl+"加载失败")},"async":false,"success":function(data){_moudle=data}});if(_type=="js"){var _script="_define(function(exports,module){\n";_script+='var $parent = "'+_basePath+'";\n';_script+=_moudle.replace(/require\(/g,"_require($parent,");_script+=";\n});"+"//@ sourceURL="+_myUrl;_moudle=eval(_script)}else{if(_type=="css"){var _key=_myUrl;if(!_cssCache.hasOwnProperty(_key)){$("").html(_moudle).appendTo("head");_cssCache[_key]="load"}}}return _moudle};window.require=function(path){return _require("",path)}})(window,jQuery);var groot=(function($){var PREFIX="gt";var RENDER="Render";var random=new Date().getTime();function getRandom(){random++;return random}function isNum(value){return typeof value=="number"}var groot={};groot.widget={};groot.bindingHandler=[];groot.bindExtend=function(){for(var i=0;i0){vm["$$arr"+pro]={"element":_eltArrs,"tmpl":_eltArrs.html()};_eltArrs.html("")}else{record["_arr"+p]=true}}}function findObj(p){if(!record["_obj"+p]){var _eltObjcts=$("["+PREFIX+"-object='"+p+"']",element).first().removeAttr(PREFIX+"-object"); 2 | if(_eltObjcts.length>0){vm["$$obj"+pro]={"element":_eltObjcts,"tmpl":_eltObjcts.html()};_eltObjcts.html("")}else{record["_obj"+p]=true}}}for(var pro in vm){if(!$.isFunction(vm[pro])&&pro.indexOf("$$")<0){if($.isArray(vm[pro])){findArr(pro)}else{if(typeof vm[pro]=="object"){findObj(pro)}}}}for(var pro in vm){if(!$.isFunction(vm[pro])&&pro.indexOf("$$")<0){if($.isArray(vm[pro])&&vm.hasOwnProperty("$$arr"+pro)){_bindingArry(vm,pro,ve)}else{if(typeof vm[pro]=="object"&&vm.hasOwnProperty("$$obj"+pro)){_bindingObject(vm,pro,ve)}}}}function _bindText(element,vm,ve){var textlsit=[];for(var pro in vm){if(vm[pro]==null){vm[pro]=""}if(!$.isFunction(vm[pro])&&pro.indexOf("$$")<0){if(!$.isArray(vm[pro])&&typeof vm[pro]!="object"){textlsit.push(pro)}}}function _selecs(selector){var _ls=[];if(element.attr(selector)!=undefined){_ls.push(element[0])}var _ele=$("["+selector+"]",element);if(_ele.length>0){_ele.each(function(){_ls.push(this)})}return $(_ls)}var _eltText=$([]);var _expressionsText=[];if(!record["_eltText"]){_eltText=_selecs(PREFIX+"-text");_eltText.each(function(){var _expression=$(this).attr(PREFIX+"-text");_expressionsText.push({ele:this,expr:_expression})});_eltText.removeAttr(PREFIX+"-text");if(_eltText.length==0){record["_eltText"]=true}}var _eltClass=$([]);var _expressionsClass=[];if(!record["_eltClass"]){_eltClass=_selecs(PREFIX+"-class");_eltClass.each(function(){var _expression=$(this).attr(PREFIX+"-class");_expressionsClass.push({ele:this,expr:_expression})});_eltClass.removeAttr(PREFIX+"-class");if(_eltClass.length==0){record["_eltClass"]=true}}var _eltProp=$([]);var _expressionsProp=[];if(!record["_eltProp"]){_eltProp=_selecs(PREFIX+"-prop");_eltProp.each(function(){var _expression=$(this).attr(PREFIX+"-prop");_expressionsProp.push({ele:this,expr:_expression})});_eltProp.removeAttr(PREFIX+"-prop");if(_eltProp.length==0){record["_eltProp"]=true}}var _eltCss=$([]);var _expressionsCss=[];if(!record["_eltCss"]){_eltCss=_selecs(PREFIX+"-css");_eltCss.each(function(){var _expression=$(this).attr(PREFIX+"-css");_expressionsCss.push({ele:this,expr:_expression})});_eltCss.removeAttr(PREFIX+"-css");if(_eltCss.length==0){record["_eltCss"]=true}}var _eltAttr=$([]);var _expressionsAttr=[];if(!record["_eltAttr"]){_eltAttr=_selecs(PREFIX+"-attr");_eltAttr.each(function(){var _expression=$(this).attr(PREFIX+"-attr");_expressionsAttr.push({ele:this,expr:_expression})});_eltAttr.removeAttr(PREFIX+"-attr");if(_eltAttr.length==0){record["_eltAttr"]=true}}var _eltVisable=$([]);var _expressionsVisible=[];if(!record["_eltVisable"]){_eltVisable=_selecs(PREFIX+"-visible");_eltVisable.each(function(){var _expression=$(this).attr(PREFIX+"-visible");_expressionsVisible.push({ele:this,expr:_expression})});_eltVisable.removeAttr(PREFIX+"-visible");if(_eltVisable.length==0){record["_eltVisable"]=true}}function replaceAll(str,ostr,nstr){if(str.indexOf(ostr)>-1){str=str.replace(ostr,nstr);return replaceAll(str,ostr,nstr)}else{return str}}function renderText(){for(var i=0;i<_expressionsText.length;i++){var _o=_expressionsText[i];var _expshow=_o.expr;for(var k=0;k")[0];$(_o.wrap).insertAfter($(_o.ele));$(_o.ele).detach()}}}catch(e){}}}function _render(){renderText();renderClass();renderProp();renderCss();renderAttr();renderVisable()}(function(){var _eltValue0=$([]);if(!record["_eltValue0"]){_eltValue0=_selecs(PREFIX+"-value");if(_eltValue0.length==0){record["_eltValue0"]=true}}var _eltChange0=$([]);if(!record["_eltChange0"]){_eltChange0=_selecs(PREFIX+"-value-change");if(_eltChange0.length==0){record["_eltChange0"]=true}}var _eltBlur0=$([]);if(!record["_eltBlur0"]){_eltBlur0=_selecs(PREFIX+"-value-blur");if(_eltBlur0.length==0){record["_eltBlur0"]=true}}var _eltRadio0=$([]);if(!record["_eltRadio0"]){_eltRadio0=_selecs(PREFIX+"-radio");if(_eltRadio0.length==0){record["_eltRadio0"]=true}}var _elSelect0=$([]);if(!record["_elSelect0"]){_elSelect0=_selecs(PREFIX+"-select");if(_elSelect0.length==0){record["_elSelect0"]=true}}var _elCheck0=$([]);if(!record["_elCheck0"]){_elCheck0=_selecs(PREFIX+"-check");if(_elCheck0.length==0){record["_elCheck0"]=true}}var _elUi0=$([]);if(!record["_elUi0"]){_elUi0=_selecs(PREFIX+"-widget");if(_elUi0.length==0){record["_elUi0"]=true}}function bindSinle(vm,pro,ve){var _eltValue=$([]);if(!record["_eltValue1"+pro]){_eltValue=getElement(_eltValue0,PREFIX+"-value",pro);_eltValue.removeAttr(PREFIX+"-value");if(_eltValue.length==0){record["_eltValue1"+pro]=true}}var _eltChange=$([]);if(!record["_eltChange1"+pro]){_eltChange=getElement(_eltChange0,PREFIX+"-value-change",pro);_eltChange.removeAttr(PREFIX+"-value-change");if(_eltChange.length==0){record["_eltChange1"+pro]=true}}var _eltBlur=$([]);if(!record["_eltBlur1"+pro]){_eltBlur=getElement(_eltBlur0,PREFIX+"-value-blur",pro);_eltBlur.removeAttr(PREFIX+"-value-blur");if(_eltBlur.length==0){record["_eltBlur1"+pro]=true}}var _eltRadio=$([]);if(!record["_eltRadio1"+pro]){_eltRadio=getElement(_eltRadio0,PREFIX+"-radio",pro);_eltRadio.removeAttr(PREFIX+"-radio");if(_eltRadio.length==0){record["_eltRadio1"+pro]=true}}var _elSelect=$([]);if(!record["_elSelect1"+pro]){_elSelect=getElement(_elSelect0,PREFIX+"-select",pro);_elSelect.removeAttr(PREFIX+"-select");if(_elSelect.length==0){record["_elSelect1"+pro]=true}}var _elCheck=$([]);if(!record["_elCheck1"+pro]){_elCheck=getElement(_elCheck0,PREFIX+"-check",pro);_elCheck.removeAttr(PREFIX+"-check");if(_elCheck.length==0){record["_elCheck1"+pro]=true}}var _elUi=$([]);if(!record["_elUi1"+pro]){_elUi=getElement(_elUi0,PREFIX+"-widget",pro);if(_elUi.length==0){record["_elUi1"+pro]=true}}var _objElements={};if(_eltValue.length>0){_objElements._eltValue=_eltValue}if(_eltChange.length>0){_objElements._eltValue=_eltChange}if(_eltBlur.length>0){_objElements._eltValue=_eltBlur}if(_eltRadio.length>0){_objElements._eltValue=_eltRadio}if(_elSelect.length>0){_objElements._eltValue=_elSelect}if(_elCheck.length>0){_objElements._eltValue=_elCheck}if(_elUi.length>0){_objElements._eltValue=_elUi}for(var e in _objElements){var _elmt=_objElements[e];if(typeof _elmt.attr(PREFIX+"-watch")!="undefined"){var _fun=_elmt.attr(PREFIX+"-watch");if($.isFunction(ve[_fun])){vm[pro+"watch"]=(function($this,$ve){return function(){var args=$.makeArray(arguments);$ve.apply($this,args)}})(_elmt[0],ve[_fun])}_elmt.removeAttr(PREFIX+"-watch")}}var _widgetList=[];if(!record["_elUi1"+pro]){_elUi.each(function(){var _widgetname=$(this).attr(PREFIX+"-widget");_widgetname=_widgetname.split(":")[1];$(this).removeAttr(PREFIX+"-widget");var _data=null;if(typeof $(this).attr(PREFIX+"-widget-data")!="undefined"){var _default=$(this).attr(PREFIX+"-widget-data");if(_default.indexOf("widgetInit")>-1){_default=_default.substring(_default.indexOf("[")+1,_default.lastIndexOf("]"));_data=groot.widgetInit[_default]}else{_data=eval("("+_default+")")}$(this).removeAttr(PREFIX+"-widget-data")}var _id=getRandom();if(typeof $(this).attr(PREFIX+"-widget-id")!="undefined"){_id=$(this).attr(PREFIX+"-widget-id");$(this).removeAttr(PREFIX+"-widget-id")}else{_id="widget"+_id}_widgetList.push(_id);groot.widget[_widgetname]($(this),_id,_data,vm[pro],(function(_id){return function(){vm[pro]=groot.vms[_id].widgetvalue; 4 | vm[pro+"Render"]()}})(_id))})}if(_elCheck.length>0){_elCheck.removeAttr(PREFIX+"-check");if(vm[pro]){_elCheck.attr("checked","checked")}else{_elCheck.removeAttr("checked")}_elCheck.change(function(){if($(this).is(":checked")){vm[pro]=true;vm[pro+RENDER]()}else{vm[pro]=false;vm[pro+RENDER]()}})}if(_elSelect.length>0){_elSelect.removeAttr(PREFIX+"-select");_elSelect.find("option[value='"+vm[pro]+"']").attr("selected","selected");_elSelect.change(function(){vm[pro]=$(this).val();vm[pro+RENDER]()})}if(_eltRadio.length>0){_eltRadio.removeAttr(PREFIX+"-radio");_eltRadio.each(function(){if($(this).val()==vm[pro]){$(this).click()}});_eltRadio.change(function(){if($(this).is(":checked")){vm[pro]=$(this).val();vm[pro+RENDER]()}})}if(_eltValue.length>0){var temp=$("
"+vm[pro]+"
");_eltValue.removeAttr(PREFIX+"-value").val(temp.text())}var _eblist=[];if(!record["_eblist"+pro]){for(var i=0;i0){_temp.Handler(_elts,vm[pro]);_eblist.push({element:_elts,fun:_temp.Handler})}}if(_eblist==0){record["_eblist"+pro]=true}}if(_eltChange.length>0){var temp=$("
"+vm[pro]+"
");_eltChange.removeAttr(PREFIX+"-value-change").val(temp.text());_eltChange.bind("input propertychange",function(){vm[pro]=$(this).val();vm[pro+RENDER]()})}if(_eltBlur.length>0){var temp=$("
"+vm[pro]+"
");_eltBlur.removeAttr(PREFIX+"-value-blur").val(temp.text());_eltBlur.change(function(){vm[pro]=$(this).val();vm[pro+RENDER]()})}vm[pro+RENDER]=function(){if(pro.indexOf("$p.")>-1){if(vm.hasOwnProperty(pro+"#")){delete vm[pro+"#"]}else{var arr=pro.split("$p.");var parent=vm;for(var i=0;i0){var _child=vm["$$child"+pro][arguments[0]];var _temp=$(vm["$$arr"+pro].tmpl).insertBefore(_child);_child.remove();vm["$$child"+pro][arguments[0]]=_temp;_IndexInit(vm[pro]);_creatArrProperty(vm,vm[pro],vm[pro][arguments[0]]);_bindData(vm[pro][arguments[0]],_temp,ve);_IndexRender(vm[pro])}else{_initArry(vm,pro,ve)}}}function _IndexInit(vm){for(var i=0;i0){if(!ves.hasOwnProperty(_bindEvents[i]+"-"+e)){var _class=PREFIX+(getRandom());ves[_bindEvents[i]+"-"+e]={bname:_bindEvents[i],bevent:ve[e],bclass:_class};chs.removeAttr(PREFIX+"-"+_bindEvents[i]);chs.attr(PREFIX+"event",_class);if(typeof(chs.attr(PREFIX+"-attr"))=="undefined"){chs.attr(PREFIX+"-attr",PREFIX+"index:{$index}")}else{var oldvalue=chs.attr(PREFIX+"-attr");var newvalue=oldvalue+","+PREFIX+"index:{$index}";chs.attr(PREFIX+"-attr",newvalue)}}}}}var tmpl=$("
").append(element.clone()).remove().html();function events(_e,_vm){return function(){var index=$(this).attr(PREFIX+"index");_e.call(this,_vm[index])}}_arr.element.off();for(var e in ves){_arr.element.on(ves[e]["bname"],"["+PREFIX+"event='"+ves[e]["bclass"]+"']",events(ves[e]["bevent"],vm[pro]))}var _record=null;for(var i=0;i-1){delete m[p]}else{if($.isArray(m[p])){_getModel(m[p])}else{if(typeof m[p]=="object"){_getModel(m[p])}}}}}}}_getModel(_o);return _o};groot.UIComponent=function(config){var url=config.url;var id=config.id;var data=config.data;var uuid=getRandom();return require(url).UIComponent($("#"+id)[0],uuid,data)};groot.log=function(a){window.console&&console.log&&console.log(a)};groot.asyn=function(foo){setTimeout(foo,10)};groot.createElement=function(html,id,element){var _temp=$(html+"');$(element).html(_temp);$(element).attr(PREFIX+"-view",id);_dynVMS[id]=id;return element};return groot})(jQuery);(function($,groot){groot.bindExtend({"Name":"show","Handler":function(elment,value){if(value==true){$(elment).show()}else{$(elment).hide()}}},{"Name":"height","Handler":function(elment,value){$(elment).height(value)}},{"Name":"width","Handler":function(elment,value){$(elment).width(value)}},{"Name":"focus","Handler":function(elment,value){if(value){$(elment).focus()}}});groot.filter({"d":function(value,format){if(!value){return}if(!format){format="yyyy-MM-dd"}switch(typeof value){case"string":value=new Date(value.replace(/-/,"/"));break;case"number":value=new Date(value);break}if(!value instanceof Date){return}var dict={"yyyy":value.getFullYear(),"M":value.getMonth()+1,"d":value.getDate(),"H":value.getHours(),"m":value.getMinutes(),"s":value.getSeconds(),"MM":(""+(value.getMonth()+101)).substr(1),"dd":(""+(value.getDate()+100)).substr(1),"HH":(""+(value.getHours()+100)).substr(1),"mm":(""+(value.getMinutes()+100)).substr(1),"ss":(""+(value.getSeconds()+100)).substr(1)}; 6 | return format.replace(/(yyyy|MM?|dd?|HH?|ss?|mm?)/g,function(){return dict[arguments[0]]})}})})(jQuery,groot); -------------------------------------------------------------------------------- /groot-1.0.js: -------------------------------------------------------------------------------- 1 | (function (w, $) { 2 | /* 3 | *verson:1.0; 4 | *发布日期:2015-08-04; 5 | *QQ群:330603020; 6 | * */ 7 | //---------------commonjs规范----------------// 8 | var tmpTag = document.location.protocol + "//"; 9 | var _cssCache = {}; 10 | var _absUrl = (function () { 11 | var a; 12 | return function (url) { 13 | if (!a) a = document.createElement('a'); 14 | a.href = url; 15 | return a.href; 16 | }; 17 | })(); 18 | var _define = function (factory) { 19 | var _exports = {}; 20 | var _module = {}; 21 | _module.exports = {}; 22 | factory(_exports, _module); 23 | return $.extend(true, {}, _exports, _module.exports); 24 | } 25 | var _require = function (parent, path) { 26 | var _moudle; 27 | var _type = "js"; 28 | var _basePath; 29 | if (path.indexOf(tmpTag) < 0) { 30 | if (path.substr(0, 2) == "./") { 31 | path = path.substr(2); 32 | _basePath = parent + path; 33 | } else if (path.substr(0, 1) == "/") { 34 | _basePath = tmpTag + window.location.host + path; 35 | } else { 36 | var _host; 37 | if (parent == "") { 38 | _host = window.location.href; 39 | } else { 40 | _host = parent; 41 | } 42 | if (_host.indexOf("/") > -1) { 43 | _host = _host.substr(0, _host.lastIndexOf("/") + 1); 44 | } else { 45 | _host = _host + "/"; 46 | } 47 | _basePath = _host + path; 48 | } 49 | } else { 50 | _basePath = path; 51 | } 52 | var _path = _basePath; 53 | _basePath = _basePath.substr(0, _basePath.lastIndexOf("/") + 1); 54 | if (_path.lastIndexOf("!") > -1) { 55 | _type = _path.substr(_path.lastIndexOf("!") + 1); 56 | _path = _path.substr(0, _path.lastIndexOf("!")); 57 | } else { 58 | if (_path.lastIndexOf(".js") < 0) { 59 | _path = _path + ".js"; 60 | } 61 | } 62 | var _myUrl = _absUrl(_path); 63 | $.ajax({ 64 | type: 'get', 65 | "url": _myUrl + "?r=" + (new Date() - 1), 66 | "cache": true, 67 | "dataType": "text", 68 | "error": function () { 69 | groot.log(_myUrl + "加载失败"); 70 | }, 71 | "async": false, 72 | "success": function (data) { 73 | _moudle = data; 74 | } 75 | }); 76 | 77 | if (_type == "js") { //js预编译 78 | var _script = "_define(function(exports,module){\n"; 79 | _script += "var $parent = \"" + _basePath + "\";\n"; 80 | _script += _moudle.replace(/require\(/g, "_require($parent,"); 81 | _script += ";\n});" + "//@ sourceURL=" + _myUrl; 82 | _moudle = eval(_script); 83 | } else if (_type == "css") { 84 | var _key = _myUrl; 85 | if (!_cssCache.hasOwnProperty(_key)) { 86 | $("").html(_moudle).appendTo("head"); 87 | _cssCache[_key] = "load"; 88 | } 89 | } 90 | return _moudle; 91 | } 92 | window.require = function (path) { 93 | return _require("", path); 94 | }; 95 | })(window, jQuery); 96 | var groot = (function ($) { 97 | //---------------作者:大盗乔三---------------// 98 | //---------------qq:289880020---------------// 99 | //---------------系统常量----------------// 100 | var PREFIX = "gt"; 101 | var RENDER = "Render"; 102 | //---------------初始化对象----------------// 103 | function isNum(value) { 104 | return typeof value == "number"; 105 | } 106 | 107 | var groot = {}; 108 | groot.ui = {};//ui控件开发接口 109 | groot.bindingHandler = []; 110 | groot.bindExtend = function () { 111 | for (var i = 0; i < arguments.length; i++) { 112 | groot.bindingHandler.push(arguments[i]); 113 | } 114 | } 115 | var _ = {}; 116 | groot.filter = function () { 117 | for (var i = 0; i < arguments.length; i++) { 118 | groot.filter = $.extend(_, arguments[i]); 119 | } 120 | } 121 | groot.vms = {};//储存vm所有对象 122 | groot.uiInit = {};//存放控件初始化数据 123 | groot.control = function (name, factory) {//初始化view 124 | groot.vms[name] = {}; 125 | groot.vms[name].$$ve = {}; 126 | factory(groot.vms[name], groot.vms[name].$$ve);//vm对象 127 | var htmlElment = $("[" + PREFIX + "-view='" + name + "']").removeAttr(PREFIX + "-view"); 128 | return groot.vms[name]; 129 | } 130 | groot.view = function (name, factory) {//初始化view并扫描 131 | groot.vms[name] = {}; 132 | groot.vms[name].$$ve = {}; 133 | factory(groot.vms[name], groot.vms[name].$$ve);//vm对象 134 | var htmlElment = $("[" + PREFIX + "-view='" + name + "']").removeAttr(PREFIX + "-view"); 135 | groot.sweep(groot.vms[name], htmlElment); 136 | return groot.vms[name]; 137 | } 138 | //绑定事件 139 | var _bindEvents = [ 140 | "click", "abort", "blur", "change", "dblclick", "error", "focus", "keydown", "keypress", "keyup", "unload", 141 | "load", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "reset", "resize", "submit" 142 | ] 143 | //垃圾回收算法 144 | var _collect = true; 145 | var _dynVMS = {}; 146 | 147 | function _collection() {//垃圾回收 148 | if (_collect) { 149 | _collect = false; 150 | groot.asyn(function () { 151 | for (var vm in _dynVMS) { 152 | if ($("#" + vm).length <= 0) { 153 | delete groot.vms[vm]; 154 | delete _dynVMS[vm]; 155 | } 156 | } 157 | _collect = true; 158 | }) 159 | } 160 | } 161 | 162 | //---------------扫描事件----------------// 163 | // 没有参数扫描所有,2个参数 扫面指定的 vn 和 html片段// 164 | //-------------------------------// 165 | groot.sweep = function (vm, element) { 166 | var ars = arguments; 167 | if (ars.length == 0) { 168 | for (var _vm in groot.vms) { 169 | var htmlElment = $("[" + PREFIX + "-view='" + _vm + "']").removeAttr(PREFIX + "-view"); 170 | _bindData(groot.vms[_vm], htmlElment, groot.vms[_vm].$$ve); 171 | } 172 | } else { 173 | _bindData(vm, element, vm.$$ve); 174 | } 175 | } 176 | groot.collection = _collection; 177 | function _sweepEvents(vm, element, ve) { 178 | for (var e in ve) {//绑定事件 179 | for (var i = 0; i < _bindEvents.length; i++) { 180 | if (element.attr(PREFIX + "-" + _bindEvents[i]) === e) { 181 | element 182 | .unbind(_bindEvents[i]) 183 | .bind(_bindEvents[i], _triggerEvents(ve[e], vm)) 184 | .removeAttr(PREFIX + "-" + _bindEvents[i]); 185 | } 186 | $("[" + PREFIX + "-" + _bindEvents[i] + "='" + e + "']", element) 187 | .unbind(_bindEvents[i]) 188 | .bind(_bindEvents[i], _triggerEvents(ve[e], vm)) 189 | .removeAttr(PREFIX + "-" + _bindEvents[i]); 190 | } 191 | } 192 | } 193 | 194 | function _triggerEvents(ve, args) { 195 | return function () { 196 | ve.apply(this, [args]); 197 | } 198 | } 199 | 200 | //---------------私有函数-----------------// 201 | function _bindData(vm, element, ve) { 202 | vm.$$selector = element[0]; 203 | var _include = $("[" + PREFIX + "-include]", element); 204 | _include.each(function () { 205 | var _text = require($(this).attr(PREFIX + "-include") + "!text"); 206 | $(this).html(_text); 207 | $(this).removeAttr(PREFIX + "-include"); 208 | }); 209 | var pvm = null; 210 | if (vm.hasOwnProperty("outerParent")) { 211 | pvm = vm.outerParent(); 212 | } else if (vm.hasOwnProperty("parent")) { 213 | pvm = vm.parent(); 214 | } 215 | if (pvm != null) { 216 | for (var p in pvm) { 217 | if (!$.isFunction(pvm[p]) && p.indexOf("$$") < 0) { 218 | if (!$.isArray(pvm[p]) && typeof pvm[p] !== "object") { 219 | vm["$p." + p] = pvm[p]; 220 | } 221 | } 222 | } 223 | } 224 | function findArr(p) { 225 | var _eltArrs = $("[" + PREFIX + "-each='" + p + "']", element).first().removeAttr(PREFIX + "-each"); 226 | if (_eltArrs.length > 0) { 227 | vm["$$arr" + pro] = {"element": _eltArrs, "tmpl": _eltArrs.html()}; 228 | _eltArrs.html(""); 229 | } 230 | } 231 | 232 | function findObj(p) { 233 | var _eltObjcts = $("[" + PREFIX + "-object='" + p + "']", element).first().removeAttr(PREFIX + "-object"); 234 | if (_eltObjcts.length > 0) { 235 | vm["$$obj" + pro] = {"element": _eltObjcts, "tmpl": _eltObjcts.html()}; 236 | _eltObjcts.html(""); 237 | } 238 | } 239 | 240 | for (var pro in vm) {//保存数组对象模板 241 | if (!$.isFunction(vm[pro]) && pro.indexOf("$$") < 0) { 242 | if ($.isArray(vm[pro])) {//数组 243 | findArr(pro); 244 | } else if (typeof vm[pro] == "object") {//对象 245 | findObj(pro); 246 | } 247 | } 248 | } 249 | for (var pro in vm) {//初始化对象 250 | if (!$.isFunction(vm[pro]) && pro.indexOf("$$") < 0) { 251 | if ($.isArray(vm[pro]) && vm.hasOwnProperty("$$arr" + pro)) {//绑定数组 252 | _bindingArry(vm, pro, ve); 253 | } else if (typeof vm[pro] == "object" && vm.hasOwnProperty("$$obj" + pro)) { 254 | _bindingObject(vm, pro, ve);//绑定对象 255 | } 256 | } 257 | } 258 | var _renderText = _bindText(element, vm, ve);//绑定text 259 | if (!vm.hasOwnProperty("outerParent")) { 260 | _sweepEvents(vm, element, ve);//绑定事件 261 | } 262 | _renderText(); 263 | _collection();//回收垃圾 264 | } 265 | 266 | /* 267 | @vm 绑定的数据模型 268 | @textlsit 要绑定的属性数组 269 | * */ 270 | function _bindText(element, vm, ve) { 271 | ///text 272 | var textlsit = []; 273 | for (var pro in vm) { 274 | if (vm[pro] == null)vm[pro] = ""; 275 | if (!$.isFunction(vm[pro]) && pro.indexOf("$$") < 0) { 276 | if (!$.isArray(vm[pro]) && typeof vm[pro] != "object") { 277 | textlsit.push(pro); 278 | } 279 | } 280 | } 281 | function _selecs(selector) { 282 | var _ls = []; 283 | if (element.attr(selector) != undefined) { 284 | _ls.push(element[0]) 285 | } 286 | var _ele = $("[" + selector + "]", element); 287 | if (_ele.length > 0) { 288 | _ele.each(function () { 289 | _ls.push(this) 290 | }) 291 | } 292 | return $(_ls); 293 | } 294 | 295 | var _eltText = _selecs(PREFIX + "-text"); 296 | var _expressionsText = []; 297 | _eltText.each(function () { 298 | var _expression = $(this).attr(PREFIX + "-text"); 299 | _expressionsText.push({ele: this, expr: _expression}); 300 | }); 301 | _eltText.removeAttr(PREFIX + "-text"); 302 | ///class 303 | var _eltClass = _selecs(PREFIX + "-class"); 304 | var _expressionsClass = []; 305 | _eltClass.each(function () { 306 | var _expression = $(this).attr(PREFIX + "-class"); 307 | _expressionsClass.push({ele: this, expr: _expression}); 308 | }); 309 | _eltClass.removeAttr(PREFIX + "-class"); 310 | ///css 311 | var _eltCss = _selecs(PREFIX + "-css"); 312 | var _expressionsCss = []; 313 | _eltCss.each(function () { 314 | var _expression = $(this).attr(PREFIX + "-css"); 315 | _expressionsCss.push({ele: this, expr: _expression}); 316 | }); 317 | _eltCss.removeAttr(PREFIX + "-css"); 318 | ///attr 319 | var _eltAttr = _selecs(PREFIX + "-attr"); 320 | var _expressionsAttr = []; 321 | _eltAttr.each(function () { 322 | var _expression = $(this).attr(PREFIX + "-attr"); 323 | _expressionsAttr.push({ele: this, expr: _expression}); 324 | }); 325 | _eltAttr.removeAttr(PREFIX + "-attr"); 326 | var _eltVisable = _selecs(PREFIX + "-visible"); 327 | var _expressionsVisible = []; 328 | _eltVisable.each(function () { 329 | var _expression = $(this).attr(PREFIX + "-visible"); 330 | _expressionsVisible.push({ele: this, expr: _expression}); 331 | }); 332 | _eltVisable.removeAttr(PREFIX + "-visible"); 333 | function replaceAll(str, ostr, nstr) { 334 | if (str.indexOf(ostr) > -1) { 335 | str = str.replace(ostr, nstr); 336 | return replaceAll(str, ostr, nstr); 337 | } else { 338 | return str; 339 | } 340 | } 341 | 342 | function renderText() { 343 | for (var i = 0; i < _expressionsText.length; i++) { 344 | var _o = _expressionsText[i]; 345 | var _expshow = _o.expr; 346 | for (var k = 0; k < textlsit.length; k++) { 347 | try { 348 | if (isNum(vm[textlsit[k]]) || typeof vm[textlsit[k]] == "boolean") { 349 | _expshow = replaceAll(_expshow, "{" + textlsit[k] + "}", vm[textlsit[k]]); 350 | _expshow = _expshow.replace(new RegExp("{" + textlsit[k].replace("$", "\\$") + "}", "g"), vm[textlsit[k]]); 351 | } else { 352 | _expshow = replaceAll(_expshow, "{" + textlsit[k] + "}", "\"" + vm[textlsit[k]].replace(/\"/g, "\\\"") + "\""); 353 | } 354 | } catch (e) { 355 | groot.log(textlsit[k]); 356 | } 357 | } 358 | _expshow = _expshow.replace(/(\n)|(\r\n)/g, "\\\r\\\n"); 359 | try { 360 | eval("var myValue=" + _expshow); 361 | var t = typeof myValue; 362 | if (t == "string" || t == "number" || t == "boolean") { 363 | $(_o.ele).html(myValue); 364 | } 365 | 366 | } catch (e) { 367 | 368 | } 369 | } 370 | } 371 | 372 | function renderCCA(expressions, callback) {//渲染 css class attr 373 | 374 | for (var i = 0; i < expressions.length; i++) { 375 | var _o = expressions[i]; 376 | var _arr = _o.expr.split(","); 377 | for (var m = 0; m < _arr.length; m++) { 378 | var index = _arr[m].indexOf(":"); 379 | var _cname = _arr[m].substr(0, index); 380 | var _cexpress = _arr[m].substr(index + 1); 381 | for (var k = 0; k < textlsit.length; k++) { 382 | try { 383 | if (isNum(vm[textlsit[k]]) || typeof vm[textlsit[k]] == "boolean") { 384 | _cexpress = replaceAll(_cexpress, "{" + textlsit[k] + "}", vm[textlsit[k]]); 385 | _cexpress = _cexpress.replace(new RegExp("{" + textlsit[k].replace("$", "\\$") + "}", "g"), vm[textlsit[k]]); 386 | } else { 387 | _cexpress = replaceAll(_cexpress, "{" + textlsit[k] + "}", "\"" + vm[textlsit[k]].replace(/\"/g, "\\\"") + "\""); 388 | } 389 | } catch (e) { 390 | groot.log(textlsit[k]); 391 | } 392 | } 393 | _cexpress = _cexpress.replace(/(\n)|(\r\n)/g, "\\\r\\\n"); 394 | try { 395 | eval("var myValue = " + _cexpress); 396 | callback(_o, _cname, myValue); 397 | } catch (e) { 398 | 399 | } 400 | } 401 | } 402 | } 403 | 404 | function renderClass() { 405 | renderCCA(_expressionsClass, function (_o, _cname, myValue) { 406 | if (myValue === true) { 407 | $(_o.ele).addClass(_cname); 408 | } else if (myValue === false) { 409 | $(_o.ele).removeClass(_cname); 410 | } 411 | }); 412 | } 413 | 414 | function renderCss() { 415 | //_expressionsCss 416 | renderCCA(_expressionsCss, function (_o, _cname, myValue) { 417 | var t = typeof myValue; 418 | if (t === "string" || t === "number" || t === "boolean") { 419 | $(_o.ele).css(_cname, myValue); 420 | } 421 | }); 422 | } 423 | 424 | function renderAttr() { 425 | //_expressionsAttr 426 | renderCCA(_expressionsAttr, function (_o, _cname, myValue) { 427 | var t = typeof myValue; 428 | if (t === "string" || t === "number" || t === "boolean") { 429 | $(_o.ele).attr(_cname, myValue); 430 | } 431 | }) 432 | } 433 | 434 | function renderVisable() { 435 | for (var i = 0; i < _expressionsVisible.length; i++) { 436 | var _o = _expressionsVisible[i]; 437 | var _expshow = _o.expr; 438 | for (var k = 0; k < textlsit.length; k++) { 439 | try { 440 | if (isNum(vm[textlsit[k]]) || typeof vm[textlsit[k]] == "boolean") { 441 | _expshow = replaceAll(_expshow, "{" + textlsit[k] + "}", vm[textlsit[k]]); 442 | _expshow = _expshow.replace(new RegExp("{" + textlsit[k].replace("$", "\\$") + "}", "g"), vm[textlsit[k]]); 443 | } else { 444 | _expshow = replaceAll(_expshow, "{" + textlsit[k] + "}", "\"" + vm[textlsit[k]].replace(/\"/g, "\\\"") + "\""); 445 | } 446 | } catch (e) { 447 | groot.log(textlsit[k]); 448 | } 449 | } 450 | _expshow = _expshow.replace(/(\n)|(\r\n)/g, "\\\r\\\n"); 451 | try { 452 | eval("var myValue=" + _expshow); 453 | var t = typeof myValue; 454 | if (myValue == true) { 455 | if (typeof _o.wrap != "undefined") { 456 | $(_o.ele).insertAfter($(_o.wrap)); 457 | $(_o.wrap).remove(); 458 | delete _o.wrap; 459 | } 460 | } else { 461 | if (typeof _o.wrap == "undefined") { 462 | _o.wrap = $("")[0]; 463 | $(_o.wrap).insertAfter($(_o.ele)); 464 | $(_o.ele).detach(); 465 | } 466 | } 467 | 468 | } catch (e) { 469 | 470 | } 471 | } 472 | } 473 | 474 | function _render() { 475 | renderText(); 476 | renderClass(); 477 | renderCss(); 478 | renderAttr(); 479 | renderVisable(); 480 | } 481 | 482 | vm.$$renderText = _render; 483 | //单属性绑定 484 | (function () { 485 | var _eltValue0 = _selecs(PREFIX + "-value"); 486 | var _eltChange0 = _selecs(PREFIX + "-value-change"); 487 | var _eltBlur0 = _selecs(PREFIX + "-value-blur"); 488 | var _eltRadio0 = _selecs(PREFIX + "-radio"); 489 | var _elSelect0 = _selecs(PREFIX + "-select"); 490 | var _elCheck0 = _selecs(PREFIX + "-check"); 491 | var _elUi0 = _selecs(PREFIX + "-ui"); 492 | 493 | function bindSinle(vm, pro, ve) { 494 | var _eltValue = getElement(_eltValue0, PREFIX + "-value", pro); 495 | var _eltChange = getElement(_eltChange0, PREFIX + "-value-change", pro); 496 | var _eltBlur = getElement(_eltBlur0, PREFIX + "-value-blur", pro); 497 | var _eltRadio = getElement(_eltRadio0, PREFIX + "-radio", pro); 498 | var _elSelect = getElement(_elSelect0, PREFIX + "-select", pro); 499 | var _elCheck = getElement(_elCheck0, PREFIX + "-check", pro); 500 | var _elUi = getElement(_elUi0, PREFIX + "-ui", pro); 501 | var _objElements = { 502 | "_eltValue": _eltValue, 503 | "_eltChange": _eltChange, 504 | "_eltBlur": _eltBlur, 505 | "_eltRadio": _eltRadio, 506 | "_elSelect": _elSelect, 507 | "_elCheck": _elCheck, 508 | "_elUi": _elUi 509 | }; 510 | /*********************** watch *******************************/ 511 | for (var e in _objElements) { 512 | var _elmt = _objElements[e]; 513 | if (typeof _elmt.attr(PREFIX + "-watch") != "undefined") { 514 | var _fun = _elmt.attr(PREFIX + "-watch"); 515 | if ($.isFunction(ve[_fun])) { 516 | vm[pro + "watch"] = (function ($this, $ve) { 517 | return function () { 518 | var args = $.makeArray(arguments); 519 | $ve.apply($this, args); 520 | } 521 | })(_elmt[0], ve[_fun]) 522 | } 523 | _elmt.removeAttr(PREFIX + "-watch"); 524 | } 525 | } 526 | /*********************** ui控件开发扫描 *******************************/ 527 | var _uiList = []; 528 | _elUi.each(function () { 529 | var _uiname = $(this).attr(PREFIX + "-ui"); 530 | _uiname = _uiname.substring(_uiname.indexOf("(") + 1, _uiname.lastIndexOf(")")); 531 | $(this).removeAttr(PREFIX + "-ui"); 532 | var _data = null; 533 | if (typeof $(this).attr(PREFIX + "-ui-data") != "undefined") { 534 | var _default = $(this).attr(PREFIX + "-ui-data"); 535 | if (_default.indexOf("uiInit") > -1) { 536 | _default = _default.substring(_default.indexOf("[") + 1, _default.lastIndexOf("]")); 537 | _data = groot.uiInit[_default]; 538 | } else { 539 | _data = eval("(" + _default + ")"); 540 | } 541 | 542 | $(this).removeAttr(PREFIX + "-ui-data"); 543 | } 544 | var _id = new Date() - 1; 545 | if (typeof $(this).attr(PREFIX + "-ui-id") != "undefined") { 546 | _id = $(this).attr(PREFIX + "-ui-id"); 547 | $(this).removeAttr(PREFIX + "-ui-id"); 548 | } else { 549 | _id = "ui" + _id; 550 | } 551 | _uiList.push(_id); 552 | groot.ui[_uiname]($(this), _id, _data, vm[pro], (function (_id) { 553 | return function () { 554 | vm[pro] = groot.vms[_id].uivalue; 555 | vm[pro + "Render"](); 556 | } 557 | })(_id)); 558 | }); 559 | /*********************** checkbox *******************************/ 560 | _elCheck.removeAttr(PREFIX + "-check"); 561 | if (vm[pro]) { 562 | _elCheck.attr("checked", "checked");//.is(":checked") 563 | } else { 564 | _elCheck.removeAttr("checked"); 565 | } 566 | _elCheck.change(function () { 567 | if ($(this).is(":checked")) { 568 | vm[pro] = true; 569 | vm[pro + RENDER](); 570 | } else { 571 | vm[pro] = false; 572 | vm[pro + RENDER](); 573 | } 574 | }); 575 | /*********************** selectBox *******************************/ 576 | _elSelect.removeAttr(PREFIX + "-select"); 577 | _elSelect.find("option[value='" + vm[pro] + "']").attr("selected", "selected"); 578 | _elSelect.change(function () { 579 | vm[pro] = $(this).val(); 580 | vm[pro + RENDER](); 581 | }); 582 | /*********************** Radio *******************************/ 583 | _eltRadio.removeAttr(PREFIX + "-radio"); 584 | _eltRadio.each(function () { 585 | if ($(this).val() == vm[pro]) { 586 | //$(this).attr("checked", "checked");元写法在火狐下有bug 587 | $(this).click(); 588 | } 589 | }); 590 | _eltRadio.change(function () { 591 | if ($(this).is(':checked')) { 592 | vm[pro] = $(this).val(); 593 | vm[pro + RENDER](); 594 | } 595 | }); 596 | /*********************** value 文本 *******************************/ 597 | var temp = $("
" + vm[pro] + "
"); 598 | _eltValue.removeAttr(PREFIX + "-value").val(temp.text()); 599 | /*********************** 绑定扩展属性 *******************************/ 600 | var _eblist = []; 601 | for (var i = 0; i < groot.bindingHandler.length; i++) { 602 | var _temp = groot.bindingHandler[i]; 603 | var _elts = $("[" + PREFIX + "-" + _temp.Name + "='" + pro + "']", element).removeAttr(PREFIX + "-" + _temp.Name); 604 | _temp.Handler(_elts, vm[pro]); 605 | _eblist.push(_elts); 606 | } 607 | /*********************** 绑定输入框值变化 *******************************/ 608 | 609 | var temp = $("
" + vm[pro] + "
"); 610 | _eltChange.removeAttr(PREFIX + "-value-change").val(temp.text()); 611 | _eltChange.bind("input propertychange", function () { 612 | vm[pro] = $(this).val(); 613 | vm[pro + RENDER](); 614 | 615 | }); 616 | /*********************** 绑定输入失去焦点 *******************************/ 617 | var temp = $("
" + vm[pro] + "
"); 618 | _eltBlur.removeAttr(PREFIX + "-value-blur").val(temp.text()); 619 | _eltBlur.change(function () { 620 | vm[pro] = $(this).val(); 621 | vm[pro + RENDER](); 622 | }); 623 | vm[pro + RENDER] = function () { 624 | 625 | /*********************** 如果绑定父节点 *******************************/ 626 | if (pro.indexOf("$p.") > -1) { 627 | if (vm.hasOwnProperty(pro + "#")) { 628 | delete vm[pro + "#"]; 629 | } else { 630 | var arr = pro.split("$p."); 631 | var parent = vm; 632 | for (var i = 0; i < arr.length - 1; i++) { 633 | if (parent.hasOwnProperty("outerParent") && typeof parent["outerParent"] == "function") { 634 | parent = parent.outerParent(); 635 | } else { 636 | parent = parent.parent(); 637 | } 638 | } 639 | parent[arr[arr.length - 1]] = vm[pro]; 640 | parent[arr[arr.length - 1] + RENDER](); 641 | return; 642 | } 643 | } 644 | for (var p in vm) { 645 | if (!$.isFunction(vm[p]) && p.indexOf("$$") < 0) { 646 | if ($.isArray(vm[p])) { 647 | for (var i = 0; i < vm[p].length; i++) { 648 | if (vm[p][i].hasOwnProperty("$p." + pro)) { 649 | { 650 | vm[p][i]["$p." + pro] = vm[pro]; 651 | vm[p][i]["$p." + pro + "#"] = "#" 652 | vm[p][i]["$p." + pro + "Render"](); 653 | } 654 | } 655 | } 656 | 657 | } else if (typeof vm[p] == "object") { 658 | if (vm[p].hasOwnProperty("$p." + pro)) { 659 | { 660 | vm[p]["$p." + pro] = vm[pro]; 661 | vm[p]["$p." + pro + "#"] = "#" 662 | vm[p]["$p." + pro + "Render"](); 663 | } 664 | } 665 | } 666 | } 667 | } 668 | var value = vm[pro]; 669 | /*********************** 渲染控件 *******************************/ 670 | for (var i = 0; i < _uiList.length; i++) { 671 | groot.vms[_uiList[i]].uivalue = value; 672 | groot.vms[_uiList[i]].uivalueRender(); 673 | } 674 | /*********************** 触发监控 *******************************/ 675 | if ($.isFunction(vm[pro + "watch"])) { 676 | vm[pro + "watch"](vm, value);//调用监控函数 677 | } 678 | /*********************** checkBox *******************************/ 679 | if (vm[pro]) { 680 | _elCheck.attr("checked", "checked");//.is(":checked") 681 | } else { 682 | _elCheck.removeAttr("checked"); 683 | } 684 | /*********************** selectBox *******************************/ 685 | _elSelect.find("option[value='" + vm[pro] + "']").attr("selected", "selected"); 686 | /*********************** Radio *******************************/ 687 | _eltRadio.each(function () { 688 | if ($(this).val() == value) { 689 | $(this).attr("checked", "checked"); 690 | } else { 691 | $(this).removeAttr("checked"); 692 | } 693 | }); 694 | /*********************** text 标签值 *******************************/ 695 | vm.$$renderText(); 696 | /*********************** value 文本 *******************************/ 697 | _eltValue.val(vm[pro]); 698 | _eltChange.each(function () { 699 | if (!$(this).is(':focus')) { 700 | $(this).val(vm[pro]) 701 | } 702 | 703 | }); 704 | _eltBlur.val(vm[pro]); 705 | /*********************** style 式 刷新扩展属性 *******************************/ 706 | for (var i = 0; i < groot.bindingHandler.length; i++) { 707 | var _temp = groot.bindingHandler[i]; 708 | _temp.Handler(_eblist[i], value); 709 | } 710 | } 711 | } 712 | 713 | function getElement(eles, selector, value) { 714 | var retlist = []; 715 | eles.each(function () { 716 | if ($(this).attr(selector) === value || (selector == PREFIX + "-ui" && $(this).attr(selector) !== undefined && $(this).attr(selector).indexOf(value + "(") === 0)) { 717 | retlist.push(this); 718 | } 719 | }) 720 | return $(retlist); 721 | } 722 | 723 | for (var i = 0; i < textlsit.length; i++) { 724 | (function (vm, pro, ve) { 725 | bindSinle(vm, pro, ve); 726 | })(vm, textlsit[i], ve) 727 | 728 | } 729 | })() 730 | return _render; 731 | 732 | } 733 | 734 | function _creatArrProperty(opvm, pvm, vm) {//创建数组的层次关系 735 | vm.parent = function () { 736 | return pvm; 737 | } 738 | vm.outerParent = function () { 739 | return opvm; 740 | } 741 | } 742 | 743 | /* 744 | @vm 绑定的数据模型 745 | @pro 要绑定的属性 746 | * */ 747 | function _bindingObject(vm, pro, ve) { 748 | var _obj = vm["$$obj" + pro]; 749 | _obj.element.html(_obj.tmpl); 750 | vm[pro].parent = function () { 751 | return vm; 752 | } 753 | _bindData(vm[pro], _obj.element, ve); 754 | vm[pro + RENDER] = function () { 755 | var _obj = vm["$$obj" + pro]; 756 | _obj.element.html(_obj.tmpl); 757 | vm[pro].parent = function () { 758 | return vm; 759 | } 760 | _bindData(vm[pro], _obj.element, ve); 761 | }; 762 | } 763 | 764 | /*绑定数组 765 | @element html元素 766 | @vm 绑定的数据模型 767 | @pro 要绑定的属性 768 | * */ 769 | function _bindingArry(vm, pro, ve) { 770 | _initArry(vm, pro, ve); 771 | vm[pro + RENDER] = function () { 772 | if (arguments.length > 0) { 773 | var _child = vm["$$child" + pro][arguments[0]]; 774 | var _temp = $(vm["$$arr" + pro].tmpl).insertBefore(_child); 775 | _child.remove(); 776 | vm["$$child" + pro][arguments[0]] = _temp; 777 | _IndexInit(vm[pro]) 778 | _creatArrProperty(vm, vm[pro], vm[pro][arguments[0]]); 779 | _bindData(vm[pro][arguments[0]], _temp, ve); 780 | _IndexRender(vm[pro]) 781 | } else { 782 | _initArry(vm, pro, ve); 783 | } 784 | } 785 | } 786 | 787 | function _IndexInit(vm) { 788 | for (var i = 0; i < vm.length; i++) { 789 | vm[i]["$index"] = i; 790 | vm[i]["$first"] = false; 791 | vm[i]["$last"] = false; 792 | if (i == 0)vm[i]["$first"] = true; 793 | if (i == vm.length - 1)vm[i]["$last"] = true; 794 | } 795 | } 796 | 797 | function _IndexRender(vm) { 798 | for (var i = 0; i < vm.length; i++) { 799 | vm[i].$indexRender(); 800 | vm[i].$firstRender(); 801 | vm[i].$lastRender(); 802 | } 803 | } 804 | 805 | function _initArry(vm, pro, ve) { 806 | _IndexInit(vm[pro]); 807 | var frag = document.createDocumentFragment(); // 创建文档碎片 808 | vm["$$child" + pro] = []; 809 | var _arr = vm["$$arr" + pro]; 810 | _arr.element.html(""); 811 | /**/ 812 | var element = $(_arr.tmpl); 813 | var ves = {}; 814 | for (var e in ve) {//绑定事件 815 | for (var i = 0; i < _bindEvents.length; i++) { 816 | if (element.attr(PREFIX + "-" + _bindEvents[i]) === e) { 817 | if (!ves.hasOwnProperty(_bindEvents[i] + "-" + e)) { 818 | var _class = PREFIX + (new Date() - 1); 819 | ves[_bindEvents[i] + "-" + e] = { 820 | bname: _bindEvents[i], 821 | bevent: ve[e], 822 | bclass: _class 823 | } 824 | element.removeAttr(PREFIX + "-" + _bindEvents[i]); 825 | element.attr(PREFIX + "event", _class); 826 | if (typeof (element.attr(PREFIX + "-attr")) == "undefined") { 827 | element.attr(PREFIX + "-attr", PREFIX + "index:{$index}"); 828 | } else { 829 | var oldvalue = element.attr(PREFIX + "-attr"); 830 | var newvalue = oldvalue + "," + PREFIX + "index:{$index}"; 831 | element.attr(PREFIX + "-attr", newvalue); 832 | } 833 | } 834 | } 835 | var chs = $("[" + PREFIX + "-" + _bindEvents[i] + "='" + e + "']", element); 836 | var chslist = []; 837 | chs.each(function () { 838 | if ($(this).parents("[" + PREFIX + "-each]").length == 0 && $(this).parents("[" + PREFIX + "-object]").length == 0) { 839 | chslist.push(this); 840 | } 841 | }) 842 | chs = $(chslist); 843 | if (chs.length > 0) { 844 | if (!ves.hasOwnProperty(_bindEvents[i] + "-" + e)) { 845 | var _class = PREFIX + (new Date() - 1); 846 | ves[_bindEvents[i] + "-" + e] = { 847 | bname: _bindEvents[i], 848 | bevent: ve[e], 849 | bclass: _class 850 | } 851 | chs.removeAttr(PREFIX + "-" + _bindEvents[i]); 852 | chs.attr(PREFIX + "event", _class); 853 | if (typeof (chs.attr(PREFIX + "-attr")) == "undefined") { 854 | chs.attr(PREFIX + "-attr", PREFIX + "index:{$index}"); 855 | } else { 856 | var oldvalue = chs.attr(PREFIX + "-attr"); 857 | var newvalue = oldvalue + "," + PREFIX + "index:{$index}"; 858 | chs.attr(PREFIX + "-attr", newvalue); 859 | } 860 | } 861 | } 862 | } 863 | } 864 | var tmpl = $("
").append(element.clone()).remove().html(); 865 | 866 | _arr.tmplshort = tmpl; 867 | function events(_e, _vm) { 868 | return function () { 869 | var index = $(this).attr(PREFIX + "index"); 870 | _e.call(this, _vm[index]); 871 | } 872 | } 873 | 874 | for (var e in ves) { 875 | _arr.element.off(ves[e]["bname"], "[" + PREFIX + "event='" + ves[e]["bclass"] + "']"); 876 | _arr.element.on(ves[e]["bname"], "[" + PREFIX + "event='" + ves[e]["bclass"] + "']", events(ves[e]["bevent"], vm[pro])); 877 | } 878 | 879 | 880 | for (var i = 0; i < vm[pro].length; i++) { 881 | if (!$.isFunction(vm[pro]) && pro.indexOf("$$") < 0) { 882 | var _child = $(tmpl); 883 | frag.appendChild(_child[0]); 884 | _creatArrProperty(vm, vm[pro], vm[pro][i]) 885 | _bindData(vm[pro][i], _child, ve); 886 | vm["$$child" + pro].push(_child); 887 | } 888 | } 889 | _arr.element.append(frag);//添加数组到文档 890 | vm[pro + "push"] = function (value) { 891 | vm[pro].push(value); 892 | _IndexInit(vm[pro]); 893 | var _child = $(_arr.tmplshort); 894 | _arr.element.append(_child); 895 | _creatArrProperty(vm, vm[pro], value); 896 | _bindData(value, _child, ve); 897 | vm["$$child" + pro].push(_child); 898 | } 899 | vm[pro + "pop"] = function () { 900 | var _arrchid = vm["$$child" + pro].pop(); 901 | _arrchid.remove(); 902 | vm[pro].pop(); 903 | } 904 | vm[pro + "shift"] = function () { 905 | var _arrchid = vm["$$child" + pro].shift(); 906 | _arrchid.remove(); 907 | vm[pro].shift(); 908 | _IndexInit(vm[pro]); 909 | _IndexRender(vm[pro]); 910 | } 911 | vm[pro + "unshift"] = function (value) { 912 | vm[pro].unshift(value); 913 | _IndexInit(vm[pro]); 914 | var _child = $(_arr.tmplshort); 915 | _arr.element.prepend(_child); 916 | _creatArrProperty(vm, vm[pro], value); 917 | _bindData(value, _child, ve); 918 | _IndexRender(vm[pro]); 919 | vm["$$child" + pro].unshift(_child); 920 | }; 921 | vm[pro + "splice"] = function () { 922 | var args = arguments; 923 | if (args.length == 2) { 924 | vm[pro].splice(args[0], args[1]); 925 | var chs = vm["$$child" + pro].splice(args[0], args[1]); 926 | for (var i = 0; i < chs.length; i++) { 927 | $(chs[i]).remove(); 928 | } 929 | _IndexInit(vm[pro]); 930 | _IndexRender(vm[pro]); 931 | chs = null; 932 | var list = groot.model(vm[pro]); 933 | return list.splice(args[0], args[1]); 934 | } 935 | var list = groot.model(vm[pro]); 936 | var retList = list.splice.apply(list, args); 937 | vm[pro] = list; 938 | vm[pro + "Render"](); 939 | return retList; 940 | }; 941 | vm[pro + "concat"] = function () { 942 | var args = arguments; 943 | for (var i = 0; i < args.length; i++) { 944 | if ($.isArray(args[i])) { 945 | for (var j = 0; j < args[i].length; j++) { 946 | this[pro + "push"](args[i][j]); 947 | } 948 | } else { 949 | this[pro + "push"](args[i][j]); 950 | } 951 | } 952 | 953 | } 954 | } 955 | 956 | //获取model对象 957 | groot.model = function (o) { 958 | var _o; 959 | if ($.isArray(o)) { 960 | _o = $.extend(true, [], o); 961 | } else if (typeof o == "object") { 962 | _o = $.extend(true, {}, o); 963 | } else { 964 | return o; 965 | } 966 | function _getModel(m) { 967 | if ($.isArray(m)) { 968 | for (var i = 0; i < m.length; i++) { 969 | if ($.isArray(m[i])) { 970 | _getModel(m[i]); 971 | } else if (typeof m[i] == "object") { 972 | _getModel(m[i]); 973 | } 974 | } 975 | } else if (typeof m == "object") { 976 | for (var p in m) { 977 | if ($.isFunction(m[p]) || p.indexOf("$") > -1) { 978 | delete m[p]; 979 | } else if ($.isArray(m[p])) { 980 | _getModel(m[p]); 981 | } 982 | else if (typeof m[p] == "object") { 983 | _getModel(m[p]); 984 | } 985 | } 986 | } 987 | } 988 | 989 | _getModel(_o); 990 | return _o; 991 | } 992 | //---------------groot API---------------// 993 | groot.log = function (a) {//输出到控制台 994 | window.console && console.log && console.log(a); 995 | } 996 | groot.asyn = function (foo) {//异步函数 997 | setTimeout(foo, 10); 998 | } 999 | groot.createElement = function (html, id, element) { 1000 | var _temp = $(html + ""); 1001 | element.html(_temp); 1002 | element.attr(PREFIX + "-view", id); 1003 | _dynVMS[id] = id; 1004 | return element; 1005 | } 1006 | //groot.absUrl = _absUrl;//根绝相对路径获取绝对路径 1007 | return groot; 1008 | }) 1009 | (jQuery); 1010 | ///bindExtend,自定义属性,自定义属性 gt-width="w" 1011 | (function ($, groot) { 1012 | groot.bindExtend( 1013 | { 1014 | "Name": "show", 1015 | "Handler": function (elment, value) { 1016 | if (value == true) { 1017 | elment.show(); 1018 | } else { 1019 | elment.hide(); 1020 | } 1021 | } 1022 | } 1023 | , 1024 | { 1025 | "Name": "height", 1026 | "Handler": function (elment, value) { 1027 | elment.height(value); 1028 | } 1029 | } 1030 | , 1031 | { 1032 | "Name": "width", 1033 | "Handler": function (elment, value) { 1034 | elment.width(value); 1035 | } 1036 | } 1037 | , 1038 | { 1039 | "Name": "readonly", 1040 | "Handler": function (elment, value) { 1041 | if (value == false) { 1042 | elment.attr("readonly", "readonly"); 1043 | } else { 1044 | elment.removeAttr("readonly"); 1045 | } 1046 | } 1047 | } 1048 | , 1049 | { 1050 | "Name": "disabled", 1051 | "Handler": function (elment, value) { 1052 | if (value == false) { 1053 | elment.attr("disabled", "disabled"); 1054 | } else { 1055 | elment.removeAttr("disabled"); 1056 | } 1057 | } 1058 | }, 1059 | { 1060 | "Name": "focus", 1061 | "Handler": function (elment, value) { 1062 | if (value) { 1063 | elment.focus() 1064 | } 1065 | } 1066 | } 1067 | ); 1068 | groot.filter( 1069 | { 1070 | "d": function (value, format) { 1071 | if (!value) return; 1072 | if (!format) format = "yyyy-MM-dd"; 1073 | switch (typeof value) { 1074 | case "string": 1075 | value = new Date(value.replace(/-/, "/")); 1076 | break; 1077 | case "number": 1078 | value = new Date(value); 1079 | break; 1080 | } 1081 | if (!value instanceof Date) return; 1082 | var dict = { 1083 | "yyyy": value.getFullYear(), 1084 | "M": value.getMonth() + 1, 1085 | "d": value.getDate(), 1086 | "H": value.getHours(), 1087 | "m": value.getMinutes(), 1088 | "s": value.getSeconds(), 1089 | "MM": ("" + (value.getMonth() + 101)).substr(1), 1090 | "dd": ("" + (value.getDate() + 100)).substr(1), 1091 | "HH": ("" + (value.getHours() + 100)).substr(1), 1092 | "mm": ("" + (value.getMinutes() + 100)).substr(1), 1093 | "ss": ("" + (value.getSeconds() + 100)).substr(1) 1094 | }; 1095 | return format.replace(/(yyyy|MM?|dd?|HH?|ss?|mm?)/g, function () { 1096 | return dict[arguments[0]]; 1097 | }); 1098 | } 1099 | } 1100 | ) 1101 | })(jQuery, groot) 1102 | -------------------------------------------------------------------------------- /Demo/js/ui.js: -------------------------------------------------------------------------------- 1 | /*通用弹出框*/ 2 | (function () { 3 | var $css3Transform = function (element, attribute, value) { 4 | var arrPriex = ["O", "Ms", "Moz", "Webkit", ""], length = arrPriex.length; 5 | for (var i = 0; i < length; i += 1) { 6 | element.css(arrPriex[i] + attribute, value); 7 | } 8 | } 9 | var game = {}; 10 | game.zIndex = 12;//背景z-index 11 | game.stack = [];//弹出框 z-index栈 12 | game.stackPop = [];//弹出框对象 13 | game.showPop = function (element, callback, iClose) { 14 | if (window.parent !== window) { 15 | window.parent.groot.pop.showPop(element, callback, iClose); 16 | return; 17 | } 18 | var divgame = $("body"); 19 | if (game.stack.length == 0) { 20 | divgame.append("
"); 21 | game.zIndex = 12; 22 | $("#pop-bg").css("zIndex", game.zIndex); 23 | } else { 24 | game.zIndex = game.stack[game.stack.length - 1] + 1; 25 | $("#pop-bg").css("zIndex", game.zIndex); 26 | } 27 | var pop = $("
"); 28 | divgame.append(pop); 29 | var zPop = game.zIndex + 1; 30 | pop.css("zIndex", zPop); 31 | game.stack.push(zPop); 32 | game.stackPop.push(pop); 33 | element = $(element); 34 | pop.append(element); 35 | var move = element.find(".drag").css("cursor", "move"); 36 | move.bind("mousedown", function (event) { 37 | var x0 = event.pageX; 38 | var y0 = event.pageY; 39 | var pop = $(this).parent().parent(); 40 | var ex0 = pop.css("left").replace("px", "") * 1; 41 | var ey0 = pop.css("top").replace("px", "") * 1; 42 | move.bind("mousemove", function (e) { 43 | var x1 = e.pageX; 44 | var y1 = e.pageY; 45 | var mx = x1 - x0; 46 | var my = y1 - y0; 47 | var ex1 = ex0 + mx; 48 | var ey1 = ey0 + my; 49 | pop.css("left", ex1 + "px"); 50 | pop.css("top", ey1 + "px"); 51 | 52 | }); 53 | }); 54 | move.bind("mouseup", function () { 55 | move.unbind("mousemove"); 56 | }); 57 | move.bind("mouseleave", function () { 58 | move.unbind("mousemove"); 59 | }); 60 | if (typeof callback == "function") { 61 | if (callback(element[0], show) !== "wait") { 62 | show(); 63 | } 64 | ; 65 | } else { 66 | show(); 67 | } 68 | function show() { 69 | var w = pop.width(); 70 | var h = pop.height(); 71 | var wScreen = $(window).width(); 72 | var hScreen = $(window).height(); 73 | if (w > wScreen) { 74 | pop.width(wScreen); 75 | w = wScreen; 76 | } 77 | if (h > hScreen) { 78 | pop.height(hScreen); 79 | h = hScreen; 80 | } 81 | var x = (wScreen - w) / 2; 82 | var y = (hScreen - h) / 2; 83 | pop.css("left", x + "px"); 84 | pop.css("top", y + "px"); 85 | pop.removeClass("pop-container-animate"); 86 | setTimeout(function () { 87 | pop.addClass("pop-container-animate"); 88 | $css3Transform(pop, "Transform", "scale(1, 1)"); 89 | $css3Transform(pop, "opacity", "1"); 90 | setTimeout(function () { 91 | pop.removeClass("pop-container-animate"); 92 | if (!((typeof iClose != "undefined") && iClose === false)) { 93 | pop.addClass("iClose"); 94 | } 95 | $("#pop-bg").unbind("click").bind("click", function () { 96 | var element = game.stackPop[game.stackPop.length - 1]; 97 | if (element.hasClass("iClose")) { 98 | game.closePop(); 99 | } 100 | }) 101 | 102 | }, 300); 103 | }, 30); 104 | } 105 | 106 | }; 107 | game.closePop = function () { 108 | if (window.parent !== window) { 109 | window.parent.groot.pop.closePop(); 110 | return; 111 | } 112 | var pop = game.stackPop.pop(); 113 | game.stack.pop(); 114 | if (game.stack.length == 0) { 115 | $("#pop-bg").remove(); 116 | game.zIndex = 12; 117 | } else { 118 | game.zIndex = game.stack[game.stack.length - 1] - 1; 119 | $("#pop-bg").css("zIndex", game.zIndex); 120 | } 121 | pop.addClass("pop-container-animate"); 122 | $css3Transform(pop, "opacity", "0"); 123 | $css3Transform(pop, "Transform", "scale(0, 0)"); 124 | setTimeout(function () { 125 | pop.remove(); 126 | }, 300); 127 | } 128 | $(window).on("resize", function () { 129 | var pops = $(".pop-container"); 130 | if (pops.length > 0) { 131 | pops.each(function () { 132 | var pop = $(this); 133 | var w = pop.width(); 134 | var h = pop.height(); 135 | var wScreen = $(window).width(); 136 | var hScreen = $(window).height(); 137 | var x = (wScreen - w) / 2; 138 | var y = (hScreen - h) / 2; 139 | pop.css("left", x + "px"); 140 | pop.css("top", y + "px"); 141 | }); 142 | } 143 | }); 144 | groot.pop = game;//弹出框通用组件 145 | 146 | })() 147 | /*确认提示框*/ 148 | ; 149 | (function () { 150 | groot.confrim = function (title, info, callback) { 151 | var html = ""; 152 | html += "
"; 153 | html += "
"; 154 | html += "" + title + ""; 155 | html += "
"; 156 | html += "
" + info + "
"; 157 | html += "
"; 158 | html += ""; 159 | html += ""; 160 | html += "
"; 161 | html += "
"; 162 | groot.pop.showPop($(html), function (element) { 163 | if (window == window.parent) { 164 | $(element).width($(window).width() / 2); 165 | } else { 166 | $(element).width($(window.parent).width() / 2); 167 | } 168 | $(element).find(".ok").on("click", function () { 169 | groot.pop.closePop(); 170 | if (typeof callback == "function") callback(); 171 | }); 172 | $(element).find(".cancel").on("click", function () { 173 | groot.pop.closePop(); 174 | }); 175 | $(element).find(".close").on("click", function () { 176 | groot.pop.closePop(); 177 | }); 178 | }, false); 179 | } 180 | groot.alert = function (text, type) {//success,fail,warning 181 | var id = new Date() - 1; 182 | var html = "