这是一款兼容 ie8 的 jquery 圆形弹出按钮菜单插件。该插件可以制作点击菜单主按钮,弹出一圈子按钮的效果。
在页面中引入 jquery 和 expandableOptions.js 文件和样式文件 expandableOptions.css。
<link rel="stylesheet" href="css/expandableOptions.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/jexpandableOptions.js"></script>
使用是创建下面的 HTML 结构。
<div class="expandableContainer">
<ul id="optionsThreeId" class="expandableOptions">
<li class="option" onclick="alert('option 1 clicked');" title="option 1" option-image="one.png"></li>
<li class="option" onclick="alert('option 2 clicked');" title="option 2" option-image="two.png"></li>
<li class="option" onclick="alert('option 3 clicked');" title="option 3" option-image="three.png"></li>
<li class="option" onclick="alert('option 4 clicked');" title="option 4" option-image="four.png"></li>
<li class="option" onclick="alert('option 5 clicked');" title="option 5" option-image="five.png"></li>
<li class="option" onclick="alert('option 6 clicked');" title="option 6" option-image="six.png"></li>
</ul>
</div>
在页面 DOM 元素加载完毕之后,通过下面方法来初始化该插件。
$(document).ready(function () {
$(".expandableOptions").ggExpandable({
// default: "./"
imagesPath: "./img/",
// default: ""
expandImage: "noname.png"
});
});
该兼容 ie8 的 jquery 圆形弹出按钮菜单插件的 github 地址为:https://github.com/GGaritaJ/ggExpandableOptions
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!