* HTML CSS JS, NEW checkbox and radio

AHMED MOSTAFA · February 28, 2020

بسم الله الرحمن الرحيم

...

السلام عليكم ورحمة الله وبركاته

بعد رحلة طويلة مع لغة

Lua

بدأت التعلم في لغات البرمجة والتصميم الخاصة بالويب وحبيت اشاركم تجربتي

HELLO WORLD

After along journey learning Lua, I've started learning web design and web development

And I would like to share my experience with you hoping that you like it

معروف إن في لغة

HTML

لا يوجد

(radiobutton/checkbox) مباشر

وإنما الحل انك تعمل

input وتغير نوعه

we know that HTML doesn't have a direct *checkbox/radio* tags

but the method is to create an input and change its type

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <input type="checkbox" value="Click 1" >
        <input type="checkbox" value="Click 2" >
        <input type="checkbox" value="Click 3" >
        
        <input type="radio" name="g" value="Click 4" >
        <input type="radio" name="g" value="Click 5" >
        <input type="radio" name="g" value="Click 6" >
        
    </body>
</html>

ودي الطريقة اللي هتكمل بيها باقي الشرح

and that is what we going to use with HTML

طيب ده موضوعه سهل،، أما بالنسبة لتعديل التصميم أو الهيكل شئ مش سهل بالمرة أو مزعج نوعا ما لأن مفيش تاج معين مثلا تقدر تعدل بيه

ولكن بفضل الله قدرت اعمل تاجات جديدة في

ok, that was an easy part.. but the problem is in designing as it doesn't have a direct tags to be edited

But, I've created a new tags/attr to make the design easier

CSS ( checkbox, radio, bg, check )

checkbox {
     /* css code */
}

checkbox bg {
     /* css code */
}

checkbox bg check {
     /* css code */
}

checkbox[checked=true] bg {
     /* css code */
}

checkbox[checked=true] bg check {
     /* css code */
}

radio {
     /* css code */
}

radio bg {
     /* css code */
}

radio bg check {
     /* css code */
}

radio[checked=true] bg {
     /* css code */
}

radio[checked=true] bg check {
     /* css code */
}

التفاصيل

radio: الهيكل العام للعنصر و يحتوي على الشكل الداخلي كله

radio: the hole element

checkbox: الهيكل العام للعنصر و يحتوي على الشكل الداخلي كله

checkbox: the hole element

bg: الخلفية الخاصة بالشكل الداخلي

bg: the background of the checkbox/radio itself

check: الأيقونة اللي داخل الخلفية الخاصة بالشكل الداخلي

check: the icon inside the bg

طيب بالنسبة اكون الجافا سكربت

javascript

// created by Ahmed Mostafa "killerProject"

alert ("the best code i have ever made\n\nBETA\n\nCreated By: Ahmed Mostafa 'killerProject'")

msg = function (zmsg) {console.log(zmsg)}

function changeInput (_input) {
    if ( _input.getAttribute("modified") ) { return }
    if ( true ) { /* ignored */
        
        var op = _input.parentElement;
        
        var np = document.createElement( _input.type /*"label"*/ );
        
        op.replaceChild (np, _input);
        np.appendChild(_input);
        
        np.appendChild ( document.createTextNode( _input.value ) );
        
        np.style.display = "inline-block";
        np.style.overflow = "auto";
        
        np.setAttribute( "child", _input );
        
        np.setAttribute( "modified", true);
        np.setAttribute( "checked", _input.checked);
        _input.setAttribute( "modified", true);
        
        /*
        var w = _input.offsetWidth;
        var h = _input.offsetHeight;
        np.style.width = w+"px";
        np.style.height = h+"px";
        */
        
        np.style.position = "relative";
        var pw = np.offsetWidth;
        var ph = np.offsetHeight;
        var bg = document.createElement( "bg" );
        bg.appendChild ( document.createTextNode( "" ) );
        np.appendChild( bg );
        
        var check = document.createElement( "check" );
        check.appendChild ( document.createTextNode( "" ) );
        bg.appendChild( check );
        
        
        bg.style.position = "position: absolute; z-index: 2;";
        check.style.position = "position: absolute; z-index: 3;";
        
        _input.style = "position: absolute; left: 0; top: 0; padding: 0; margin: 0; width: "+pw+"px; height: "+ph+"px; -webkit-appearance: none; moz-appearance: none; appearance: none; outline: none; background: red; opacity: 0; z-index: 5;";
        np.setAttribute( "class", _input.getAttribute("class") );
        np.setAttribute( "id", _input.getAttribute("id") );
    }
}

/*
onchange = function () {
    changeInput (event.target)
}
*/

function check_create () {
    var nInput = event.target;
    changeInput (nInput);
    var parent = nInput.parentElement;
    parent.setAttribute( "checked", nInput.checked);
    
    var all = document.getElementsByTagName ("input");
    for ( let i = 0; i < all.length; i++ ) {
        if ( all[i].type == "radio" ) {
            let parent = all[i].parentElement;
            parent.setAttribute( "checked", all[i].checked);
        }
    }
}

onload = function () {
    var all = document.getElementsByTagName ("input");
    for ( let i = 0; i < all.length; i++ ) {
        changeInput (all[i])
        all[i].addEventListener("change", check_create);
    }
}

المميزات - advantages

متاح فيه التعديل عن طريق الآي دي أو الكلاس

Id, class

(edit by id or class)

سهولة التصميم بشكل كبير جدا

(too easy to edit)

تبسيط الاكواد في

HTML, CSS

(makes html, css *radio/checkbox* more easier to be edited)

مثال على التعديل على ال

CSS

example (css)

radio {
    padding-top: 5px;
    padding-left: 35px;
    width: 250px;
    height: 25px;
    background: #ccc5;
    border-radius: 45px;
    /*box-shadow: inset 0 0 0 1px #4a148c;*/
}

checkbox {
    padding-top: 5px;
    width: 250px;
    height: 25px;
    padding-left: 55px;
    background: #ccc5;
    border-radius: 45px;
    /*box-shadow: inset 0 0 0 1px #4a148c;*/
}

radio bg {
    transition: .5s;
    box-shadow: inset 0 0 0 2px #4a148c;
    position: absolute  ;
    top: 2.5px;
    left: 2.5px;
    
    background: #fff0;
    width: 25px;
    height: 25px;
    
    border-radius: 50%;
}

radio check {
    transition: .5s;
    position: absolute  ;
    top: 5px;
    left: 5px;
    
    background: #fff0;
    width: 15px;
    height: 15px;
    
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #4a148c;
}

checkbox bg {
    transition: .5s;
    box-shadow: inset 0 0 0 2px #4a148c;
    position: absolute ;
    top: 2.5px;
    left: 2.5px;
    
    background: #fff0;
    width: 50px;
    height: 25px;
    
    border-radius: 45px;
}

checkbox check {
    transition: .5s;
    position: absolute ;
    top: 5px;
    left: 5px;
    
    background: #fff0;
    width: 15px;
    height: 15px;
    
    border-radius: 45px;
    box-shadow: inset 0 0 0 1px #4a148c;
}

/* when true */

radio[checked=true] bg {
    transition: .5s;
    background: #b39ddb;
}
radio[checked=true] check {
    transition: .5s;
    background: #4a148c;
}

checkbox[checked=true] bg {
    transition: .5s;
    background: #b39ddb;
}
checkbox[checked=true] check {
    transition: .5s;
    background: #4a148c;
    left: 30px;
}

صورة للتصميم

A picture

أتمنى تقولولي رأيكم في الفكرة وشكرا

Please, rate the Idea

Edited February 28, 2020 by killerProject

el8rbawy · March 1, 2020

جميل ولكن الموضوع مش صعب ولا حاجه بالعكس سهل جدا وكان يمكن اختصار الكود اكثر وعدم استعمال

Javascript DOM
لان CSS

تقدم لك شئ اسمه

Pseudo-classes and pseudo-elements

ومنها

input:checked { /* checked === true */
  /* STYLE */
}
input:not(:checked) { /* checked === false */
  /* STYLE */
}
input:disabled { /* disabled === true */
  /* STYLE */
}
input:focus { /* focus === true */
  /* STYLE */
}

لتوضيح الفكرة اكثر:
https://codepen.io/Vestride/pen/dABHx

وبالتوفيق

Edited March 1, 2020 by NitroNN

AHMED MOSTAFA · March 1, 2020

@NitroNN انت ملاحظ اسماء التاجات ؟

radio / checkbox

على العموم مش هتفرق الهدف مجرد تجربة مش اكتر .. شكرا لإهتمامك بالموضوع

Edited March 1, 2020 by killerProject

Sign In

* HTML CSS JS, NEW checkbox and radio

Recommended Posts

AHMED MOSTAFA

Link to comment

el8rbawy

Link to comment

AHMED MOSTAFA

Link to comment

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

MTA Network

Social Media