jQuery-like JavaScript framework พร้อม UI components และ Bootstrap-like styling
web/
├── css/
│ └── ms.css # Bootstrap-like styles (Earth tone)
├── js/
│ ├── ms.js # Core framework + UI components
│ └── app.js # SPA application logic
└── index.html # หน้า Web App หลัก
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/ms.css">
</head>
<body>
<!-- สร้าง UI components ตรงนี้ -->
<script src="js/ms.js"></script>
</body>
</html>// Core utilities
$ms.core.log('Hello World');
$ms.core.extend(obj1, obj2);
// Module registry
$ms.moduleRegistry.register('myModule', {
name: 'My Module',
init: function() {
console.log('Module initialized');
}
});
// DOM manipulation (jQuery-like)
$('#app').html('New content');
$('.button').on('click', handler);// สร้างปุ่ม
var btn = $ms.ui.create('button', {
text: 'Click Me',
type: 'primary',
size: 'lg',
click: function() {
alert('Button clicked!');
}
});
document.body.appendChild(btn);// สร้าง input field
var input = $ms.ui.create('input', {
label: 'Email',
type: 'email',
placeholder: 'Enter your email',
change: function(e) {
console.log('Value changed:', e.target.value);
}
});
document.body.appendChild(input);// สร้าง card
var card = $ms.ui.create('card', {
title: 'Card Title',
content: 'This is card content',
footer: 'Card footer'
});
document.body.appendChild(card);// สร้าง alert
var alert = $ms.ui.create('alert', {
type: 'success',
content: 'Operation completed successfully!',
dismissible: true
});
document.body.appendChild(alert);// สร้าง badge
var badge = $ms.ui.create('badge', {
text: 'New',
type: 'danger'
});
document.body.appendChild(badge);// สร้าง progress bar
var progress = $ms.ui.create('progress', {
value: 75,
showText: true,
type: 'success'
});
document.body.appendChild(progress);// สร้าง loading spinner
var spinner = $ms.ui.create('spinner', {
type: 'primary',
small: true
});
document.body.appendChild(spinner);// แสดง notification
$ms.ui.utils.notify('Success message', 'success', 3000);
$ms.ui.utils.notify('Error message', 'error');
$ms.ui.utils.notify('Warning message', 'warning');// สร้าง modal
var modal = $ms.ui.utils.modal({
title: 'Confirm Action',
content: 'Are you sure you want to continue?',
buttons: [
{
text: 'Cancel',
click: function() {
modal.remove();
}
},
{
text: 'Confirm',
primary: true,
click: function() {
console.log('Confirmed!');
modal.remove();
}
}
]
});// สร้าง loading ใน container
var spinner = $ms.ui.utils.loading('#container', 'large');สามารถใช้ CSS classes ทั้งหมดได้เหมือน Bootstrap:
<div class="ms-container">
<div class="ms-row">
<div class="ms-col-6">Column 1</div>
<div class="ms-col-6">Column 2</div>
</div>
</div><button class="ms-btn ms-btn-primary">Primary</button>
<button class="ms-btn ms-btn-success ms-btn-lg">Large Success</button>
<button class="ms-btn ms-btn-outline-danger">Outline Danger</button><div class="ms-form-group">
<label class="ms-form-label">Email address</label>
<input type="email" class="ms-form-control" placeholder="name@example.com">
</div><div class="ms-alert ms-alert-success" role="alert">
This is a success alert—check it out!
</div><div class="ms-card">
<div class="ms-card-header">Featured</div>
<div class="ms-card-body">
<h5 class="ms-card-title">Special title treatment</h5>
<p class="ms-card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="ms-btn ms-btn-primary">Go somewhere</a>
</div>
</div><div class="ms-text-center ms-mt-3 ms-p-4">
Centered content with margin and padding
</div>- $ms.core - Utilities และ helper functions
- $ms.moduleRegistry - ระบบจัดการ modules
- $ms.query - DOM manipulation library (jQuery-like)
- button - ปุ่มหลายประเภทและขนาด
- input - form controls พร้อม validation
- alert - ข้อความแจ้งเตือน
- card - การ์ดสำหรับแสดงข้อมูล
- badge - ป้ายข้อความเล็กๆ
- progress - progress bars
- spinner - loading indicators
- createElement() - สร้าง DOM elements พร้อม attributes
- notify() - แสดง notifications
- modal() - สร้าง modal dialogs
- loading() - สร้าง loading spinners
- Grid System - 12-column responsive grid
- Typography - fonts และ text utilities
- Components - buttons, forms, alerts, cards, badges, progress
- Utilities - spacing, display, text alignment
ดูตัวอย่างใน index.html สำหรับการใช้งานจริง
MIT License