zui

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ZUI，一个简单灵活的前端框架。"> <meta name="author" content="Zentao"> <title>ZUI - 步骤查看器例子</title> <link href="../../dist/css/zui.css" rel="stylesheet"> <style> [data-guide-viewer]{display: none} .modal-lightbox .modal-dialog {min-width: 300px; min-height: 105px} </style> </head> <body style="padding: 20px"> <div class="conatiner" id="guideViewerExample"> <h1>步骤查看器示例（guideViewer）</h1> <h2>固定高度：固定为指定的值（示例中为 500px）</h2> <img data-guide-viewer="2" data-height="500" src="../img/img1.jpg" alt="第一步：这是第一步图片的说明"> <img data-guide-viewer="2" src="../img/img2.jpg" alt="第二步：这是第二步图片的说明"> <img data-guide-viewer="2" src="../img/chanzhi_icon.png" alt="第三步：这是第三步图片的说明"> <img data-guide-viewer="2" src="../img/slide1.jpg" alt="第四步：这是第四步图片的说明"> <img data-guide-viewer="2" src="../img/img3.jpg" alt="第五步：这是第五步图片的说明"> <div data-guide-viewer="2" title="自定义内容测试"> <div class="container"> <h1>哈哈哈</h1> <p>自定义内容测试:)</p> </div> </div> <h2>动态高度：根据图片或内容自动应用高度</h2> <img data-guide-viewer="1" data-lightbox="true" src="../img/img1.jpg" alt="第一步：这是第一步图片的说明"> <img data-guide-viewer="1" src="../img/img2.jpg" alt="第二步：这是第二步图片的说明"> <img data-guide-viewer="1" src="../img/slide1.jpg" alt="第四步：这是第四步图片的说明"> <img data-guide-viewer="1" src="../img/img3.jpg" alt="第五步：这是第五步图片的说明"> <div data-guide-viewer="1" title="自定义内容测试"> <div class="container"> <h1>哈哈哈</h1> <p>自定义内容测试:)</p> </div> </div> <h2>导航在上面</h2> <img data-guide-viewer="3" data-nav-pos="top" data-height="400" src="../img/img1.jpg" alt="第一步：这是第一步图片的说明"> <img data-guide-viewer="3" src="../img/img2.jpg" alt="第二步：这是第二步图片的说明"> <img data-guide-viewer="3" src="../img/chanzhi_icon.png" alt="第三步：这是第三步图片的说明"> <img data-guide-viewer="3" src="../img/slide1.jpg" alt="第四步：这是第四步图片的说明"> <img data-guide-viewer="3" src="../img/img3.jpg" alt="第五步：这是第五步图片的说明"> <div data-guide-viewer="3" title="自定义内容测试"> <div class="container"> <h1>哈哈哈</h1> <p>自定义内容测试:)</p> </div> </div> <h2>选项</h2> <table class="table table-bordered"> <thead> <tr> <th>选项</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>height</td> <td>高度，默认为 'auto'，可以指定一个数字设置固定高度</td> </tr> <tr> <td>navPos</td> <td>导航位置，默认 'bottom'（显示在下方），还可以设置为 'top' 将导航设置在上方</td> </tr> <tr> <td>lightbox</td> <td>是否启用图片灯箱浏览功能，默认为 'false'，如果设置为 `true`，需要图片浏览插件（$.fn.lightbox）已启用</td> </tr> <tr> <td>lang</td> <td>界面显示语言，默认自动设置</td> </tr> <tr> <td>prevStep</td> <td>在导航上显示的文本：“上一步”</td> </tr> <tr> <td>nextStep</td> <td>在导航上显示的文本：“下一步”</td> </tr> <tr> <td>prevStepIcon</td> <td>在导航上显示的图标：“icon-chevron-left”</td> </tr> <tr> <td>nextStepIcon</td> <td>在导航上显示的图标：“icon-chevron-right”</td> </tr> <tr> <td>carousel</td> <td>设置轮播选项，例如启用自动播放等</td> </tr> <tr> <td>slide</td> <td>是否启用动画效果，默认为 false</td> </tr> </tbody> </table> <h2>使用方法</h2> <pre><code><img data-guide-viewer="2" data-height="500" src="../img/img1.jpg" alt="第一步：这是第一步图片的说明"> <img data-guide-viewer="2" src="../img/img2.jpg" alt="第二步：这是第二步图片的说明"> <img data-guide-viewer="2" src="../img/chanzhi_icon.png" alt="第三步：这是第三步图片的说明"> <img data-guide-viewer="2" src="../img/slide1.jpg" alt="第四步：这是第四步图片的说明"> <img data-guide-viewer="2" src="../img/img3.jpg" alt="第五步：这是第五步图片的说明"> <div data-guide-viewer="2" title="自定义内容测试"> <div class="container"> <h1>哈哈哈</h1> <p>自定义内容测试:)</p> </div> </div></code></pre> <p>为属于同一组的步骤元素设置属性 “data-guide-viewer=*”，并且属性的值一致。</p> <p>在第一个步骤元素上使用 "data-*" 来设置选项。</p> </div> <script src="../../assets/jquery.js"></script> <script src="../../dist/js/zui.js"></script> <script src="../../dist/lib/guideViewer/zui.guideViewer.js"></script> </body> </html>