テキストボックスを作る
http://d.hatena.ne.jp/intheflight/20090323/p3 の続き
前回のコードではslideクラスのdiv要素（以下slideと略）の中でh1タグを用いて文章を表示していたが、これだとあまりに味気ない。文字の大きさはh2、h3と変えられるし、色とかも変えられるが、如何せんレイアウトに自由度が少ない。まさしく90年代のホームページ。そこで今回はdiv要素をパワポでのテキストボックスの代替品としました。便宜上わかりやすいように、そのdiv要素にはtextBoxクラスを指定。ひとつひとつのtextBoxクラスのdiv要素（以下textBox）は大きさとかいろいろな属性が違うと思うので、styleでそれぞれのtextBoxの属性を指定します。サンプルとして作ったのが以下のHTMLです。まだまだ改良の余地ありまくりですが、目指すところをなんとなくわかってもらえればありがたいです。次回はこれをどうやってブラウザ上で編集していくか、その点を考えて編集画面を作っていこうと考えてます。コードはgithubで公開しています。
http://github.com/yuribossa/qff/tree/master
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
function nextSlide() {
var currentSlide = $("div.slide:visible");
currentSlide.hide();
if (currentSlide.get(0) == $("div.slide:last").get(0)) {
$("div.slide:first").show();
} else {
currentSlide.next().show();
}
}
$(document).ready(function() {
$("div.slide").hide();
$("div.slide:first").show();
$(window).keyup(function(e) { nextSlide(); });
});
</script>
</head>
<body>
<div class="slide">
<div class="textBox" style="position: absolute; top: 10px; left: 10px; width: 500px; height: 80px; background-color: skyblue; font-size: 36pt">ﾉｿ*＾ oﾟ）＜1キュフフ</div>
</div>
<div class="slide">
<div class="textBox" style="position: absolute; top: 60px; left: 60px; width: 500px; height: 80px; background-color: skyblue; font-size: 36pt">ﾉｿ*＾ oﾟ）＜2キュフフ</div>
</div>
<div class="slide">
<div class="textBox" style="position: absolute; top: 110px; left: 110px; width: 500px; height: 80px; background-color: skyblue; font-size: 36pt">ﾉｿ*＾ oﾟ）＜3キュフフ</div>
</div>
<div class="slide">
<div class="textBox" style="position: absolute; top: 10px; left: 10px; width: 800px; height: 100px; background-color: lime; font-size: 36pt">川*＾∇＾)||＜nkskちゃんおしまいだよ</div>
<div class="textBox" style="position: absolute; top: 170px; left: 150px; width: 500px; height: 80px; background-color: skyblue; font-size: 36pt">ﾉｿ*T oT）＜ケロ〜</div>
</div>
</body>
</html>
