Sencha Touch - Chủ đề
Sencha Touch cung cấp một số chủ đề được sử dụng trong các ứng dụng của bạn. Bạn có thể thêm các chủ đề khác nhau thay cho chủ đề cổ điển và xem sự khác biệt trong kết quả đầu ra dựa trên thiết bị chúng tôi đang sử dụng cho ứng dụng. Điều này được thực hiện đơn giản bằng cách thay thế tệp CSS chủ đề như được giải thích trong ví dụ sau.
Chủ đề máy tính để bàn
Hãy xem xét ứng dụng Hello World đầu tiên của bạn. CSS sau từ ứng dụng được sử dụng cho chủ đề máy tính để bàn.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssĐể xem hiệu quả, hãy thử chương trình sau:
<!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>Điều này sẽ tạo ra kết quả sau:
Chủ đề Windows
Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssThêm CSS sau để sử dụng chủ đề Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.cssĐể xem hiệu quả, hãy thử chương trình sau:
<!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>Điều này sẽ tạo ra kết quả sau:
Chủ đề iOS
Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssThêm CSS sau để sử dụng chủ đề Windows
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.cssĐể xem hiệu quả, hãy thử chương trình sau:
<!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>Điều này sẽ tạo ra kết quả sau:
Chủ đề cổ điển iOS
Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssThêm CSS sau để sử dụng chủ đề Windows -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.cssĐể xem hiệu quả, hãy thử chương trình sau:
<!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>Điều này sẽ tạo ra kết quả sau:
Chủ đề Android
Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssThêm CSS sau để sử dụng chủ đề Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.cssĐể xem hiệu quả, hãy thử chương trình sau:
<!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>Điều này sẽ tạo ra kết quả sau:
Chủ đề BlackBerry
Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssThêm CSS sau để sử dụng chủ đề Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.cssĐể xem hiệu quả, hãy thử chương trình sau:
<!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>Điều này sẽ tạo ra kết quả sau: