效果图
使用说明
需要引用 hui-popover-msg.js
hui(单一元素选择器).popoverMsg(directionX, directionY, msg, width, height, addSets)
参数 :
- directionX 消息横向的展示方向，可选参数，默认 left， 在指定元素右侧展示 可以取值 left 或者 right。
- directionX 消息竖向的展示方向，可选参数，默认 down，在指定元素下面展示 可以取值 down 或者 up。
- msg 消息内容（文本或者html）。
- width 消息框宽度，可选参数，默认与参照元素同宽，应该为一个整数类型。
- height 消息框宽度，可选参数默认 auto，应该为一个整数类型，注意设置高度后如果内容超过指定高度会产生竖向滚动。
- addSets 消息框top和left的偏移值增量（用来调整消息框位置），对象类型，2个属性 left 和 top 应该为整数类型，可选参数，默认：{left:0, top:0};}
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>HUI</title> <link rel="stylesheet" type="text/css" href="../css/hui.css" /> </head> <body> <header class="hui-header"> <div id="hui-back"></div> <h1>HUI </h1> </header> <div class="hui-wrap"> <div class="hui-common-title" style="margin-top:15px;"> <div class="hui-common-title-line"></div> <div class="hui-common-title-txt">popovermsg</div> <div class="hui-common-title-line"></div> </div> <div style="padding:28px;"> <button type="button" class="hui-button hui-button-large" id="btn1">《静夜思》</button> <button type="button" class="hui-button hui-button-large" id="btn2" style="margin-top:20px;">《春晓》</button> <button type="button" class="hui-button hui-button-large" id="btn3" style="margin-top:20px;">《相思》</button> <button type="button" class="hui-button hui-button-large" id="btn4" style="margin-top:20px;">《江雪》</button> <button type="button" class="hui-button hui-button-large" id="btn5" style="margin-top:20px;">pop 菜单</button> </div> </div> <script src="../js/hui.js" type="text/javascript" charset="utf-8"></script> <script src="../js/hui-popover-msg.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> hui('#btn1').popoverMsg('left', 'down', '<div style="text-align:center;">床前明月光，疑是地上霜。<br />举头望明月，低头思故乡。</div>'); hui('#btn2').popoverMsg('right', 'down', '<div style="text-align:center;">春眠不觉晓，处处闻啼鸟。<br />夜来风雨声，花落知多少。</div>', 220); hui('#btn3').popoverMsg('left', 'up', '<div style="text-align:center;">红豆生南国，春来发几枝。<br />愿君多采撷，此物最相思。</div>', 220); hui('#btn4').popoverMsg('right', 'up', '<div style="text-align:center;">千山鸟飞绝，万径人踪灭。<br />孤舟蓑笠翁，独钓寒江雪。</div>', 220); var menu = '<div class="hui-list" style="border:0px;"><a>菜单1</a><a>菜单2</a><a>菜单3</a><a>菜单4</a><a>菜单5</a></div>'; hui('#btn5').popoverMsg('right', 'up', menu, 220, 150); </script> </body> </html>
