Sencha Touch-테마
Sencha Touch는 애플리케이션에서 사용할 수있는 다양한 테마를 제공합니다. 클래식 테마 대신 다른 테마를 추가하고 애플리케이션에 사용하는 장치에 따라 출력의 차이를 확인할 수 있습니다. 다음 예제에서 설명한대로 테마 CSS 파일을 바꾸면됩니다.
데스크탑 테마
첫 번째 Hello World 애플리케이션을 고려하십시오. 응용 프로그램의 다음 CSS는 데스크탑 테마에 사용됩니다.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css효과를 확인하려면 다음 프로그램을 시도하십시오.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type="text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>이것은 다음 결과를 생성합니다-
Windows 테마
첫 번째 Hello World 애플리케이션을 고려하십시오. 응용 프로그램에서 다음 CSS를 제거하십시오-
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssWindows 테마를 사용하려면 다음 CSS를 추가하십시오.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css효과를 확인하려면 다음 프로그램을 시도하십시오.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>이것은 다음 결과를 생성합니다-
IOS 테마
첫 번째 Hello World 애플리케이션을 고려하십시오. 애플리케이션에서 다음 CSS를 제거하십시오.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssWindows 테마를 사용하려면 다음 CSS를 추가하세요.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css효과를 확인하려면 다음 프로그램을 시도하십시오.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>이것은 다음 결과를 생성합니다-
IOS 클래식 테마
첫 번째 Hello World 애플리케이션을 고려하십시오. 응용 프로그램에서 다음 CSS를 제거하십시오-
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssWindows 테마를 사용하려면 다음 CSS를 추가하십시오.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css효과를 확인하려면 다음 프로그램을 시도하십시오.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>이것은 다음 결과를 생성합니다-
안드로이드 테마
첫 번째 Hello World 애플리케이션을 고려하십시오. 애플리케이션에서 다음 CSS를 제거하십시오.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssWindows 테마를 사용하려면 다음 CSS를 추가하십시오.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css효과를 확인하려면 다음 프로그램을 시도하십시오.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>이것은 다음 결과를 생성합니다-
BlackBerry 테마
첫 번째 Hello World 애플리케이션을 고려하십시오. 애플리케이션에서 다음 CSS를 제거하십시오.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssWindows 테마를 사용하려면 다음 CSS를 추가하십시오.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css효과를 확인하려면 다음 프로그램을 시도하십시오.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>이것은 다음 결과를 생성합니다-