EasyJS is a lightweight JavaScript framework designed to simplify the creation of various web components like accordion widgets. It provides essential utility functions for everyday web development tasks, ensuring minimal overhead and ease of use.
- Accordion Widgets: Easily transform HTML elements into accordion-style panels.
- Modals: Coming soon! Simplify the creation and management of modal dialogs.
- Table Pagination: Coming soon! Easily add pagination to tables.
- DOM Manipulation: Simple methods to get and set HTML content and element values.
- AJAX Requests: A straightforward API for making GET and POST AJAX requests.
- Combo Box Population: Coming soon! Simplify the population of combo boxes from JSON data sources.
To use EasyJS, include the EasyJS.js script in your HTML file and initialize the framework after the DOM content is loaded.
Add the EasyJS script to your project:
<script src="path/to/EasyJS.js"></script>To create an accordion, set the accordian attribute to true on the container element:
<div accordian="true">
<h3>Section 1</h3>
<div>Content for section 1.</div>
<h3>Section 2</h3>
<div>Content for section 2.</div>
</div>The framework will automatically initialize all elements with the accordian="true" attribute as accordion widgets when the page loads.
EasyJS wraps HTML elements in EasyJSElement objects, allowing easy manipulation of their contents.
const element = $$$('elementId'); // Retrieve element by ID
element.html('<p>New HTML content</p>'); // Set inner HTML
element.value('New value'); // Set input valuePerform AJAX requests using the $$$.ajax function:
$$$.ajax({
url: 'https://api.example.com/data',
methodType: 'GET', // or 'POST'
data: { key1: 'value1', key2: 'value2' }, // Optional data
success: function(response) {
console.log('Success:', response);
},
failure: function() {
console.error('Failed to fetch data.');
}
});The fillComboBox method will soon provide a simplified way to populate SELECT elements from a JSON data source.
Example Usage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EasyJS Example</title>
<script src="path/to/easyjs.js"></script>
</head>
<body>
<select id="designationCode"></select>
<script>
function populateDesignations() {
$$$.ajax({
"url": "designationsView",
"methodType": "GET",
"success": function(responseData) {
var designations = JSON.parse(responseData);
$$$("designationCode").fillComboBox({
"dataSource": designations,
"text": "title",
"value": "code",
"firstOption": {
"text": "<select designation>",
"value": "-1"
}
});
},
"failure": function() {
alert("Some problem occurred while fetching designations.");
}
});
}
window.addEventListener('load', populateDesignations);
</script>
</body>
</html>In this example, the populateDesignations function makes an AJAX GET request to fetch a list of designations. The response is parsed and used to fill the combo box with the ID designationCode. The fillComboBox method is structured to take a dataSource, the text and value fields to use for options, and an optional first placeholder option.
function $$$(cid)- Description: Selects an HTML element by its ID and returns an
EasyJSElementobject. - Parameters:
cid(string) - The ID of the HTML element.
-
html(content)
- Sets or gets the HTML content of the element.
- Parameters:
content(optional string) - The HTML content to set.
-
value(content)
- Sets or gets the value of input elements.
- Parameters:
content(optional string) - The value to set.
-
fillComboBox(options)
- Description: Will simplify the process of populating a
SELECTelement with options from a JSON data source. - Parameters:
options(object) - Configuration for populating the combo box.dataSource(array) - Array of objects to populate the options.text(string) - Key in the data objects for option text.value(string) - Key in the data objects for option value.firstOption(object) - Optional first option for the combo box, withtextandvalue.
- Description: Will simplify the process of populating a
function $$$.ajax(jsonObject)- Description: Performs an AJAX request.
- Parameters:
url(string) - The URL for the request.methodType(string) - The HTTP method (GETorPOST).data(object) - Data to send with the request.success(function) - Callback for successful response.failure(function) - Callback for failed response.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EasyJS Example</title>
<script src="path/to/easyjs.js"></script>
</head>
<body>
<div accordian="true">
<h3>Click me!</h3>
<div>This is an accordion panel.</div>
<h3>Click me too!</h3>
<div>This is another accordion panel.</div>
</div>
<select id="designationCode"></select>
<script>
function populateDesignations() {
$$$.ajax({
"url": "designationsView",
"methodType": "GET",
"success": function(responseData) {
var designations = JSON.parse(responseData);
$$$("designationCode").fillComboBox({
"dataSource": designations,
"text": "title",
"value": "code",
"firstOption": {
"text": "<select designation>",
"value": "-1"
}
});
},
"failure": function() {
alert("Some problem occurred while fetching designations.");
}
});
}
window.addEventListener('load', populateDesignations);
window.addEventListener('load', $$$.initFramework);
</script>
</body>
</html>EasyJS is released under the MIT License. See the LICENSE file for more details.