JSFrame examples

This is a small sample code collection using JSFrame. All of the code presented here can be found on GitHub.

Window creation:

Create a window and the basic use of windows

• Create a window with content written in HTML
  
• Using iframe for window content
  
• Set window position and size
  

Event handling:

How to handle window events and the events of the content in the window

• Handling move and resize events.
  
• Changing the resize area to adjust sensitivity by mouse or touch
  
• Handling of content click events, etc.
  
• Focusing a window and focus(get focus),blur(lost focus) handling
  

Styling and look:

Customize the look of your windows

• custom style: Rounded button on the corner with no title bar
• custom style:Using Image buttons and icons on title bar
• custom style: Using Font Awesome buttons and icons on title bar
• custom style: Show and hide buttons on title bar
• custom style: Child menu for buttons on title bar
• custom style: Popup style window
• custom style: Thick title bar
• preset style: Yosemite
• preset window: Yosemite
• (*)preset_yosemite.html - Preset style demo 'yosemite' * This example code is for v1.5 or later and will be updated in the future
• (*)preset_win10.html - Preset style demo 'redstone' like win10 * This example code is for v1.5 or later and will be updated in the future
• (*)preset_material.html- Preset style demo 'material' * This example code is for v1.5 or later and will be updated in the future

Alignment, Order and Where the window is created:

Set the offset position of the entire window of jsFrame, and set the display order (z-index).

• Adjust Window display order with parentElement
• Anchor of the window position
• Fixed(scroll-independent) and Not-fixed window
• Make the window live inside a specific element using parentElement
• Make maximized window size same as a specific parentElement
• Create a window inside a window, nested windows

Maximize/Minimize operation:

Controls make it easier to implement things like maximizing and minimizing windows

• Window control commands
• (*)window_control.html - Window size control manually * This example code is for v1.5 or later and will be updated in the future
• (*)preset_yosemite_auto.html - Preset style demo 'yosemite' * This example code is for v1.5 or later and will be updated in the future

Utilities:

• (*)toast.html - Show toast * This example code is for v1.5 or later and will be updated in the future
• (*)toast_simple.html - Show simple toast * This example code is for v1.5 or later and will be updated in the future

Advanced:

• Desktop OS on the web with 'Yosemite'
• (*)modal.html - Show modal windows * This example code is for v1.5 or later and will be updated in the future
• (*)chatbot_ui.html - Using frame as a chat container * This example code is for v1.5 or later and will be updated in the future
• (*)Animation * This example code is for v1.0 or later and will be updated in the future