<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"> <title>jQuery多功能提示框插件jBox</title> <!--演示页面样式,使用时可以不引用--> <link rel="stylesheet" type="text/css" href="./normalize.css" /> <link rel="stylesheet" type="text/css" href="./reset.css"> <!--主要样式--> <link rel="stylesheet" href="./jBox.all.css"> <link rel="stylesheet" href="./Demo.css"> <link rel="stylesheet" href="./Playground.Avatars.css"> <link rel="stylesheet" href="./Playground.Login.css"> </head> <body> <main class="container"> <h2>Tooltip</h2> <div class="targets-wrapper"> <div id="Tooltip-1" class="target">Hover</div> <div id="Tooltip-2" class="target">Hover</div> <div id="Tooltip-3" class="target">Hover</div> <div id="Tooltip-4" class="target">Hover</div> <div id="Tooltip-5" class="target">Hover</div> <div id="Tooltip-6" class="target">Hover</div> <div id="Tooltip-7" class="target-click">Click</div> <div id="Tooltip-8" class="target-click">Click</div> </div> <h2>Modal</h2> <div class="targets-wrapper"> <div id="Modal-1" class="target-click">Click</div> <div id="Modal-2" class="target-click">Click</div> <div id="Modal-3" class="target-click">Click</div> <div class="target-click" data-confirm onClick="new jBox('Notice', {content: 'Yay! You clicked the confirm button', color: 'green', attributes: {y: 'bottom'}})">Click</div> </div> <h2>Notice</h2> <div class="targets-wrapper"> <div id="Notice-1" class="target-notice">Click</div> <div id="Notice-2" class="target-notice">Click</div> <div id="Notice-3" class="target-notice">Click</div> <div id="Notice-4" class="target-notice">Click</div> <div id="Notice-5" class="target-notice">Click</div> <div id="Notice-6" class="target-notice">Click</div> <div id="Notice-7" class="target-notice">Click</div> <div id="Notice-8" class="target-notice">Click</div> </div> <!---<h2>Image</h2> <div class="targets-wrapper"> <a class="demo-img" href="https://stephanwagner.me/img/jBox/demo/image1.jpg" data-jbox-image="gallery1" title="Navigate with your keyboard: Press the [right] or [left] key"><img src="https://stephanwagner.me/img/jBox/demo/image1-preview.jpg" alt=""></a> <a class="demo-img" href="https://stephanwagner.me/img/jBox/demo/image2.jpg" data-jbox-image="gallery1" title="jBox is smart, the next image gets preloaded"><img src="https://stephanwagner.me/img/jBox/demo/image2-preview.jpg" alt=""></a> <a class="demo-img" href="https://stephanwagner.me/img/jBox/demo/image3.jpg" data-jbox-image="gallery1" title="You can easily group your images into galleries"><img src="https://stephanwagner.me/img/jBox/demo/image3-preview.jpg" alt=""></a> <a class="demo-img" href="https://stephanwagner.me/img/jBox/demo/image4.jpg" data-jbox-image="gallery1" title="As usual, attaching jBox to images is easy as pie"><img src="https://stephanwagner.me/img/jBox/demo/image4-preview.jpg" alt=""></a> <a href="https://stephanwagner.me/img/jBox/demo/NOT-FOUND.jpg" data-jbox-image="gallery1" title="You can adjust this image-not-found notice with CSS"></a> </div>---> <h2>Playground</h2> <div class="targets-wrapper"> <div id="DemoAvatars" class="target-click">Click</div> <div id="DemoLogin" class="target-click">Click</div> </div> </main> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="./Demo.js"></script> <script src="./jBox.all.js"></script> <script src="./Playground.Login.js"></script> <script src="./Playground.Avatars.js"></script> </body> </html>
jQuery多功能提示框插件jBox
标签:
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
下一篇:
CSS3-3D图片层叠切换动画