designRadio_1.0.js

브라우저 종류에 관계 없이 라디오버튼에 스타일을 적용할 수 있게 해주는 플러그인

샘플영상

다운로드

designRadio_1.0.js 다운로드

설치/사용법

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

<script src="designRadio_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;

    border-radius: 50%;
    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').designRadio();
        
});    


</script>

<body>

    <label><input type="radio" name="test" value="" checked>선택1</label>&nbsp;
     <label><input type="radio" name="test" value="">선택2</label>
</body>

 

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

 

 

 

 

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

<script src="designRadio_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;

    border-radius: 50%;
    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').designRadio();
        
});    


</script>

<body>

    <label><input type="radio" name="test" value="" checked>선택1</label>&nbsp;
     <label><input type="radio" name="test" value="">선택2</label>
</body>

 

2. 다운로드 받은 플러그인을 설치 합니다.

 

 

 

 

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

<script src="designRadio_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;

    border-radius: 50%;
    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').designRadio();
        
});    


</script>

<body>

    <label><input type="radio" name="test" value="" checked>선택1</label>&nbsp;
     <label><input type="radio" name="test" value="">선택2</label>
</body>

 

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

 

 

 

 

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

<script src="designRadio_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;

    border-radius: 50%;
    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').designRadio();
        
});    


</script>

<body>

    <label><input type="radio" name="test" value="" checked>선택1</label>&nbsp;
     <label><input type="radio" name="test" value="">선택2</label>

</body>

 

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

 

 

 

 

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

<script src="designRadio_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;

    border-radius: 50%;
    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').designRadio();
        
});    


</script>

<body>

    <label><input type="radio" name="test" value="" checked>선택1</label>&nbsp;
     <label><input type="radio" name="test" value="">선택2</label>
</body>

 

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

 

* 플러그인 설치는 지원하지는 않습니다.
위로

잠시만 기다려주세요.