<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. 플러그인은 워크식스에서 만들어졌습니다. 프로그램 소스 다운로드는 워크식스 홈페이지를 이용해 주세요.
'IT' 카테고리의 다른 글
skytemplate 간단 메뉴얼 (0) | 2017.12.29 |
---|---|
시놀로지 인증서 추가 시 오류 발생한 경우 대처법 (0) | 2017.12.28 |
[워크식스] 체크박스에 스타일 적용하기 - designCheckbox_1.0.js (0) | 2017.12.28 |
[워크식스] 건강 보조 식품 쇼핑몰 개발 (0) | 2017.12.23 |
[워크식스] select 에 css 적용하기 - designSelect_1.3.js (0) | 2017.12.21 |
[워크식스] 국방백신체계 홈페이지 서버 구축 (0) | 2017.12.11 |