今日は、新しい JavaScript ベースの言語である CoffeeScript と jQuery ライブラリを使用して、iOS のようなホーム画面を作成します。 CoffeScript の構文は、Ruby と Python の中間に位置するクリーンな構文です。それらのいずれも使用していない場合でも、心配する必要はありません。ただし、言語の背後にある概念をよりよく理解できるように、JavaScript に精通している必要があります。
タッチベースのイベントをリッスンできるように、Touchable プラグインも使用します。
まず、CoffeeScript とは?
CoffeeScript は、JavaScript の優れた部分を強化しながら、あまり良くない部分を回避することを目的とした、きちんとしたプログラミング言語です。これにより、OOP が簡単になり、内包表記、関数の新しい構文、スコープ処理などの多くの便利な追加機能と、多数の小さな改善が導入されます。
CoffeeScript はあらゆるブラウザーで動作し、既存のすべての JavaScript コード (jQuery やプラグインなどのライブラリーを含む) と互換性があります。しかし、それが別の言語である場合、これはどのように機能するのでしょうか?シンプル - CoffeeScript は JavaScript にコンパイルされます であるため、それをサポートするすべてのブラウザーで動作します。
このチュートリアルを開始する前に、CoffeeScript の Web サイトにある例を一読することをお勧めします (「CoffeeScript を試してみる」を確認してください)。 " タブ)、および言語の紹介については、CoffeeScript のリトル ブックを参照してください。

HTML
iOS ライクなホーム画面の HTML マークアップから始めましょう。いつものように、これは head にスタイルシートを含む通常の HTML5 ドキュメントです。 および JS は、終了 body の前にインクルードします タグ。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iOS Home Screen with CoffeeScript | Tutorialzine Demo</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section id="homeScreen">
<div id="mask">
<div id="allScreens">
<!-- The .screen divs will go here -->
</div>
</div>
<ul id="indicators">
<!-- A LI element for every screen -->
</ul>
<div id="dock">
<!-- The three dock icons will go here -->
</div>
</section>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="assets/js/touchable.js"></script>
<script src="assets/js/coffee-script.js"></script>
<script type="text/coffeescript">
# Our Code Goes Here
</script>
</body>
</html>
#homeScreen があります 私たちの実験のメインコンテナです。その中には #mask があります overflow:hidden
を使用する 一度に 1 つの画面のみを表示します。 #allScreens その中の div には、名前が示すように、動的に生成されたすべての .screen div とアイコンが含まれています。

以下は #indicators です 現在表示されている画面に小さなドットを表示する UL と、#dock 部門
前述のように、CoffeeScript には、ソース コードを JavaScript に変換する追加のコンパイル手順が必要です。これは、node.js 用の coffeescript パッケージ (Web サイトで説明されているとおり)、または Windows 用の coffeescript.exe を使用して実行できます。これは、スタンドアロンですぐに使用できる実行可能ファイルです。小さなスクリプトの場合は、コンパイラをページに直接含めて、コードを