Skip to content

Commit 7de9ebb

Browse files
riversunriversun
committed
update readme
1 parent e760b14 commit 7de9ebb

1 file changed

Lines changed: 265 additions & 52 deletions

File tree

‎README.md‎

Lines changed: 265 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,106 +2,277 @@
22

33
### What is '**JsFrame.js**' like?
44
It is an independent lightweight multi-window library for javascript.
5-
- Create various popup windows.
6-
- Styling the appearance flexibly.
5+
- You can create various floating windows (called **frame**) and popup windows.
6+
- You can create toast.
7+
- You can create multi-window apps.
78

9+
# DEMO
10+
https://riversun.github.io/jsframe/examples/v150/preset_yosemite.html
11+
https://riversun.github.io/jsframe/examples/v150/preset_win10.html
812

9-
[Click to open DEMO](https://riversun.github.io/jsframe/examples/ex03/index.html)
10-
11-
[![ex00](https://riversun.github.io/jsframe/capture/ex03.png)](https://riversun.github.io/jsframe/examples/ex03/index.html)
13+
[![ex00](https://riversun.github.io/jsframe/capture/img_01_yosemite.png)](https://riversun.github.io/jsframe/examples/ex00/index.html)
1214

1315

1416
It is licensed under [MIT](https://opensource.org/licenses/MIT) license.
1517

1618
# install
1719

20+
**using npm**
21+
22+
```shell
23+
npm install jsframe.js
1824
```
19-
npm i jsframe.js
25+
26+
**use as below**
27+
28+
```html
29+
<script src="https://riversun.github.io/jsframe/jsframe.js"></script>
2030
```
2131

2232
# Quick Start
23-
## Show Popup Window
24-
- Resizable
25-
- Draggable (Movable)
33+
## Create window
34+
35+
Here's is basic example of JSFrame.js to show a simple window.
36+
37+
- Call the ```JSFrame.create``` method with initialization parameter to show a window
38+
- Set html as a content of the window.Content could simply be some text or html.
39+
- ```frame.show``` to show the window
2640

27-
**SCRIPT**
2841
```js
29-
var jsFrame = new JSFrame();
42+
const jsFrame = new JSFrame();
43+
//Create window
44+
const frame = jsFrame.create({
45+
title: 'Window',
46+
left: 20, top: 20, width: 320, height: 220,
47+
movable: true,//Enable to be moved by mouse
48+
resizable: true,//Enable to be resized by mouse
49+
html: '<div id="my_element" style="padding:10px;font-size:12px;color:darkgray;">Contents of window</div>'
50+
});
51+
```
3052

31-
var frame01 = jsFrame.createFrame(20, 40, 320, 220)//create frame (left,top,width,height)
32-
.setTitle("Example")//window title
33-
.setResizable(true)//if true,you can resize the window
34-
.setMovable(true)//if true,you can drag and move the window
35-
.setTitleBarClassName('style_default', 'style_focused');//set titlebar style
53+
**DEMO**
54+
https://riversun.github.io/jsframe/examples/v150/simple.html
3655

37-
var innerHTML='<div id="my_element" style="padding:10px;font-size:12px;color:darkgray;">Example</div>';
56+
[![ex00](https://riversun.github.io/jsframe/capture/ex00.png)](https://riversun.github.io/jsframe/examples/v150/simple.html)
3857

39-
//set content
40-
frame01.setHTML(innerHTML);
58+
**Tips**
59+
- You can also get DOM element from contents that you set as html.Call ```frame.$([selector])```.For example, you can get the element which id is 'my_element' by calling ```frame.$('#my_element')```
4160

42-
//show window
43-
frame01.show();
61+
## Show specified URL as content of window
4462

45-
//get inner element by queryselector and change it.
46-
frame01.$("#my_element").innerHTML='Hello World!';
63+
- Set ```url``` to the initialization parameter.
64+
- The window contents will be shown as iframe.
65+
- Set callback function which is called after loading a page as ```urlLoaded```
4766

48-
//if you want to close frame using code,uncomment following line.
49-
//frame01.closeFrame();
67+
```js
68+
const frame01 = jsFrame.create({
69+
title: 'Window1',
70+
left: 20, top: 20, width: 320, height: 160,
71+
url: 'iframe_content01.html',//URL to display in iframe
72+
//urlLoaded:Callback function called after loading iframe
73+
urlLoaded: (frame) => {
74+
//Called when the url finishes loading
75+
}
76+
});
77+
frame01.show();
5078
```
5179

5280
**DEMO**
53-
https://riversun.github.io/jsframe/examples/ex00/index.html
54-
[![ex00](https://riversun.github.io/jsframe/capture/ex00.png)](https://riversun.github.io/jsframe/examples/ex00/index.html)
81+
https://riversun.github.io/jsframe/examples/v150/iframe.html
5582

83+
[![ifrmae](https://riversun.github.io/jsframe/capture/img_03_iframe.png)](https://riversun.github.io/jsframe/examples/v150/iframe.html)
5684

57-
# Examples
58-
All examples are included in the project. You can modify,customize example after cloning the project
85+
**Tips**
86+
- You can also get DOM element in the page shown as window's content area specified by url(iframe) ,You can call like ```frame.$('#my_element')```.
5987

60-
```
61-
git clone https://github.com/riversun/JSFrame.js.git
62-
```
6388

89+
## Show window as a modal window
6490

65-
## Example:Basic
66-
**DEMO**
67-
https://riversun.github.io/jsframe/examples/ex01/index.html
91+
- Call ```frame.showModal``` to show the window as a modal window.
92+
- By specifying like ```showModal(callbackFunc)``` you can receive a callback when the modal window is closed.
6893

69-
[![ex00](https://riversun.github.io/jsframe/capture/ex01.png)](https://riversun.github.io/jsframe/examples/ex01/index.html)
94+
```js
95+
const modalFrame = jsFrame.create({
96+
title: 'modal window',
97+
left: 0, top: 0, width: 320, height: 220,
98+
html: 'something'
99+
});
100+
//Show as a modal window
101+
modalFrame.showModal(_frame => {
102+
//Callback when modal window is closed.
103+
});
104+
```
70105

71-
## Example:Window with Iframe contents
72106
**DEMO**
73-
https://riversun.github.io/jsframe/examples/ex02/index.html
107+
https://riversun.github.io/jsframe/examples/v150/modal.html
74108

75-
[![ex00](https://riversun.github.io/jsframe/capture/ex02.png)](https://riversun.github.io/jsframe/examples/ex02/index.html)
109+
[![ifrmae](https://riversun.github.io/jsframe/capture/img_04_modal.png)](https://riversun.github.io/jsframe/examples/v150/modal.html)
76110

77-
## Example:OS X style
111+
## Styling
78112

79-
**DEMO**
80-
https://riversun.github.io/jsframe/examples/ex03/index.html
113+
- JSFrame.js has the option where you can design the window appearance or apply style to certain elements and then apply styles to them as you want.
114+
- You can specify style from preset or design it yourself.
115+
- Set ```appearanceName``` to initialization parameter to select the window design called ```appearance```.
116+
- Or if you want to design appearance from scratch, you can set ```appearance``` to initialization parameter.
81117

82-
[![ex00](https://riversun.github.io/jsframe/capture/ex03.png)](https://riversun.github.io/jsframe/examples/ex03/index.html)
118+
**Style from preset**
83119

84-
## Example:Win style
120+
```javascript
121+
const frame01 = jsFrame.create({
122+
title: 'Yosemite style',
123+
left: 20, top: 20, width: 320, height: 220,
124+
appearanceName: 'yosemite',//Now preset is selectable from 'yosemite','redstone','popup'
125+
style: {
126+
backgroundColor: 'rgba(255,255,255,0.9)',
127+
},
128+
html: '<div style="padding:10px;">Preset is selected by preset name</div>'
129+
}).show();
130+
```
85131

86132
**DEMO**
87-
https://riversun.github.io/jsframe/examples/ex04/index.html
133+
https://riversun.github.io/jsframe/examples/v150/styling.html
88134

89-
[![ex00](https://riversun.github.io/jsframe/capture/ex04.png)](https://riversun.github.io/jsframe/examples/ex04/index.html)
135+
[![styling](https://riversun.github.io/jsframe/capture/img_05_styling.gif)](https://riversun.github.io/jsframe/examples/v150/styling.html)
90136

91137

92-
## Example:Various styles
138+
## Event handling
139+
- You can set an event handler (callback function) for the DOM element in the content specified by html or url.
140+
- You can also set an event handler for buttons on the title bar.
141+
- Call like ```frame.on(selector,'click',(_frame,event)=>{});``` to set click event handler functions.
142+
143+
```javascript
144+
//Set click handler for DOM element specified as html or url in the initialization parameters.
145+
frame.on('#bt_cancel', 'click', (_frame, evt) => {
146+
});
147+
148+
//Event handler for buttons on the title bar.
149+
frame.on('minimizeButton', 'click', (_frame, evt) => {
150+
});
151+
152+
```
153+
93154
**DEMO**
94-
https://riversun.github.io/jsframe/examples/ex05/index.html
155+
https://riversun.github.io/jsframe/examples/v150/event_handling.html
95156

96-
[![ex00](https://riversun.github.io/jsframe/capture/ex05.png)](https://riversun.github.io/jsframe/examples/ex05/index.html)
157+
[![styling](https://riversun.github.io/jsframe/capture/img_05_event.png)](https://riversun.github.io/jsframe/examples/v150/event_handling.html
158+
)
97159

160+
## Show toast messages.
161+
162+
- A toast provides simple message about an operation in a small popup. Toasts automatically disappear after the time specified by ```duration```.
163+
- Call ```JSFrame.showToast``` to show a toast.
164+
- You can customize the appearance and something.
165+
166+
**Simple toast**
167+
168+
```js
169+
const jsFrame = new JSFrame();
170+
jsFrame.showToast({
171+
html: 'Default toast'
172+
});
173+
```
174+
175+
[![toast](https://riversun.github.io/jsframe/capture/toastd.gif)](https://riversun.github.io/jsframe/examples/v150/toast.html)
176+
177+
**Specify the position**
178+
179+
```js
180+
jsFrame.showToast({
181+
align: 'center', html: 'Toast displayed in the center'
182+
});
183+
```
184+
185+
You can specify the position with ```align``` like below.
186+
187+
**align:'top'** =>Toast displayed at the top
188+
**align:'center'** =>Toast displayed in the center
189+
**align:'bottom'** =>Toast displayed at the bottom(default)
190+
191+
**Customize toast**
192+
193+
```js
194+
jsFrame.showToast(
195+
{
196+
width: 260,
197+
height: 100,
198+
duration: 2000,//Duration(millis)
199+
align: 'center',// alignment from 'top'/'center'/'bottom'(default)
200+
style: {
201+
borderRadius: '2px',
202+
backgroundColor: 'rgba(0,124,255,0.8)',
203+
},
204+
html: '<span style="color:white;">Custom toast</span>',
205+
closeButton: true,//Show close button
206+
closeButtonColor: 'white'//Color of close button
207+
});
208+
209+
```
98210

99-
## Example:Animations #1
100211
**DEMO**
101-
https://riversun.github.io/jsframe/examples/ex06/index.html
212+
https://riversun.github.io/jsframe/examples/v150/toast.html
102213

103-
[![ex00](https://riversun.github.io/jsframe/capture/ex06.png)](https://riversun.github.io/jsframe/examples/ex06/index.html)
214+
[![toast](https://riversun.github.io/jsframe/capture/toastc.gif)](https://riversun.github.io/jsframe/examples/v150/toast.html)
215+
216+
## Window operation
217+
218+
**Close window**
219+
220+
```js
221+
frame.closeFrame();
222+
```
223+
224+
**Hide Window**
225+
226+
```js
227+
frame.hide();
228+
```
229+
230+
**Focus window (and pull up to the front)**
231+
232+
```js
233+
frame.requestFocus();
234+
```
235+
236+
**Get window by name**
237+
238+
```js
239+
var frame = jsFrame.getWindowByName('my-window');
240+
```
241+
242+
# Examples
243+
All examples are included in the project. You can modify,customize example after cloning the project
104244

245+
```
246+
git clone https://github.com/riversun/JSFrame.js.git
247+
```
248+
249+
## Window initialization parameters
250+
251+
```js
252+
const frame = jsFrame.create(
253+
{
254+
name: 'my-window-name',//Window name.Unique name is required.
255+
title: 'Window0',//Window title
256+
left: 20,//x coordinate of the upper left corner of the window
257+
top: 20,//y coordinate of the upper left corner of the window
258+
width: 320,//width of the window
259+
height: 220,//height of the window
260+
minWidth: 160,//The minimum width of the window
261+
minHeight: 100,//The minimum height of the window
262+
movable: true,//true:You can move the window with mouse
263+
resizable: true,//true:You can resize the window with mouse
264+
appearance: appearanceObj,//Appearance object
265+
appearanceName: 'yosemite',//Preset name of appearance(Not with 'appearance')
266+
style: {//Style of the content.Can be specified just like inline style attribute.
267+
backgroundColor: 'rgba(220,220,220,0.8)',//Ex.Background color of content(Opacity can be specified)
268+
overflow: 'auto',//Ex.What to do when the drawing extends beyond the content area
269+
},
270+
html: 'Contents',//HTML shown in the content(Not with 'url')
271+
url: 'content01.html',//The URL for contents.To be shown in iframe.
272+
urlLoaded: (frame) = {}//Callback function when url is finished loading.
273+
274+
});
275+
```
105276

106277
# Classese and Methods/Members
107278
### org.riversun.JSFrame class
@@ -166,5 +337,47 @@ https://riversun.github.io/jsframe/examples/ex06/index.html
166337

167338
<hr>
168339

340+
### V1.00 Examples (available for latest version)
341+
342+
343+
## Example:Basic
344+
**DEMO**
345+
https://riversun.github.io/jsframe/examples/ex01/index.html
346+
347+
[![ex00](https://riversun.github.io/jsframe/capture/ex01.png)](https://riversun.github.io/jsframe/examples/ex01/index.html)
348+
349+
## Example:Window with Iframe contents
350+
**DEMO**
351+
https://riversun.github.io/jsframe/examples/ex02/index.html
352+
353+
[![ex00](https://riversun.github.io/jsframe/capture/ex02.png)](https://riversun.github.io/jsframe/examples/ex02/index.html)
354+
355+
## Example:OS X style
356+
357+
**DEMO**
358+
https://riversun.github.io/jsframe/examples/ex03/index.html
359+
360+
[![ex00](https://riversun.github.io/jsframe/capture/ex03.png)](https://riversun.github.io/jsframe/examples/ex03/index.html)
361+
362+
## Example:Win style
363+
364+
**DEMO**
365+
https://riversun.github.io/jsframe/examples/ex04/index.html
366+
367+
[![ex00](https://riversun.github.io/jsframe/capture/ex04.png)](https://riversun.github.io/jsframe/examples/ex04/index.html)
368+
369+
370+
## Example:Various styles
371+
**DEMO**
372+
https://riversun.github.io/jsframe/examples/ex05/index.html
373+
374+
[![ex00](https://riversun.github.io/jsframe/capture/ex05.png)](https://riversun.github.io/jsframe/examples/ex05/index.html)
375+
376+
377+
## Example:Animations #1
378+
**DEMO**
379+
https://riversun.github.io/jsframe/examples/ex06/index.html
380+
381+
[![ex00](https://riversun.github.io/jsframe/capture/ex06.png)](https://riversun.github.io/jsframe/examples/ex06/index.html)
169382

170383
### All assets moved from mysvn

0 commit comments

Comments
 (0)