ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [워크식스] 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. 워크식스


    댓글 0

work6.kr