JUI provide all kinds of UI components that are used in web pages. However, charts and grids are not included.
JavaScript CSS HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bundles
dist
examples
images
src
test
.gitignore
README.md
package.json
webpack.config.js
webpack.dev.js
webpack.prod.js

README.md

Installation

NPM

npm install juijs-ui

Browser

<link rel="stylesheet" href="../dist/jui-ui.classic.css" />
<script src="../dist/vendors.js"></script>
<script src="../dist/jui-ui.js"></script>

ES Modules

The difference with the existing method is that you need to add the module directly using the 'use' function.

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

jui.use(TimepickerComp);

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

.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";
}

Usage

<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 UI component creation code is the same as the existing one.

jui.ready([ "ui.timepicker" ], function(timepicker) {
    timepicker("#timepicker_date");
    timepicker("#timepicker_time");
});