Sencha Touch - motyw
Sencha Touch zapewnia szereg motywów do wykorzystania w twoich aplikacjach. Możesz dodać różne motywy zamiast klasycznego motywu i zobaczyć różnicę w wynikach w zależności od urządzenia, którego używamy do aplikacji. Odbywa się to po prostu przez zastąpienie pliku CSS motywu, jak wyjaśniono w poniższym przykładzie.
Motyw pulpitu
Rozważ swoją pierwszą aplikację Hello World. Poniższy CSS z aplikacji jest używany jako motyw pulpitu.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAby zobaczyć efekt, wypróbuj następujący program -
<!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>To da następujący wynik -
Motyw systemu Windows
Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssDodaj następujący CSS, aby użyć motywu systemu Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.cssAby zobaczyć efekt, wypróbuj następujący program -
<!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>To da następujący wynik -
Motyw IOS
Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssDodaj następujący CSS, aby użyć motywu systemu Windows
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.cssAby zobaczyć efekt, wypróbuj następujący program -
<!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>To da następujący wynik -
Klasyczny motyw IOS
Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssDodaj następujący CSS, aby użyć motywu systemu Windows -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.cssAby zobaczyć efekt, wypróbuj następujący program -
<!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>To da następujący wynik -
Motyw Androida
Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssDodaj następujący CSS, aby użyć motywu systemu Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.cssAby zobaczyć efekt, wypróbuj następujący program -
<!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>To da następujący wynik -
Motyw BlackBerry
Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssDodaj następujący CSS, aby użyć motywu systemu Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.cssAby zobaczyć efekt, wypróbuj następujący program -
<!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>To da następujący wynik -