Ajax,Javascript、様々な効果を発揮するスクリプトサンプル設置方法
スクロールバー
mootools
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Solutoire.com › Mootools Styled Scrollbar Example</title>
<script type="text/javascript" src="mootools1.2b.js"></script>
<style type="text/css">
body{margin:0; padding:0;}
#content1{
height: 200px;
width: 500px;
float:left;
background: #FFFFCC;
overflow:hidden;
color:#663300;
}
#content1 p{
margin: 10px;
line-height:150%;
font-size:11px;
}
.scrollbar-vert{
background-color: #FFE168;
height: 206px;
width: 20px;
float:left;
}
.handle-vert{
height: 42px;
width: 20px;
background: url(handle.gif) no-repeat;
}
</style>
</head>
<body>
<div id="content1">
<p>The stage is city Verona in Italy of the 14th century. The Montagu family and the Capulet family repeat contention that quarrels with one's own flesh and blood there.
Montagu's only son Romeo suffers from the unrequited love to [rozarain]. Romeo who sneaked in to the party in diversion of mind, friends, and Capulet family meets Capulet's only daughter Juliet, and two people fall into love at once. Two people marry secretly in Osamu road monk Lawrence's origin. Lawrence expects two people to put the period to the fight over both houses the marriage.
Romeo immediately after the marriage however kills Mrs. Capulet's nephew [tei;boruto] retaliation that it is rolled in the fight in the street, and the best friend and Mercutio are killed. Archduke [esukarasu] of Verona punishes Romeo to the crime of banishment. On the other hand, Capulet orders Juliet who gives it sadly to marry archduke's relative's Paris.
Lawrence who asked for help to Juliet sets her up and to marry it, the strategy that uses the poison of apparent death is set up in Romeo. However, this plan dies with Romeo's who thought that it doesn't transmit to banished Romeo well, and Juliet died drinking the poison in her grave, and Juliet who awoke from the state of apparent death immediately after that also follows it with Romeo's dagger. It knows the true position of affairs and finally, both houses that suffer grief are reconciled.The stage is city Verona in Italy of the 14th century. The Montagu family and the Capulet family repeat contention that quarrels with one's own flesh and blood there.
Montagu's only son Romeo suffers from the unrequited love to [rozarain]. Romeo who sneaked in to the party in diversion of mind, friends, and Capulet family meets Capulet's only daughter Juliet, and two people fall into love at once. Two people marry secretly in Osamu road monk Lawrence's origin. Lawrence expects two people to put the period to the fight over both houses the marriage.
Romeo immediately after the marriage however kills Mrs. Capulet's nephew [tei;boruto] retaliation that it is rolled in the fight in the street, and the best friend and Mercutio are killed. Archduke [esukarasu] of Verona punishes Romeo to the crime of banishment. On the other hand, Capulet orders Juliet who gives it sadly to marry archduke's relative's Paris.
Lawrence who asked for help to Juliet sets her up and to marry it, the strategy that uses the poison of apparent death is set up in Romeo. However, this plan dies with Romeo's who thought that it doesn't transmit to banished Romeo well, and Juliet died drinking the poison in her grave, and Juliet who awoke from the state of apparent death immediately after that also follows it with Romeo's dagger. It knows the true position of affairs and finally, both houses that suffer grief are reconciled. </p>
</div>
<div id="scrollbar1" class="scrollbar-vert"><div id="handle1" class="handle-vert"></div></div>
<script type="text/javascript">
function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
var steps = (horizontal?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y))
var slider = new Slider(scrollbar, handle, {
steps: steps,
mode: (horizontal?'horizontal':'vertical'),
onChange: function(step){
// Scrolls the content element in x or y direction.
var x = (horizontal?step:0);
var y = (horizontal?0:step);
content.scrollTo(x,y);
}
}).set(0);
if( !(ignoreMouse) ){
// Scroll the content element when the mousewheel is used within the
// content or the scrollbar element.
$$(content, scrollbar).addEvent('mousewheel', function(e){
e = new Event(e).stop();
var step = slider.step - e.wheel * 30;
slider.set(step);
});
}
// Stops the handle dragging process when the mouse leaves the document body.
$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
}
window.addEvent('domready', function(){
// -- first example, vertical scrollbar --
makeScrollbar( $('content1'), $('scrollbar1'), $('handle1') );
});
</script>
</body>
</html>
スクロールバーをオリジナルの画像に変更できるスクリプトです。
対象はコンテンツ内の任意のボックスで、<body>に設定することはできません。
既存のスクロールバーを消して、その隣に新しいスクロールバーを段組する、といった感じで実装します。
まず、mootools1.2b.jsをダウンロードします。
配布元のデモページのソースを参考に。
それを以下のようにヘッダーに読み込ませます。
<script type="text/javascript" src="mootools1.2b.js"></script>
次にCSSで、スクロールバーの設定をします。
<style type="text/css">
#content1{
height: 200px;
width: 500px;
float:left;
background: #FFFFCC;
overflow:hidden;
color:#663300;
}
#content1 p{
margin: 10px;
}
.scrollbar-vert{
background-color: #FFE168;
height: 206px;
width: 20px;
float:left;
}
.handle-vert{
height: 42px;
width: 20px;
background: url(handle.gif) no-repeat;
}
</style>
#content1は対象となるボックス、.scrollbar-vertはスクロールバーを表示するボックスです。
これら２つを段組してやり、見た目を整えます。
.scrollbar-vertの背景色でスクロールバーの背景を定義し、
.handle-vert内に定義されている背景がスクロールバーの画像になります。
まずは、対象物を設定します。
<div id="content1">
<p>コンテンツ</p>
</div>
<div id="scrollbar1" class="scrollbar-vert"><div id="handle1" class="handle-vert"></div></div>
このようなレイアウトでタグを設定します。
次にbody内に以下の記述を行います。
<script type="text/javascript">
function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
var steps = (horizontal?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y))
var slider = new Slider(scrollbar, handle, {
steps: steps,
mode: (horizontal?'horizontal':'vertical'),
onChange: function(step){
// Scrolls the content element in x or y direction.
var x = (horizontal?step:0);
var y = (horizontal?0:step);
content.scrollTo(x,y);
}
}).set(0);
if( !(ignoreMouse) ){
$$(content, scrollbar).addEvent('mousewheel', function(e){
e = new Event(e).stop();
var step = slider.step - e.wheel * 30;
slider.set(step);
});
}
$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
}
window.addEvent('domready', function(){
makeScrollbar( $('content1'), $('scrollbar1'), $('handle1') );
});
</script>
makeScrollbar()内に対象となるボックスとスクロールバーのIDを書き込みます。
これは先ほど記述したタグのIDなので任意で変更可能です。
他にも横のスクロールのみ、横と縦のスクロールと設定可能なので、
製作元のデモページを参考にオリジナルのスクロールバーを検討してみてください。
既存のスクロールバーのように、コンテンツの高さに合わせてバー画像の調整は出来ないけど、これはこれで使いやすいと思います。
設定も簡単ですし、デザインにこだわるページで使用するのが良いかもしれません。
SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。
画像表示
コンテンツ表示
ナビゲーション
ユーザー補助
その他