Skip to content

Commit

Permalink
Merge branch 'es6'
Browse files Browse the repository at this point in the history 
# Conflicts:
#	dist/ui.js
#	dist/ui.min.js
#	js/modal.js
  • Loading branch information
@seogi1004
seogi1004 committed Nov 29, 2018
2 parents 4930979 + f405b98 commit 3fd0f1b
Show file tree
Hide file tree
Showing 216 changed files with 28,855 additions and 42,148 deletions.
102 changes: 0 additions & 102 deletions Gruntfile.js
View file

This file was deleted.

115 changes: 53 additions & 62 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,68 @@
## Getting Started
## Installation

#### Loading resources
JUI library only requires the user to load a single package file.
Access to the jui class must then be configured in the markup.
```html
<link rel="stylesheet" href="dist/ui.min.css" />
<link rel="stylesheet" href="dist/ui-jennifer.min.css" />
<body class="jui">...</body>
```

As the script works only with jQuery 1.8 or higher, it is necessary to load the jQuery library first.
```html
<script src="lib/jquery-1.8.0.min.js"></script>
<script src="lib/core.min.js"></script>
<script src="dist/ui.min.js"></script>
```

#### Installing in command
```
### NPM
```bash
npm install juijs-ui
bower install juijs-ui
jamjs install juijs-ui
```

#### To build the project
Build using a grunt in JUI Library
```
grunt // Build all processes
grunt js // Merge and Minifiy JavaScript files
grunt css // Compile LESS files
grunt test // Unit Tests
```
After the build output is shown below.
```
dist/ui.js
dist/ui.min.js
dist/ui.css
dist/ui.min.css
dist/ui-jennifer.css
dist/ui-jennifer.min.css
dist/ui-dark.css
dist/ui-dark.min.css
### Browser

```html
<link rel="stylesheet" href="../dist/jui-ui.classic.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.rawgit.com/juijs/jui-core/es6/dist/jui-core.js"></script>
<script src="../dist/jui-ui.js"></script>
```

## Documentation
### ES Modules

##### http://jui.io
##### http://uiplay.jui.io
The difference with the existing method is that you need to add the module directly using the 'use' function.

## Maintainers
```js
import jui from 'juijs-ui'
import TimepickerComp from 'juijs-ui/src/components/timepicker.js'
import Styles from './index.less'

Created by Alvin and Jayden, Yoha
jui.use(TimepickerComp);
```

## License
Below is the index.less file. You can only use the style you want to bundle.

MIT License
```less
.jui {
@import "../node_modules/juijs-ui/src/styles/base/mixins.less";
@import "../node_modules/juijs-ui/src/styles/common.less";
@import "../node_modules/juijs-ui/src/styles/common.theme.less";
@import "../node_modules/juijs-ui/src/styles/icon.less";
@import "../node_modules/juijs-ui/src/styles/icon.theme.less";
@import "../node_modules/juijs-ui/src/styles/timepicker.less";
@import "../node_modules/juijs-ui/src/styles/timepicker.theme.less";
@import "../node_modules/juijs-ui/src/styles/theme/classic.less";
}
```

Copyright (C) 2016 (```JenniferSoft Inc.```)
## Usage

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
```html
<body class="jui">
<div id="timepicker_date" class="timepicker calendar small" style="margin-right: 3px;">
<input type="input" class="year" maxlength="4" />-<input type="input" class="month" maxlength="2" />-<input type="input" class="date" maxlength="2" />
<i class="icon-calendar"></i>
</div>

<div id="timepicker_time" class="timepicker small">
<input type="input" class="hours" maxlength="2" value="00" /> :
<input type="input" class="minutes" maxlength="2" value="00" />
<i class="icon-arrow7"></i>
</div>
</body>
```

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
The UI component creation code is the same as the existing one.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```js
jui.ready([ "ui.timepicker" ], function(timepicker) {
timepicker("#timepicker_date");
timepicker("#timepicker_time");
});
```
16 changes: 0 additions & 16 deletions bower.json
View file

This file was deleted.

132 changes: 132 additions & 0 deletions bundles/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@

<!DOCTYPE HTML>
<html>
<head>
<META charset="UTF-8">
<title></title>
</head>

<body class="jui">
<div class="page-header">
<h1>Modal</h1>
<p class="br">
윈도우나 로딩과 같은 UI 컴포넌트에서 사용하는 모달을 좀 더 범용적으로 사용할 수 있게 별도의 컴포넌트로 개발하였습니다.
</p>
</div>

<section id="global">
<h2>Global</h2>
<p>
<a class="btn mini" href="javascript:modal_1.show();"><i class="icon-help"></i> Run</a> -
전체 화면의 중앙에 위치하는 글로벌 모달 기능을 제공합니다.

<pre><code class="language-javascript">jui.ready([ "ui.modal" ], function(modal) {
modal_1 = modal("#modal_1", {
color: "black"
});
});</code></pre>

<div id="modal_1" class="msgbox" style="display: none;">
<div class="head">
Title
</div>
<div class="body">
Contents...<br/>

<div style="text-align: center; margin-top: 45px;">
<a href="#" class="btn small focus">Save</a>
<a href="#" class="btn small">Close</a>
</div>
</div>
</div>
</p>
</section>

<section>
<h2>Inner</h2>
<p>
<a class="btn mini" href="javascript:modal_2.show()">Run</a> -
전체 화면이 대상이 아닌 특정 태그 내부적으로도 모달 기능을 사용할 수 있는 기능을 제공합니다.

<table id="modal_2" class="table table-classic table-stripeless">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
</thead>
<tbody style="max-height: 200px; width: 700px;"><tr>
<td style="width: 164px;">0</td>
<td style="width: 164px;">Hong</td>
<td style="width: 164px;">20</td>
<td style="width: 153px;">Ilsan</td>
</tr><tr>
<td>1</td>
<td>Jung</td>
<td>30</td>
<td>Seoul</td>
</tr><tr>
<td>2</td>
<td>Park</td>
<td>15</td>
<td>Yeosu</td>
</tbody>
</table>

<div id="modal_2_msg" style="display: none; font-size: 20px; color: red;">
NOW LOADING...
</div>
</p>

<p class="br">
<pre><code class="language-javascript">modal_2 = modal("#modal_2_msg", {
target: "#modal_2",
opacity: 0.5,
color: 'white'
});</code></pre>

<pre><code class="language-markup">
&lt;div id="modal_2_msg" style="display: none; font-size: 20px; color: red;"&gt;
NOW LOADING...
&lt;/div&gt;</code></pre>
</p>
</section>

<section>
<h2>Clone</h2>
<p>
<a class="btn mini" href="javascript:modal_3.show()">Run</a> -
전체 화면이 대상이 아닌 특정 태그 내부적으로도 모달 기능을 사용할 수 있는 기능을 제공합니다.

<table id="modal_3" class="table classic stripeless" style="width: 500px;">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
</thead>
<tbody style="max-height: 200px; width: 700px;"><tr>
<td style="width: 164px;">0</td>
<td style="width: 164px;">Hong</td>
<td style="width: 164px;">20</td>
<td style="width: 153px;">Ilsan</td>
</tr><tr>
<td>1</td>
<td>Jung</td>
<td>30</td>
<td>Seoul</td>
</tr><tr>
<td>2</td>
<td>Park</td>
<td>15</td>
<td>Yeosu</td>
</tbody>
</table>
</p>
</section>
</body>
</html>
Loading

0 comments on commit 3fd0f1b

Please sign in to comment.