그냥 개발자 블로그

[워크식스] select 에 css 적용하기 - designSelect_1.3.js 본문

소식/플러그인소식

[워크식스] select 에 css 적용하기 - designSelect_1.3.js

마음이파파 2017. 12. 21. 06:50











select 에 css를 적용할 수 있게 해주는 플러그인

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

<style>
body{font-size:12px;}
select{
    width:160px;
    height:26px;
    box-sizing: border-box;
}
.designSelect{
    position:relative;
    display:inline-block;
    cursor:pointer;
    border:1px solid #e2e2e4;
    border-radius: 4px;
    z-index: 10;
}
.designSelect .box{
}
.designSelect .box::after{
    content:"f107";
    font-family: "FontAwesome";
    position:absolute;
    right:10px;
    font-size:14px;
}
.designSelect .option_container{
    position:absolute;
    display:none;
    left:0px;
    height:0;
    border:1px solid #e2e2e4;
    border-radius:4px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    background: #fff;
}
.designSelect .option_container .option{
    background:#fff;
    text-align: left;
    color:#bdbdbd;
    border-radius: 4px;
}
.designSelect .option_container .option:hover{
    background:#f1f1f1;
    color:#797979;
}

</style>


<script>

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


</script>

<body>

    <select name="option">
        <option value='1'>옵션1</option>
        <option value='2'>옵션2</option>
    </select>


</body>

 

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

 

 

 

 

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

<style>
body{font-size:12px;}
select{
    width:160px;
    height:26px;
    box-sizing: border-box;
}
.designSelect{
    position:relative;
    display:inline-block;
    cursor:pointer;
    border:1px solid #e2e2e4;
    border-radius: 4px;
    z-index: 10;
}
.designSelect .box{
}
.designSelect .box::after{
    content:"f107";
    font-family: "FontAwesome";
    position:absolute;
    right:10px;
    font-size:14px;
}
.designSelect .option_container{
    position:absolute;
    display:none;
    left:0px;
    height:0;
    border:1px solid #e2e2e4;
    border-radius:4px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    background: #fff;
}
.designSelect .option_container .option{
    background:#fff;
    text-align: left;
    color:#bdbdbd;
    border-radius: 4px;
}
.designSelect .option_container .option:hover{
    background:#f1f1f1;
    color:#797979;
}

</style>


<script>

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


</script>

<body>

    <select name="option">
        <option value='1'>옵션1</option>
        <option value='2'>옵션2</option>
    </select>


</body>

 

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


 

 

 

 

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

<style>
body{font-size:12px;}
select{
    width:160px;
    height:26px;
    box-sizing: border-box;
}
.designSelect{
    position:relative;
    display:inline-block;
    cursor:pointer;
    border:1px solid #e2e2e4;
    border-radius: 4px;
    z-index: 10;
}
.designSelect .box{
}
.designSelect .box::after{
    content:"f107";
    font-family: "FontAwesome";
    position:absolute;
    right:10px;
    font-size:14px;
}
.designSelect .option_container{
    position:absolute;
    display:none;
    left:0px;
    height:0;
    border:1px solid #e2e2e4;
    border-radius:4px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    background: #fff;
}
.designSelect .option_container .option{
    background:#fff;
    text-align: left;
    color:#bdbdbd;
    border-radius: 4px;
}
.designSelect .option_container .option:hover{
    background:#f1f1f1;
    color:#797979;
}

</style>


<script>

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


</script>

<body>

    <select name="option">
        <option value='1'>옵션1</option>
        <option value='2'>옵션2</option>
    </select>


</body>

 

3. select 태그에 적용 시킬 스타일을 작성 합니다.

 

 

 

 

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

<style>
body{font-size:12px;}
select{
    width:160px;
    height:26px;
    box-sizing: border-box;
}
.designSelect{
    position:relative;
    display:inline-block;
    cursor:pointer;
    border:1px solid #e2e2e4;
    border-radius: 4px;
    z-index: 10;
}
.designSelect .box{
}
.designSelect .box::after{
    content:"f107";
    font-family: "FontAwesome";
    position:absolute;
    right:10px;
    font-size:14px;
}
.designSelect .option_container{
    position:absolute;
    display:none;
    left:0px;
    height:0;
    border:1px solid #e2e2e4;
    border-radius:4px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    background: #fff;
}
.designSelect .option_container .option{
    background:#fff;
    text-align: left;
    color:#bdbdbd;
    border-radius: 4px;
}
.designSelect .option_container .option:hover{
    background:#f1f1f1;
    color:#797979;
}

</style>


<script>

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


</script>

<body>

    <select name="option">
        <option value='1'>옵션1</option>
        <option value='2'>옵션2</option>
    </select>


</body>

 

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

 

 

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







[문의하기]




copyright ⓒ 2017. 워크식스


저작자표시 비영리 변경금지

'소식 > 플러그인소식' 카테고리의 다른 글

[워크식스] 라디오버튼에 스타일 적용하기 - designRadio_1.0.js  (0) 2018.01.03
[워크식스] 체크박스에 스타일 적용하기 - designCheckbox_1.0.js  (0) 2017.12.28
touchmovemenu.js 모바일웹 메뉴에 슬라이드 기능 추가 해주는 플러그인  (0) 2017.03.28
워크식스에서 제이쿼리 플러그인 다운로드 받는 방법  (0) 2017.03.02
bookmark.js - 스마트폰으로 홈페이지 방문시 바탕화면에서 바로가기 아이콘 자동추가  (0) 2017.02.19
'소식/플러그인소식' Related Articles more