我正在构建一个 sencha 应用程序。我想尝试使用像控件一样的 ios 开关。 为此,我在 CSS 中有它:jsfiddle Demo (感谢 Lea Verou http://lea.verou.me)
正如您从 jsfiddle 中看到的那样,CSS 在浏览器上运行得非常好。
然而,在将它添加到我的 sencha 应用程序并在设备上运行它之后,它就搞砸了。动画不再播放,YES 端乱七八糟:
可能是什么问题? CSS 的某些部分是否与 Sencha 应用程序不兼容?为什么在浏览器上正常,在设备上却不正常?
附加信息
我在 SASS 文件中编写我的 CSS,然后使用 Compass 对其进行编译(这是推荐的方法)。
我的 SASS 文件还包含一些 sencha 的基本样式:
//I PASTED THE SWITCH CSS (FROM THE FIDDLE EXAMPLE) HERE
//IMPORTING THE SENCHA STYLES THAT I WILL USE
//Sencha Css
@import 'sencha-touch/default/all';
//Including Pictos we need to use
@include pictos-iconmask('team1');
@include pictos-iconmask('user3');
@include pictos-iconmask('settings7');
@include pictos-iconmask('shop1');
// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-msgbox;
可能是什么问题?
PS:我知道在 Sencha 中有一个开关表单控件,但它看起来不像 ios 的控件,所以我不得不使用上面的控件。
谢谢
最佳答案
我修改了css中的第三 block 。我将宽度从 1em 增加到 3em。
input[type="checkbox"].ios-switch:checked + div {
padding-left: 2em;
width: 3em;
background-position: 0 0;
}
关于CSS 样式无法与 Sencha touch 一起正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16687373/