기록

JSP/KendoUI/초기 설정 본문

Web/Front

JSP/KendoUI/초기 설정

youngyin 2022. 10. 31. 10:00

개요

1. 프로젝트 생성(JSP, Spring)

2. 라이브러리 다운로드 및 삽입

3. Kendo UI 테스트

1. 프로젝트 생성(JSP, Spring)

https://youngyin.tistory.com/m/276

2. 라이브러리 다운로드 및 삽입

해당 프로젝트에서는 30일 trial 버전을 다운 받아 사용했다.

https://www.telerik.com/try/kendo-ui

 

Telerik Client Login

Try Kendo UI for jQuery Start your free Kendo UI trial to access 70+ jQuery-based UI widgets

www.telerik.com

압축 해제한 파일을 아래의 경로에 붙여넣는다.

3. Kendo UI 테스트

index.jsp

<!-- kendo ui의 버전에 따라 가져오는 라이브러리가 다르므로 주의해야 한다. -->
<link href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.default.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"></script>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<body>
<h1>hello</h1>
    <input id="color">
</body>
</html>

<script>
    $("#color").kendoDropDownList({
        dataSource : ["yellow", "green", "red", "blue"]
    });
</script>

결과

참고자료

설치 메뉴얼

https://docs.telerik.com/kendo-ui/intro/first-steps

 

First Steps with Your Kendo UI for jQuery Project Guide - Getting Started - Kendo UI for jQuery

 

docs.telerik.com

kendo 무료 버전

https://github.com/telerik/kendo-ui-core

 

GitHub - telerik/kendo-ui-core: An HTML5, jQuery-based widget library for building modern web apps.

An HTML5, jQuery-based widget library for building modern web apps. - GitHub - telerik/kendo-ui-core: An HTML5, jQuery-based widget library for building modern web apps.

github.com

 

'Web > Front' 카테고리의 다른 글

css/블록 레벨 요소와 인라인 레벨 요소  (0) 2023.04.17
JavaScript/ES6의 주요 기능  (0) 2023.03.27
JSP/KendoUI/날짜 포멧 확인  (0) 2022.12.26
JSP/OOM 해결방법 : 페이징  (0) 2022.11.09
JavaScript/유효성 체크(정규식)  (0) 2022.10.24
'Web/Front' Related Articles more
Comments