サラリーマンのすらすらIT日記

IT関連を中心とした日々を綴ります。
--/--/--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2014/01/14

Alloy UIをやってみました

LiferayではAlloy UIというJavaScriptフレームワークを使っているようです。YUI(Yahoo User Interface)から派生したもので、Rosetta Stoneと題するページでは、jQuery,YUI3と記法の比較が紹介されています。jQueryをご存知の方なら、このページを見ればAlloy UIの書き方もわかるかと思います。

Alloy UIには"Data Table"というGridがあります(jQueryは今も標準ではGridを持っていないのかな?)。これは気に入りました。ダウンロードしてみると、Sencha ExtJSのJSファイルのように大きなサイズではないので、ますます気に入りました。あとは見栄えと使い勝手、それに快適さ(スピード)ですね。まずはやってみようということでButton、それに見栄えがよさそうなCarouselから始めました。

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<!--<meta http-equiv="Content-Style-Type" content="text/css">-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head><title>Carousel</title>
<script src="build/aui/aui-min.js"></script>
<link href="build/aui-css/css/bootstrap.css" rel="stylesheet"></link>
</head>
<body><h1>Carousel</h1>
<button id="myButton"></button>
<button id="myToggleButton"></button>
<div id="myCarousel">
<div class="carousel-item" style="background-image: url('jpg/Honyakuhaikanisubekika.jpg'); background-repeat: no-repeat; width: 250px; height: 300px;"></div>
<div class="carousel-item" style="background-image: url('jpg/Symfony.jpg'); background-repeat: no-repeat; width: 250px; height: 300px;"></div>
<div class="carousel-item" style="background-image: url('jpg/YanaseUlysses.jpg'); background-repeat: no-repeat; width: 250px; height: 300px;"></div>
</div>
<script type="text/javascript">
YUI().use(
'aui-carousel',
function(Y) {
new Y.Carousel(
{
intervalTime: 5,
contentBox: '#myCarousel',
height: 350,
width: 250
}
).render();
}
);
YUI().use(
'aui-button',
function(Y) {
new Y.Button(
{
icon: 'icon-print',
iconAlign: 'left',
label: 'Basic',
srcNode: '#myButton',
}
).render();

new Y.ToggleButton(
{
label: 'Click to toggle',
srcNode: '#myToggleButton',
}
).render();
}
);
</script>
</body>
</html>


  

intervalTimeで指定した時間ごとに(上記では5秒)、表示される画像が自動的に変わります。これは使えそうです。

スポンサーサイト

コメント

コメントの投稿

  • URL
  • コメント
  • パスワード
  • 秘密
  • 管理者にだけ表示を許可する

トラックバック

トラックバックURL:http://sookibizviz.blog81.fc2.com/tb.php/1805-4f835366

■  カレンダー

07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

■  プロフィール

sookibizviz

Author:sookibizviz
仕事の内容やソフトの紹介を交えながら、日々の悪戦苦闘を綴っていきます。

■  最新記事

■  最新コメント

■  最新トラックバック

■  月別アーカイブ

■  カテゴリ

未分類 (64)
BizViz (24)
IT (1119)
計量 (76)
環境 (26)
数学 (181)
ニュース (46)
本 (187)
音楽 (113)
囲碁 (5)
将棋 (26)
ブログ (14)
日記 (19)

■  FC2カウンター

■  検索フォーム

■  RSSリンクの表示

■  QRコード

QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。