ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [워크식스] 체크박스에 스타일 적용하기 - designCheckbox_1.0.js
    워크식스소식/플러그인소식 2017.12.28 11:30







     





    체크박스에 스타일 적용할수 있도록 해주는 플러그인

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="designCheckbox_1.0.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

    <style>

    label{
        color:#fff;
    }
    label.radio{
        width: 12px;
        height: 12px;
        display: inline-block;
        border: 1px solid #e2e2e2;
        vertical-align: top;
        margin-top: 0px;
        margin-right:3px;
        background: #fff;
    }
    label.radio i{
        display:none;
        color:#111;
    }
    input[type=radio]:checked + label i{
        display:block;
    }

    </style>


    <script>

    $(function(){
        
        $('body').designCheckbox();
            
    });    


    </script>

    <body>

        <label><input type="checkbox">선택</label>


    </body>

     

    1. 제이쿼리가 필요합니다.

     

     

     

     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="designCheckbox_1.0.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

    <style>

    label{
        color:#fff;
    }
    label.radio{
        width: 12px;
        height: 12px;
        display: inline-block;
        border: 1px solid #e2e2e2;
        vertical-align: top;
        margin-top: 0px;
        margin-right:3px;
        background: #fff;
    }
    label.radio i{
        display:none;
        color:#111;
    }
    input[type=radio]:checked + label i{
        display:block;
    }

    </style>


    <script>

    $(function(){
        
        $('body').designCheckbox();
            
    });    


    </script>

    <body>

        <label><input type="checkbox">선택</label>


    </body>

     

    2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. )


     

     

     

     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="designCheckbox_1.0.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

    <style>

    label{
        color:#fff;
    }
    label.radio{
        width: 12px;
        height: 12px;
        display: inline-block;
        border: 1px solid #e2e2e2;
        vertical-align: top;
        margin-top: 0px;
        margin-right:3px;
        background: #fff;
    }
    label.radio i{
        display:none;
        color:#111;
    }
    input[type=radio]:checked + label i{
        display:block;
    }

    </style>


    <script>

    $(function(){
        
        $('body').designCheckbox();
            
    });    


    </script>

    <body>

        <label><input type="checkbox">선택</label>


    </body>

     

    3. FontAwesome css를 연결해 줍니다.

     

     

     

     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="designCheckbox_1.0.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

    <style>

    label{
        color:#fff;
    }
    label.radio{
        width: 12px;
        height: 12px;
        display: inline-block;
        border: 1px solid #e2e2e2;
        vertical-align: top;
        margin-top: 0px;
        margin-right:3px;
        background: #fff;
    }
    label.radio i{
        display:none;
        color:#111;
    }
    input[type=radio]:checked + label i{
        display:block;
    }

    </style>


    <script>

    $(function(){
        
        $('body').designCheckbox();
            
    });    


    </script>

    <body>

        <label><input type="checkbox">선택</label>


    </body>

     

    4. 기본 스타일과 html 태그를 작성 합니다.

     




    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="designCheckbox_1.0.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

    <style>

    label{
        color:#fff;
    }
    label.radio{
        width: 12px;
        height: 12px;
        display: inline-block;
        border: 1px solid #e2e2e2;
        vertical-align: top;
        margin-top: 0px;
        margin-right:3px;
        background: #fff;
    }
    label.radio i{
        display:none;
        color:#111;
    }
    input[type=radio]:checked + label i{
        display:block;
    }

    </style>


    <script>

    $(function(){
        
        $('body').designCheckbox();
            
    });    


    </script>

    <body>

        <label><input type="checkbox">선택</label>


    </body>

     

    5. 페이지가 열릴때 자동으로 실행되게 함수를 작성 합니다.





    6. 플러그인은 워크식스에서 만들어졌습니다. 프로그램 소스 다운로드는 워크식스 홈페이지를 이용해 주세요.




    [문의하기]




    copyright ⓒ 2017. 워크식스


    댓글 0

work6.kr