seleku adalah framework javascript yang di buat khusus untuk frontend javascript dan memliki berbagai macam tools dan utilities
seleku bekerja dengan cara mengcompile file .seleku menjadi javascript dengan dukungan dari node js hasil compile seleku merupakan kumpulan class, utility dan object yang telah di buat khusus agar mudah di gunakan
seleku mengubah seleku components ke dalam real web components sehingga memiliki performa native web components
silahkan clone repo ini (seleku belum di publish masih dalam tahap pengembangan) kemudian jalankan perintah npm i untuk menginstall semua depencies yang di butuhkan setelah menginstall semua depencies maka jalankan perintah npm run dev-start dan silahkan jalankan file index.html yang ada di folder public, dan untuk melihat perubahan yang ada di seleku silahkan otak atik file yang berekstensi .seleku di dalam folder res
Memilih satu element html :
$elek('tag / .class / #id', index (opsional));$elek('.tombol'); // mengambil satu elementMemilih element tertentu atau semua element html yang dipilih :
$elek('p', 1); // mengambil tag <p> pada index ke-1
$elek('p', 'semua'); // mengambil semua tag <p>
$elek('p', 'awal'); // mengambil tag <p> pertama
$elek('p', 'akhir'); // mengambil tag <p> terakhirMemilih satu element html dan memanipulasinya :
$ku('h2').style('color', 'red');$ku('.card').css({
'background-color' : 'teal',
'color' : '#fff'
});$ku('body').tambahTag('p', 'Saya menggunakan SelekJS untuk ini!');- Menggunakan cara objek
const seleku = new SelekuClass();
const div = seleku.tambahElemen({
'tag' : 'div',
'attr' : {
'class' : 'container'
}
});
const card = seleku.tambahElemen({
'tag' : 'h2',
'attr' : {
'class' : 'card',
'id' : 'card'
},
'isi' : 'Ini judul dari card menggunakan Seleku JS'
});
seleku.gabung(div, card); // menggabungkan 'card' ke 'div'
$ku('body').gabung(div); // menggabungkan ke elemen 'body' atau yang lain sesuai target ($ku)- Menggunakan cara string
$ku('body').tambahElemen("<h2 class='judul' name='judul' id='judul'>Halo teman-teman.</h2>"); // Beserta Attribute
$ku('body').tambahElemen("<p>Selamat datang di web saya!</p>"); // Tanpa Attribute$ku('h2').isi('Selamat datang');$ku('h2').tambahClass('judul');$ku('h2').toggleClass('modemalam');$ku('h2').log();$ku('.tombol').pas('click', () => {
alert('Anda menekan tombol!');
);--- v1.2 ---
$ku('p.sinoposis').hapus();$ku('h1').attr('class', 'judul');
$ku('h1').attr('id', 'judulsaya');$ku('h2').hapusAttr('class');$ku('h1').tambahNilaiAttr('class', 'kelasbaru');$ku('h1').hapusNilaiAttr('class', 'judul');seleku juga memungkinkan untuk mengakses variabel di javascript secara langsung tanpa menggunakan DOM cukup dengan menambahkan {variable} di mana variabel
<html>
<h1>{namaku}</h1>
</html>
<style type="text/css">
h1{
color: red;
font-family: sans-serif;
}
</style>
<script type="text/javascript">
let namaku = "budiman";
</script>
selek juga memiliki binding dan reaktivitas, ingat hanya untuk tag input dan textarea, untuk menggunakannya cukup tambahkan atribut this-bind = {variable}
<html>
<h1>{namaku}</h1>
<input type="text" this:bind={namaku} name="">
</html>
<style type="text/css">
h1{
color: red;
font-family: sans-serif;
}
</style>
<script type="text/javascript">
let namaku = "budiman";
</script>
<html>
<h1>{namaku}</h1>
<input type="text" oninput="input(this)" name="">
</html>
<style type="text/css">
h1{
color: red;
font-family: sans-serif;
}
</style>
<script type="text/javascript">
let namaku = "budiman";
function input(element){
contexts.namaku = element.value;
}
</script>dynamic attribute adalah attribute yang memiliki reaktivitas dan memungkinkan terjadinya perubahan attribute itu sendiri secara realtime
<html>
<h1 id={my_id}>{namaku}</h1>
<input type="text" oninput="input(this)" name="">
</html>
<style type="text/css">
h1{
color: red;
font-family: sans-serif;
}
</style>
<script type="text/javascript">
let namaku = "budiman";
let my_id = "";
function input(element){
contexts.namaku = element.value;
contexts.my_id = element.value;
}
</script><html>
<h1 class="pad-10px p-t-20px">{namaku}</h1>
<input type="text" oninput="input(this)" name="">
</html>
<style type="text/css">
h1{
color: red;
font-family: sans-serif;
}
</style>
<script type="text/javascript">
let namaku = "budiman";
function input(element){
contexts.namaku = element.value;
contexts.my_id = element.value;
}
</script>let oneProps = {
"dbs-":{
"box-shadow": {
value: "0px 2px 5px rgba(0,0,0,$)",
type: ""
}
},
"c-": {
"color": {
value: null,
type: ""
}
},
};
let twoProps = {
"p-t-": {
"padding-top": {
value: null,
type: ""
},
},
"br-r-": {
"border-radius": {
value: null,
type: ""
},
},
};