javascript UI library http://axisj.com/
[ÁÖÀÇ!] ÀÌ ÇÁ·ÎÁ§Æ®´Â ´õ ÀÌ»ó Ãß°¡°³¹ß/°³¼±ÀÛ¾÷À» ÁøÇàÇÏÁö ¾Ê½À´Ï´Ù. ¾ÕÀ¸·Î´Â AX5UI¸¦ ÀÌ¿ëÇØÁÖ¼¼¿ä.
This Project will not proceed further development. Please use AX5UI in the future.
- https://github.com/ax5ui
- https://github.com/ax5ui/ax5ui-kernel
- https://github.com/ax5ui/ax5core
- https://github.com/ax5ui/ax5ui-grid
- https://github.com/ax5ui/ax5ui-uploader
- µîµîµî ...
ÇöÀç±îÁö ¹èÆ÷µÈ ¹öÀü¿¡ ´ëÇÑ ÀÌ¿ë¿¡´Â ¹®Á¦°¡ ¾ø°í, °¢Á¾ ¸µÅ© CDNµîÀº ÇöÀç¿Í µ¿ÀÏÇÏ°Ô À¯Áö µË´Ï´Ù.
´Ü, À¯Áöº¸¼ö/ÇÏÀÚº¸¼ö °è¾àÀÌ µÈ °æ¿ì¸¦ À§ÇÑ ¹ö±× ÇȽº´Â ÁøÇàµË´Ï´Ù.
AXISJ
###Full-Stack Open-source Javascript UI Framework
AXISJ means "Axis of Javascript" and also represents "Application eXeprience:AX" as well.
AXISJ ´Â ¡°ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ Ãà(Axis of Javascript)¡±¶ó´Â ¶æ°ú ´õºÒ¾î ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß°æÇè(Application eXperience: AX)À» ±¸ÇöÇÑ´Ù´Â Àǹ̵µ ´ã°í ÀÖ½À´Ï´Ù.
It can be used easily and lightly, by excluding the load which a developer does not intend or which is heavier than application. In terms of the development method, the collision issue between components has been minimised with the use of Class-based coding rules which manage each UI tool in Class.
link
- Demonstration (http://dev.axisj.com)
- Documentation (http://jdoc.axisj.com)
- Guide (http://axisj.github.io/axisj-about/docs/)
- Website (https://www.axisj.com)
- Facebook (http://facebook.com/axisj)
- Google+ (http://google.com/+axisj)
Related Projects
- AXU (https://www.axisj.com/axu), (http://axu.axisj.com), (https://github.com/axisj-com/axu)
- AXU4J (https://github.com/axisj-com/axu4j)
- AXIcon (https://www.axisj.com/en/axicon/), (http://axicon.axisj.com), (https://github.com/axisj-com/axicon)
Download
By Bower.io
// bower install
$ bower install axisj
Direct Download [releases] (https://github.com/axisj-com/axisj/releases)
Install
CDN
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/axisj/axisj/master/ui/arongi/AXJ.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/axisj/axisj/master/dist/AXJ.min.js"></script>
CDN Theme
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/axisj/axisj/master/ui/arongi/AXJ.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/axisj/axisj/master/ui/bulldog/AXJ.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/axisj/axisj/master/ui/cocker/AXJ.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/axisj/axisj/master/ui/flybasket/AXJ.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/axisj/axisj/master/ui/kakao/AXJ.min.css">
Installing AXISJ is simple and easy. Copy and paste the downloaded file of AXISJ in an appropriate location of your project. (In this sample, the file was put in the project root / 'axisj' folder.) Type in codes to load CSS and JS files in HTML codes of the pages where you want to use AXISJ. Then, if needed, load CSS and JS files of some components of UI. This sample shows the codes to enable AXGrid component.
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- °øÅë¿ä¼Ò -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/axisj/axisj/master/ui/arongi/AXJ.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/axisj/axisj/master/dist/AXJ.min.js"></script>
</head>
Define the id of HTML element where you want to put the UI component. The id will be used in UI configuration for later. 'id' is a unique element and there should not be two id elements with the same id name in one HTML document.
</head>
<body>
<h1>AXGrid RWD</h1>
<div id="AXGridTarget"></div>
</body>
</html>
Define UI configuration and data. Each component of UI has different configuration values.
</body>
</html>
<script type="text/javascript">
var myGrid = new AXGrid(); // instance
var fnObj = {
pageStart: function(){
myGrid.setConfig({
targetID : "AXGridTarget",
theme : "AXGrid",
autoChangeGridView: { // autoChangeGridView by browser width
mobile:[0,600], grid:[600]
},
colGroup : [
{key:"no", label:"No.", width:"40", align:"center", formatter:"money"},
{key:"title", label:"Title", width:"200"},
{key:"writer", label:"Writer", width:"100", align:"center"},
{key:"date", label:"Date.", width:"100", align:"center"},
{key:"desc", label:"Etc.", width:"*"}
],
body : {
onclick: function(){
toast.push(Object.toJSON({index:this.index, item:this.item}));
}
},
page:{
paging:false
}
});
var list = [
{
no:1, title:"AXGrid ù¹ø° ÁÙ ÀÔ´Ï´Ù.AXGrid ù¹ø° ÁÙ ÀÔ´Ï´Ù.", writer:"Àå±â¿µ", img:"img/1.jpg", desc:"¸¹Àº ±ÛÀ» ´ã°í ÀÖ´Â ³»¿ë ÀÔ´Ï´Ù. ÀÚ¿¬½º·´°Ô ÁÙÀÌ ³Ñ¾î°¡°í Ç¥ÇöµÇ´Â °ÍÀÌ °ü°Ç ÀÔ´Ï´Ù.", category:"¾×½Ã½ºÁ¦ÀÌ", date:"2014-04-05"
},
{
no:2, title:"AXGrid µÎ¹ø° ÁÙ ÀÔ´Ï´Ù.AXGrid ù¹ø° ÁÙ ÀÔ´Ï´Ù.", writer:"Àå±â¿µ", img:"img/2.jpg", desc:"¸¹Àº ±ÛÀ» ´ã°í ÀÖ´Â ³»¿ë ÀÔ´Ï´Ù.", category:"¾×½Ã½ºÁ¦ÀÌ", date:"2014-04-07"
},
{
no:3, title:"AXGrid ¼¼¹ø° ÁÙ ÀÔ´Ï´Ù.AXGrid ù¹ø° ÁÙ ÀÔ´Ï´Ù.", writer:"Àå±â¿µ", img:"img/3.jpg", desc:"¸¹Àº ±ÛÀ» ´ã°í ÀÖ´Â ³»¿ë ÀÔ´Ï´Ù. ÀÚ¿¬½º·´°Ô...", category:"¾×½Ã½ºÁ¦ÀÌ", date:"2014-04-09"
}
];
//setList
myGrid.setList(list);
/* ajax way
myGrid.setList({
ajaxUrl:"...",
ajaxPars:"",
onLoad:function(){},
onError:function(){}
});
*/
}
};
jQuery(document).ready(fnObj.pageStart.delay(0.1));
</script>
Q&A
https://github.com/axisj-com/axisj/issues