I learned JavaScript for more than two years and found myself quite a newbie. So I used a simple UI component library to train my hands. Let's call him quickui, because I want this UI to be fast and flexible.
Currently, only two UI controls are available: one window control and one tree control. We hope that we will continue to improve this quick UI later. The usage method and demo address are provided here. If you have any
It is a great honor to give pointers.
Project demo address: http://quickui.oschina.mopaas.com/WebContent/
First download quickui project: http://git.oschina.net/xmlonely/QuickUI
Hosts file
Quick UI usage:
HTML code (this HTML code is best located in the webcontent folder to facilitate code Introduction)
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML>Quickuistart. js file:
Quickui. domready (function () {// create a window control var A = new quickui. window ("win1", {Title: "This is the title", // width: 400 can be omitted for the title, // width can be omitted for height: 300, // height can be omitted for top: 10, // left: 100 can be omitted from the vertex position, // dragable: True can be omitted from the left position, // whether it can be dragged or moved can be omitted resizeable: True, // whether or not mixsize can be omitted: True, // min size: True can be omitted to maximize, // tools can be omitted to minimize: [// tool bar can be omitted {ID: "maxsize" // maximization}, {ID: "minsize" // minimization}, {ID: "reflash", // refresh // click the function to omit handler.: Function () {alert ("reflash") ;},{ ID: "print", // print // handler: function () {window. print () ;},{ ID: "save", // save handler: function () {alert ("save") ;},{ ID: "Help ", // help handler: function () {alert ("help") ;}});/* omitting var B = new quickui. window ("win2", {Title: "Settings", dragable: True, resizeable: True, top: 30, left: 30}); */. open (); // render a to the body // B. open (); // create a new tree var tree = new quickui. tree ({wid TH: 200, height: 400, top: 100, left: 100, root: {// root node, must have text: "management", // Text of the root node, children: [// a child node of the root node. {text: "daily office", children: [{text: "Material Management", children: [{text: "Fifth Layer" },{ text: "Fifth Layer"}] },{ text: "Salary Management"}]}, // subnode 1 {// handler is the configuration function of the last subnode. // It is usually used to set the link URL and target of the subnode, if not, the subnode // link is "javascript: void (0)" by default )". Text: "Salary Management", children: [{text: "Personnel Management", Handler: function () {// alert (this); this. href = "javascript: void (0)"; // this.tar get = "_ framename" ;},{ text: "Financial Management", Handler: function () {This. href = "javascript: void (0)"; // this.tar get = "_ framename" ;},{ text: "Employment Department", Handler: function () {This. href = "javascript: void (0)"; // this.tar get = "_ framename" ;}}]}); tree. show (); // render the tree to the body });
Quick UI Component Library
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
