jquery.balloon.jsを使用ã—ã¦ã€ãƒžã‚¦ã‚¹ã‚ªãƒ¼ãƒãƒ¼ã§å¹ã出ã—ã‚’ç°¡å˜ã«ãƒãƒƒãƒ—アップã§è¡¨ç¤ºã™ã‚‹æ–¹æ³•ã®ç´¹ä»‹ã§ã™ã€‚
ã“ã®jQueryプラグインã¯ã€ã‚·ãƒ³ãƒ—ルã§ã¨ã¦ã‚‚ç°¡å˜ã«è¨ç½®ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
ã¾ãŸã€ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã‚‚容易ã«ã§ãã‚‹ãŸã‚ãŠã™ã™ã‚ã§ã™ã€‚
当記事ã§ã¯ã€åˆã‚ã«ã‚µãƒ³ãƒ—ルコードを掲載ã—ã€å„オプションã®è¨å®šæ–¹æ³•ã«ã¤ã„ã¦èª¬æ˜Žã—ã¦ã„ãã¾ã™ã€‚
jquery.balloon.js Demo pageよりjquery.balloon.jsã‚’å–å¾—ã—ã¾ã™ã€‚
å–å¾—ã—ãŸjsファイルã¨jQueryã‚’èªè¾¼ã¿ã¾ã™ã€‚
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/jquery.balloon.js"></script>
以下ã®ã‚ˆã†ã«JavaScriptを記述ã—ã¾ã™ã€‚
$(function() {
$('.help').balloon();
$('.help1').balloon({ position: "right" });
$('.help2').balloon({ position: "bottom right" });
});
以下ã®ã‚ˆã†ã«HTMLを記述ã—ã¾ã™ã€‚
<ul>
<li><a href="#" class="help" title="サンプルã§ã™ã€‚<br />デフォルトã§ã¯ä¸Šã«è¡¨ç¤ºã•ã‚Œã¾ã™ã€‚">サンプル1</a></li>
<li><a href="#" class="help1" title="サンプルã§ã™ã€‚<br />å³å´ã«è¡¨ç¤ºã—ã¾ã™ã€‚">サンプル2</a></li>
<li><a href="#" class="help2" title="サンプルã§ã™ã€‚<br />å³ä¸‹ã«è¡¨ç¤ºã—ã¾ã™ã€‚">サンプル3</a></li>
</ul>
ãŸã£ãŸã“ã‚Œã ã‘ã§è¨ç½®å®Œäº†ã§ã™ã€‚
jQueryã®è¨å®šã¯åŸºæœ¬çš„ã«ä»¥ä¸‹ã®ã‚ˆã†ã«æŒ‡å®šã—ã¾ã™ã€‚
$('selectors').balloon(options);
ã“ã“ã§è¨å®šã§ãるオプションã«ã¤ã„ã¦ç´¹ä»‹ã—ã¦ã„ãã¾ã™ã€‚
å„オプションã¯ã€ã‚«ãƒ³ãƒžã§åŒºåˆ‡ã‚‹ã“ã¨ã§è¤‡æ•°è¨å®šã§ãã¾ã™ã€‚
$('selectors').balloon({ position: "right" });
positionを記述ã™ã‚‹ã“ã¨ã§ã€å¹ã出ã—ã®ä½ç½®ã‚’指定ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
positionã§ã¯ä»¥ä¸‹ã®ã‚‚ã®ã‚’è¨å®šã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
top left (左上)
top (上)
top right (å³ä¸Š)
left (å·¦)
null (ä¸å¤®)
right (å³)
bottom left (左下)
bottom (下)
bottom right (å³ä¸‹)
$('selectors').balloon({ offsetX: -10, offsetY: -5 });
ã“れらを使用ã™ã‚‹ã“ã¨ã§ã€è¡¨ç¤ºä½ç½®ã®ç´°ã‹ã„ä½ç½®ã®èª¿æ•´ã‚’è¡Œã†ã“ã¨ãŒã§ãã¾ã™ã€‚
offsetXã¯æ¨ªæ–¹å‘ã€offsetYã§ã¯ç¸¦æ–¹å‘を指定ã—ã¾ã™ã€‚
$('selectors').balloon({
contents: '<a href="#">Any HTML!</a><br />'
+'<input type="text" size="40" />'
+'<input type="submit" value="Search" />'
});
$('selectors').balloon({ contents: $('h1').clone() });
HTMLコードを記述ã—ã¦è¡¨ç¤ºã•ã›ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
ã¾ãŸã€2ã¤ã‚ã®ä¾‹ã®ã‚ˆã†ã«jQueryを使用ã—ã¦è¡¨ç¤ºã•ã›ã‚‹ã“ã¨ã‚‚å¯èƒ½ã§ã™ã€‚
$('selectors').balloon({ tipSize: 50 });
$('selectors').balloon({ tipSize: 0 });
å¹ã出ã—ã®ä»˜ã‘æ ¹ã®éƒ¨åˆ†ã®å¤§ãã•ã‚’指定ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
$('selectors').balloon({
tipSize: 24,
css: {
border: 'solid 4px #5baec0',
padding: '10px',
fontSize: '150%',
fontWeight: 'bold',
lineHeight: '3',
backgroundColor: '#666',
color: '#fff'
}
});
cssを指定ã™ã‚‹ã“ã¨ã§ã€CSSã‚’è¨å®šã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
å¹ã出ã—ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’個別ã«å¤‰æ›´ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
$('selectors').balloon({ minLifetime: 2000 });
$('selectors').balloon({ minLifetime: 0 });
マウスãŒé›¢ã‚ŒãŸå¾Œã«ã€å¹ã出ã—を表示ã™ã‚‹æ™‚間を指定ã§ãã¾ã™ã€‚
å˜ä½ã¯ãƒŸãƒªç§’ã§æŒ‡å®šã—ã¾ã™ã€‚ãŸã¨ãˆã°ã€2000ã¨ã—ãŸå ´åˆã€ãƒžã‚¦ã‚¹ãŒé›¢ã‚ŒãŸå¾Œã‚‚2秒å¹ã出ã—ãŒè¡¨ç¤ºã•ã‚Œç¶šã‘ã¾ã™ã€‚
$('selectors').balloon({
showDuration: 1000, hideDuration: 500
});
$('selectors').balloon({
showDuration: 500, hideDuration: 0
});
表示ã€éžè¡¨ç¤ºã®ã‚¹ãƒ”ードを調整ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
å˜ä½ã¯ãƒŸãƒªç§’ã§æŒ‡å®šã—ã¾ã™ã€‚
$('selectors').balloon({
showDuration: "slow",
showAnimation: function(d) { this.fadeIn(d); }
});
$('selectors').balloon({
hideDuration: "slow",
hideAnimation: function(d) { this.slideUp(d); }
});
アニメーションをè¨å®šã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
通常ã€Durationã¨å…±ã«è¨å®šã‚’è¡Œã„ã¾ã™ã€‚
$('selectors').balloon({
position: 'right',
url: '/'
});
urlを指定ã™ã‚‹ã“ã¨ã§ã€è¨˜è¿°ã—ãŸãƒ‘スã®ãƒšãƒ¼ã‚¸ã‚’表示ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚