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.cssเพิ่ม CSS ต่อไปนี้เพื่อใช้ธีม Windows
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.cssเพิ่ม CSS ต่อไปนี้เพื่อใช้ธีม Windows
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 Classic
พิจารณาแอปพลิเคชัน Hello World ตัวแรกของคุณ ลบ CSS ต่อไปนี้ออกจากแอปพลิเคชัน -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssเพิ่ม CSS ต่อไปนี้เพื่อใช้ธีม Windows -
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>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ธีม Android
พิจารณาแอปพลิเคชัน Hello World ตัวแรกของคุณ ลบ CSS ต่อไปนี้ออกจากแอปพลิเคชัน
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssเพิ่ม CSS ต่อไปนี้เพื่อใช้ธีม Windows
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.cssเพิ่ม CSS ต่อไปนี้เพื่อใช้ธีม Windows
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>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -