Sencha Touch - Tema
Sencha Touch, uygulamalarınızda kullanılmak üzere bir dizi tema sağlar. Klasik tema yerine farklı temalar ekleyebilir ve uygulama için kullandığımız cihaza göre çıktıdaki farkı görebilirsiniz. Bu, aşağıdaki örnekte açıklandığı gibi tema CSS dosyasını değiştirerek basitçe yapılır.
Masaüstü Teması
İlk Hello World başvurunuzu düşünün. Uygulamadaki aşağıdaki CSS, masaüstü teması için kullanılır.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssEtkiyi görmek için aşağıdaki programı deneyin -
<!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>Bu, aşağıdaki sonucu verecektir -
Windows Teması
İlk Hello World başvurunuzu düşünün. Aşağıdaki CSS'yi uygulamadan kaldırın -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssWindows temasını kullanmak için aşağıdaki CSS'yi ekleyin.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.cssEtkiyi görmek için aşağıdaki programı deneyin -
<!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>Bu, aşağıdaki sonucu verecektir -
IOS Teması
İlk Hello World başvurunuzu düşünün. Aşağıdaki CSS'yi uygulamadan kaldırın.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssWindows temasını kullanmak için aşağıdaki CSS'yi ekleyin
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.cssEtkiyi görmek için aşağıdaki programı deneyin -
<!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>Bu, aşağıdaki sonucu verecektir -
IOS Klasik Teması
İlk Hello World başvurunuzu düşünün. Aşağıdaki CSS'yi uygulamadan kaldırın -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssWindows temasını kullanmak için aşağıdaki CSS'yi ekleyin -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.cssEtkiyi görmek için aşağıdaki programı deneyin -
<!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>Bu, aşağıdaki sonucu verecektir -
Android Teması
İlk Hello World başvurunuzu düşünün. Aşağıdaki CSS'yi uygulamadan kaldırın.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssWindows temasını kullanmak için aşağıdaki CSS'yi ekleyin.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.cssEtkiyi görmek için aşağıdaki programı deneyin -
<!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>Bu, aşağıdaki sonucu verecektir -
BlackBerry Teması
İlk Hello World başvurunuzu düşünün. Aşağıdaki CSS'yi uygulamadan kaldırın.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssWindows temasını kullanmak için aşağıdaki CSS'yi ekleyin.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.cssEtkiyi görmek için aşağıdaki programı deneyin -
<!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>Bu, aşağıdaki sonucu verecektir -