jQuery UI の Button Widget と Menu Widget で、アイコンボタンをクリックすると現れるメニューを作る方法。
実装例(サンプル)
実装例(サンプル)の動作について
「▼」ボタンをクリックすると、「Menu A~C」のメニューボタンが現れる。
メニューボタンをクリックするか、「▼」ボタン以外の場所をクリックすると、「Menu A~C」のメニューボタンが消える。
実装例(サンプル)のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>
JavaScript
<script>
jQuery( function() {
jQuery( "#sampleSelect" )
.button( {
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
} )
.click( function() {
var menu = jQuery( this ).parent().next().show().position( {
my: "left top",
at: "left bottom",
of: this
} );
jQuery( document ).one( "click", function() {
menu.hide();
} );
return false;
} )
.parent()
.buttonset()
.next()
.hide()
.menu();
} );
</script>
jQuery( function() {
jQuery( "#sampleSelect" )
.button( {
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
} )
.click( function() {
var menu = jQuery( this ).parent().next().show().position( {
my: "left top",
at: "left bottom",
of: this
} );
jQuery( document ).one( "click", function() {
menu.hide();
} );
return false;
} )
.parent()
.buttonset()
.next()
.hide()
.menu();
} );
</script>
CSS
<style>
<!--
#sample {
width: 200px;
}
-->
</style>
<!--
#sample {
width: 200px;
}
-->
</style>
HTML
<div id="sample">
<div>
<button id="sampleSelect">Select</button>
</div>
<ul>
<li><a href="#A">Menu A</a></li>
<li><a href="#B">Menu B</a></li>
<li><a href="#C">Menu C</a></li>
</ul>
</div>
<div>
<button id="sampleSelect">Select</button>
</div>
<ul>
<li><a href="#A">Menu A</a></li>
<li><a href="#B">Menu B</a></li>
<li><a href="#C">Menu C</a></li>
</ul>
</div>