Malayala Kit

MalayalaKit: JavaScript library for creating customizable web menus with tabs, buttons, switches, and input elements.

이 스크립트는 직접 설치하는 용도가 아닙니다. 다른 스크립트에서 메타 지시문 // @require https://update.greasyfork.org/scripts/482771/1323949/Malayala%20Kit.js을(를) 사용하여 포함하는 라이브러리입니다.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

작성자
garticio
버전
0.0.1.20240206140623
생성일
2023-12-20
갱신일
2024-02-06
크기
80.4KB
라이선스
해당 없음

Key Features:

  1. Tabs: Efficiently organize content into tabs for a structured user interface.
  2. Buttons: Incorporate interactive buttons with customizable labels and actions.
  3. Switches: Integrate toggle switches for binary options.
  4. Input Elements: Develop input fields with various types and customizable attributes.
  5. Slider: Integrate sliders with customizable labels, minimum and maximum values, and onchange events.
  6. Color Picker: Add color pickers with customizable labels and onchange events.

The name MalayalaKit is derived from the Malayalam language. Malayalam is spoken in the Indian state of Kerala, and people from Kerala are often referred to as Malayalis. The name holds personal significance, originating from memories associated with a cherished Christian girl. She used to express her affection, and though she is currently missing, the name MalayalaKit serves as a reminder of those moments.

The library's design empowers developers to swiftly integrate and configure menus within their web projects. It includes built-in styling for a visually appealing experience, yet developers can also customize the appearance to match their application's design.

To use MalayalaKit, developers can instantiate a menu, add tabs with associated content, and include buttons, switches, input elements, sliders, and color pickers within each tab. The library streamlines the process of creating dynamic and responsive menus for web applications.

Example

var toastManager = new MalayalaKit.ToastManager({position: 'top-center'}); // Supported Positions: top-left, top-right, bottom-left, bottom-right top-center, bottom-center - Defult is bottom-right.

var kit = new MalayalaKit.CreateMenu({
    title: "MalayalaKit",
    icon: "",
    size: { width: 500, height: 400 },
    position: { top: 50, left: 50 },
    hotkey: { keyCode: 77, ctrlKey: true, altKey: false, shiftKey: false },
    pointerLock: true
});

var general = new MalayalaKit.Tab("General");
general.addButton({ label: "Show All Toasts", buttonLabel: "Show Toasts", onclick: function () {
        toastManager.showToast({ message: 'Toast Message!', duration: 5000, showProgress: true });
        toastManager.showToast({ message: 'Toast Message!', showProgress: true });
        toastManager.showToast({ message: 'Toast Message!', type: 'info', showProgress: true });
        toastManager.showToast({ message: 'Toast Message!', type: 'warning', showProgress: true });
        toastManager.showToast({ message: 'Toast Message!', type: 'error', showProgress: true });
        // define 'toast' at the beginning of the toast and then use 'toast' toastManager.removeToast(toast); to delete the toast
    }
});
general.addButton({ label: "Button Label", style: "border", buttonLabel: "Buton Text", onclick: function () {
        toastManager.showToast({ message: 'Clicked', type: 'info' });
    }
});
general.addSwitch({ label: "Switch Label", value: true, onchange: function (value) {
        toastManager.showToast({ message: 'Switch value: ' + value, type: 'info' });
    }
});
general.addInput({ label: "Number Input", placeholder: "Enter a Number", type: "number", value: 0, onchange: function (value) {
    toastManager.showToast({ message: 'Number input value: ' + value, type: 'info' });
}
});
general.addHotkey({
    label: "Hotkey",
    value: { keyCode: 77, ctrlKey: true, altKey: false, shiftKey: false },
    onlistener: function (event) {
        toastManager.showToast({ message: 'Hotkey value: ' + event, type: 'info' });
    }
});
kit.addTab(general);

var tab2 = new MalayalaKit.Tab("Tab 2");
tab2.addButton({ buttonLabel: "Hide", onclick: function () {
        kit.toggleMenu();
    }
});
tab2.addSlider({ label: 'Slider Label', min: 0, max: 100, value: 50, onchange: function (value) {
        toastManager.showToast({ message: 'Slider Value:  ' + value, type: 'info' });
    }
});
tab2.addColorPicker({ label: 'Color Picker Label', value: '#ff0000', onchange: function (color) {
        toastManager.showToast({ message: 'Selected Color: ' + color, type: 'info' });
    }
});
kit.addTab(tab2);

MalayalaKit.setLanguage('ml'); // Supported languages: en, tr, ml, ta, hi, ko, ja, it, ar, fr

kit.render();