基于语义UI的页面在Tide SDK中无法正常工作

Semantic-UI based page not work correctly in Tide SDK

本文关键字:SDK 常工作 Tide 工作 语义 于语义 UI      更新时间:2023-09-26

我正在尝试使用语义UI在TideSDK中制作一些应用程序(http://semantic-ui.com/)。当我在Chrome中打开我的页面时,它正常工作:

铬http://krakow45.pl/test/chrome.png

但当我用TideSDK启动我的代码时,它看起来像:

潮汐http://krakow45.pl/test/tide.png

正如你所看到的,一些元素缺失,无法正常工作。

这是我的HTML:

<!DOCTYPE html>
<html>
<head>
    <!-- JavaScript includes -->
    <script src="vendor/jquery.js"></script>
    <script src="js/app.js"></script>
    <script src="vendor/semantic/semantic.js"></script>
    <!-- /JavaScript includes -->
    <!-- CSS includes -->
    <link rel="stylesheet" type="text/css" href="vendor/semantic/semantic.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!-- /CSS includes -->
    <title>xxx</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- PAGE: NEW_REPORT -->
    <div id="NEW_REPORT_fieldsContainer" class="ui segment">
        <div class="ui input">
            <input id="NEW_REPORT_firstName" type="text" placeholder="Imię">
        </div><br /><br />
        <div class="ui input">
            <input id="NEW_REPORT_lastName" type="text" placeholder="Nazwisko">
        </div><br /><br />
        <div class="ui left icon input">
            <input id="NEW_REPORT_date" type="text" placeholder="26/03/2015">
            <i class="calendar icon"></i>
        </div><br /><br />
        <div id="NEW_REPORT_buttonNext" class="ui animated button">
            <div class="visible content">Dalej</div>
            <div class="hidden content">
                <i class="right arrow icon"></i>
            </div>
        </div>
    </div>
    <!-- /PAGE: NEW_REPORT -->
</body>

请记住,TideSDK使用的是旧版本的webkit。我敢肯定你必须在你的CSS3规则前面加前缀(-webkit-)。但也要记住,所有的CSS3规则都不能使用,但目前我还没有遇到重大的CSS3问题。有一件事困扰着我,那就是旧的开发人员控制台。。

TideSDK似乎不再是开发这些应用程序的绝佳选择:(遗憾的是,在他们开始开发TideKit后,没有得到任何支持。最后一个版本应该支持所有的CSS3元素,但实际上并没有。

很高兴你找到了出路:)