为iPhone创建自己的万花筒

最新推荐文章于 2024-09-09 09:01:46 发布

cuketao5066

最新推荐文章于 2024-09-09 09:01:46 发布

阅读量213

点赞数

文章标签： css html less jquery js ViewUI

原文链接：https://www.script-tutorials.com/creating-your-own-kaleidoscope-for-iphone/

版权

Kaleidoscope with jQTouch. Today we will start our lessons where we will create own first applications for iPhone. Last time this mobile device become more and more popular. In our tutorial I will show you about first steps – creating pretty easy Kaleidoscope application. Kaleidoscope itself we already made here. Today we will try to do it for iPhone. Plus, I going to use jQTouch plugin to allow using touchpad in application (we will able to click at ‘about’ button. So, let’s start!

带有jQTouch的万花筒。今天，我们将开始我们的课程，在那里我们将为iPhone创建自己的第一个应用程序。上一次，此移动设备变得越来越流行。在我们的教程中，我将向您介绍第一步–创建非常简单的万花筒应用程序。我们已经在这里制造了万花筒本身。今天，我们将尝试在iPhone上使用它。另外，我将使用jQTouch插件来允许在应用程序中使用触摸板(我们将能够单击“关于”按钮。所以，让我们开始吧！

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML. This is source code of our sample:

和往常一样，我们从HTML开始。这是我们示例的源代码：

index.html (index.html)


<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Kaleidoscope for iPhone</title>
        <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
        <style type="text/css" media="screen">@import "css/main.css";</style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            var jQT = new $.jQTouch({
                icon : 'images/icon.png',
                cacheGetRequests: true,
                addGlossToIcon : false,
                statusBar : 'black',
                preloadImages: [
                    'images/button.png',
                    'images/grayButton.png',
                ]
            });
            $(document).ready(function() {
                var z = 0;
                var tid = setTimeout(mycode, 100);
                function mycode() {
                  z+=2;
                  var $z = z;
                  $(".kal_cont .ksc").each(function(i){
                    $(this).css({backgroundPosition: $z+"px "+$z+"px"});
                  });
                  tid = setTimeout(mycode, 100);
                }
            });
        </script>
    </head>
    <body>
        <div id="about" class="selectable">
            <p><img src="images/icon.png"/></p>
            <p>
                <strong>Kaleidoscope for iPhone</strong>
                <a href="https://www.script-tutorials.com">By Andrew</a>
            </p>
            <p>This application using <br /> <strong>jQTouch</strong></p>
            <p><br /><br /><a href="#" class="gray_button goback">Close</a></p>
        </div>
        <div id="ks_container" class="current">
            <div class="toolbar">
                <h1>Kaleidoscope</h1>
                <a class="button slideup" id="infoButton" href="#about">About</a>
            </div>
            <div class="kal_main">
                <div class="kal_cont">
                  <div class="ks s1"><div class="ksc"></div></div>
                  <div class="ks s2"><div class="ksc"></div></div>
                  <div class="ks s3"><div class="ksc"></div></div>
                  <div class="ks s4"><div class="ksc"></div></div>
                  <div class="ks s5"><div class="ksc"></div></div>
                  <div class="ks s6"><div class="ksc"></div></div>
                  <div class="ks s7"><div class="ksc"></div></div>
                  <div class="ks s8"><div class="ksc"></div></div>
                  <div class="ks s9"><div class="ksc"></div></div>
                  <div class="ks s10"><div class="ksc"></div></div>
                  <div class="ks s11"><div class="ksc"></div></div>
                  <div class="ks s12"><div class="ksc"></div></div>
                </div>
            </div>
        </div>
    </body>
</html>


<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Kaleidoscope for iPhone</title>
        <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
        <style type="text/css" media="screen">@import "css/main.css";</style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            var jQT = new $.jQTouch({
                icon : 'images/icon.png',
                cacheGetRequests: true,
                addGlossToIcon : false,
                statusBar : 'black',
                preloadImages: [
                    'images/button.png',
                    'images/grayButton.png',
                ]
            });
            $(document).ready(function() {
                var z = 0;
                var tid = setTimeout(mycode, 100);
                function mycode() {
                  z+=2;
                  var $z = z;
                  $(".kal_cont .ksc").each(function(i){
                    $(this).css({backgroundPosition: $z+"px "+$z+"px"});
                  });
                  tid = setTimeout(mycode, 100);
                }
            });
        </script>
    </head>
    <body>
        <div id="about" class="selectable">
            <p><img src="images/icon.png"/></p>
            <p>
                <strong>Kaleidoscope for iPhone</strong>
                <a href="https://www.script-tutorials.com">By Andrew</a>
            </p>
            <p>This application using <br /> <strong>jQTouch</strong></p>
            <p><br /><br /><a href="#" class="gray_button goback">Close</a></p>
        </div>
        <div id="ks_container" class="current">
            <div class="toolbar">
                <h1>Kaleidoscope</h1>
                <a class="button slideup" id="infoButton" href="#about">About</a>
            </div>
            <div class="kal_main">
                <div class="kal_cont">
                  <div class="ks s1"><div class="ksc"></div></div>
                  <div class="ks s2"><div class="ksc"></div></div>
                  <div class="ks s3"><div class="ksc"></div></div>
                  <div class="ks s4"><div class="ksc"></div></div>
                  <div class="ks s5"><div class="ksc"></div></div>
                  <div class="ks s6"><div class="ksc"></div></div>
                  <div class="ks s7"><div class="ksc"></div></div>
                  <div class="ks s8"><div class="ksc"></div></div>
                  <div class="ks s9"><div class="ksc"></div></div>
                  <div class="ks s10"><div class="ksc"></div></div>
                  <div class="ks s11"><div class="ksc"></div></div>
                  <div class="ks s12"><div class="ksc"></div></div>
                </div>
            </div>
        </div>
    </body>
</html>

When page loaded, I started looping changing background positions of our kaleidoscope, so in result we will have effect of screensaver, and it looks fine. Not bad for begining.

页面加载后，我开始循环更改万花筒的背景位置，因此结果是我们将获得屏幕保护程序的效果，而且看起来还不错。一开始还不错。

步骤2. CSS (Step 2. CSS)

Here are single CSS file with all necessary styles:

这是具有所有必要样式的单个CSS文件：

css / main.css (css/main.css)


body{
    background:#555;
    color:#ddd;
}
.toolbar{
    -webkit-box-sizing:border-box;
    border-bottom:1px solid #000;
    height:45px;
    background-color:#004473;
    background:0 color-stop(1,#0272a4));
    position:relative;
    padding:10px;
    background:-webkit-gradient(linear, right bottom, right top, color-stop(0.01, #004473), color-stop(1, #0272a4));
}
.toolbar > h1{
    position:absolute;
    overflow:hidden;
    left:50%;
    top:10px;
    line-height:1em;
    height:40px;
    font-size:20px;
    width:150px;
    font-weight:700;
    text-shadow:rgba(0,0,0,1) 0 -1px 1px;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    margin:1px 0 0 -75px;
}
body.landscape .toolbar > h1{
    margin-left:-125px;
    width:250px;
}
.button{
    position:absolute;
    overflow:hidden;
    top:8px;
    right:10px;
    width:auto;
    height:30px;
    line-height:30px;
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    color:#fff;
    text-shadow:rgba(0,0,0,0.5) 0 -1px 0;
    text-overflow:ellipsis;
    text-decoration:none;
    white-space:nowrap;
    background:none;
    -webkit-border-image:url(../images/button.png) 0 5 0 5;
    border-width:0 5px;
    margin:0;
    padding:0 3px;
}
.gray_button{
    display:block;
    text-align:center;
    font-size:20px;
    font-weight:700;
    text-decoration:inherit;
    -webkit-border-image:url(../images/grayButton.png) 0 12 0 12;
    color:#FFF;
    border-width:0 12px;
    padding:10px;
}
#about{
    text-shadow:rgba(255,255,255,0.3) 0 -1px 0;
    font-size:13px;
    text-align:center;
    background:#161618;
    padding:100px 10px 40px;
}
#about p{
    margin-bottom:8px;
}
#about a{
    color:#fff;
    font-weight:700;
    text-decoration:none;
}


body{
    background:#555;
    color:#ddd;
}
.toolbar{
    -webkit-box-sizing:border-box;
    border-bottom:1px solid #000;
    height:45px;
    background-color:#004473;
    background:0 color-stop(1,#0272a4));
    position:relative;
    padding:10px;
    background:-webkit-gradient(linear, right bottom, right top, color-stop(0.01, #004473), color-stop(1, #0272a4));
}
.toolbar > h1{
    position:absolute;
    overflow:hidden;
    left:50%;
    top:10px;
    line-height:1em;
    height:40px;
    font-size:20px;
    width:150px;
    font-weight:700;
    text-shadow:rgba(0,0,0,1) 0 -1px 1px;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    margin:1px 0 0 -75px;
}
body.landscape .toolbar > h1{
    margin-left:-125px;
    width:250px;
}
.button{
    position:absolute;
    overflow:hidden;
    top:8px;
    right:10px;
    width:auto;
    height:30px;
    line-height:30px;
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    color:#fff;
    text-shadow:rgba(0,0,0,0.5) 0 -1px 0;
    text-overflow:ellipsis;
    text-decoration:none;
    white-space:nowrap;
    background:none;
    -webkit-border-image:url(../images/button.png) 0 5 0 5;
    border-width:0 5px;
    margin:0;
    padding:0 3px;
}
.gray_button{
    display:block;
    text-align:center;
    font-size:20px;
    font-weight:700;
    text-decoration:inherit;
    -webkit-border-image:url(../images/grayButton.png) 0 12 0 12;
    color:#FFF;
    border-width:0 12px;
    padding:10px;
}
#about{
    text-shadow:rgba(255,255,255,0.3) 0 -1px 0;
    font-size:13px;
    text-align:center;
    background:#161618;
    padding:100px 10px 40px;
}
#about p{
    margin-bottom:8px;
}
#about a{
    color:#fff;
    font-weight:700;
    text-decoration:none;
}

Make attention, that here are only new styles for iPhone, all other styles of Kaleidoscope will available in package

请注意，这只是iPhone的新样式，所有其他样式的万花筒都将在包装中提供

步骤3.其他档案 (Step 3. Other files)

For our projects I using also files of jQTouch library: jqtouch.min.css and jqtouch.min.js (located in jqtouch folder), and also next images:

对于我们的项目，我还使用jQTouch库文件：jqtouch.min.css和jqtouch.min.js(位于jqtouch文件夹中)，以及下一个图像：

现场演示

结论 (Conclusion)

Today I told you how to build new iPhone application. Currently it looks like screensaver. Sure that you will happy to play with it. Good luck!

今天，我告诉您如何构建新的iPhone应用程序。目前，它看起来像屏保。确保您会乐于使用。祝好运！

翻译自: https://www.script-tutorials.com/creating-your-own-kaleidoscope-for-iphone/

cuketao5066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为iPhone创建自己的万花筒

Kaleidoscope with jQTouch. Today we will start our lessons where we will create own first applications for iPhone. Last time this mobile device become more and more popular. In our tutorial I will sho...
复制链接

扫一扫