hanker

Kendo - Kendo TextBox (1) (JQuery) 본문

JavaScript/Kendo

Kendo - Kendo TextBox (1) (JQuery)

hanker 2024. 9. 16. 10:39
반응형

 

<html>
<head>
    <title>Title</title>
</head>
<body>
    Hello, Hanker~!
    <input type="text" name="name" value=""/>
</body>
</html>

https://demos.telerik.com/kendo-ui/

 

jQuery Demos and Examples with HTML5/JavaScript Source Code | Kendo UI for jQuery

Single-Page Application

demos.telerik.com

 

 

 

 

Kendo는 웹 에서 사용되는  UI 컴포넌트 라이브러리이다. 

textbox, table, label, button 등.. 각종 UI를 지원해주는데, 사용해보면 얼마나 편리한지 알 수 있다.

 

 

Kendo를 하나하나 뜯어보자

html에서 지원하는 textbox를 만들어보면 

<html>
<head>
    <title>Title</title>
</head>
<body>
    Hello, Hanker~!
    <input type="text" name="name" value=""/>
</body>
</html>

이렇게 볼품없이 박스 하나가 생기고 위 영역에 글씨를 쓸 수 있게되는데, 해당 폼으로는 만들어주고도 욕먹는 상황이 온다.

 

우선 미리 Kendo를 적용한 textbox를 보자

동글동글하니 성의가 있어보이면서 아주 이뻐졌다. 

적용 방법에 대해서 알아보자

 

<html>
<head>
    <title>Title</title>
</head>

<body>
    Hello, Hanker~!
    <input type="text" name="name" id="textbox" style="width: 130px;" value=""/>
</body>

<script>
    $("#textbox").kendoTextBox();
</script>
</html>

 

id값이 textbox인 input 태그에 Kendo를 적용시키는 부분이다. 간단하게 적용이 된다.

 

여러개 적용할 경우에 class로 지정해서 사용도 가능하다.

<html>
<head>
    <title>Title</title>
</head>

<body>
    Hello, Hanker~!
    <input type="text" name="name" id="textbox" class="textbox" style="width: 130px;" value=""/>
    <input type="text" name="name" id="textbox2" class="textbox" style="width: 130px;" value=""/>

</body>

<script>
    $(".textbox").kendoTextBox();
</script>
</html>

 

오늘은 적용하는 방법에 대해 알아봤고, 추후 Kendo textbox 옵션들에 대해 알아보자

 

이런 단순 CSS 적용 때문에 쓰는건 아니고 응용해서 사용할 수 있는 부분들이 방대하니 한번 관심있는 개발자 분들은 위 링크 들어가서 확인해보시길.

 

끝

반응형
저작자표시

'JavaScript > Kendo' 카테고리의 다른 글

Kendo - KendoGrid (Jquery) 그리드(테이블) CSS 수정 UI (2)  (0) 2024.09.22
Kendo - KendoGrid (Jquery) 그리드(테이블) 생성 UI (1)  (1) 2024.09.21
Kendo - kendo TextBox (4) (JQuery - enable) 입력 안내  (0) 2024.09.19
Kendo - kendo TextBox (3) (JQuery - placeholder) 입력 안내  (0) 2024.09.18
Kendo - kendo TextBox (2) (JQuery - clear button) 내용 삭제  (0) 2024.09.18
'JavaScript/Kendo' Related Articles more