web ix 学习(一) 首页 tree

来源：互联网发布：java大数据方向学什么编辑：程序博客网时间：2024/05/18 01:07
<!DOCTYPE html><html><head><link rel="stylesheet" href="css/webix.css" type="text/css" media="screen" charset="utf-8"><script src="js/webix.js" type="text/javascript" charset="utf-8"></script><title>Flat skin</title><style>.transparent {background-color: transparent;}.main_title {font-size: 19px;line-height: 48px;}a.check_flight {color: #367ddc;}.webix_row_select a.check_flight {color: #fff;}/*.registration .webix_accordionitem_header{background-color: #95a5a6;box-shadow: 0 1px #95a5a6, 0 1px 1px #95a5a6 inset;}*/.blue_row {background-color: #cbdeeb !important;}.blue_row .webixtype_form {font-size: 18px;}/* */.webix_tree_item {height: 40px;line-height: 40px}.webix_tree .webix_scroll_cont>.webix_tree_leaves {padding: 0}.webix_view {background: #f1f1f1 !important}.webix_tree_item.webix_selected,.webix_tree_item.webix_selected span {background-color: #27ae60;padding-right: 0}.webix_tree_branch_1 .webix_tree_item {padding-left: 24px;padding-right: 10px}.webix_tree_branch_1>.webix_tree_item {padding: 5px 0 4px 0;line-height: 40px}.webix_tree_branch_1 {border-bottom: 1px solid #e5e5e5}.webix_tree_item.webix_selected span,.webix_tree_item span {margin: 0;padding: 1px}.webix_tree_item.webix_selected .webix_icon {color: #fff}.webix_icon {width: 25px;padding-left: 12px !important;text-align: center}.dashboard .webix_icon {font-size: 18px}.webix_tree_leaves .webix_tree_leaves {margin-left: 0}</style></head><body><script type="text/javascript">webix.type(webix.ui.tree, {name: "awesome",height: 40,icon: function(e) {for (var t = "", i = "", a = 1; a <= e.$level; a++)if (a == e.$level && e.$count) {var n = e.open ? "down" : "right";t += "<span class='" + i + " webix_icon fa-angle-" + n + "'></span>"}return t},folder: function(e) {return e.icon ? "<span class='webix_icon icon fa-" + e.icon + "'></span>" : ""}});var tree_data = [{id: "main",value: "Main",open: !0,data: [{id: "dashboard",value: "Dashboard",icon: "home",$css: "dashboard",details: "reports and statistics"}, {id: "orders",value: "Orders",icon: "check-square-o",$css: "orders",details: "order reports and editing"}, {id: "products",value: "Products",icon: "cube",$css: "products",details: "all products"}, {id: "product_edit",value: "Product Edit",icon: "pencil-square-o",details: "changing product data"}]}, {id: "components",open: !0,value: "Components",data: [{id: "datatables",value: "Datatables",icon: "table",details: "datatable examples"}, {id: "charts",value: "Charts",icon: "bar-chart-o",details: "charts examples"}, {id: "forms",value: "Forms",icon: "list-alt",details: "forms examples"}]}, {id: "uis",value: "UI Examples",open: 1,data: [{id: "calendar",value: "My Calendar",icon: "calendar",details: "calendar example"}, {id: "files",value: "File Manager",icon: "folder-open-o",details: "file manager example"}]}];var grid_data = [{id: 1,value: "The Shawshank Redemption"}, {id: 2,value: "The Godfather"}, {id: 3,value: "The Godfather: Part II"}, {id: 4,value: "The Good, the Bad and the Ugly"}, {id: 5,value: "My Fair Lady"}, {id: 6,value: "12 Angry Men"}];webix.ui({rows: [{type: "header",template: "Go App!"}, {cols: [{id:"app:menu",view: "tree",type: "awesome",data: tree_data,gravity: 0.3,activeTitle: !0,select: !0,tooltip: {template: function(e) {return e.$count ? "" : e.details}},on: {onBeforeSelect: function(e) {return this.getItem(e).$count ? !1 : void 0},onAfterSelect: function(e) {var t = this.getItem(e);/*this.$scope.show("./" + e);webix.$$("title").parse({title:t.value, details:t.details})*/console.log(e);console.log(t.value);console.log(t.details);}}}, {view: "datatable",autoConfig: true,data: grid_data}]}]})</script></body></html>
0 0