基于jQuery的头像弹出框插件JSPOP配置说明
fmms
13年前
<p>代码一共6k,基于jquery的头像弹出框实现,实现弹出信息的定位、信息配置、样式定义。</p> <p>1.下载地址:<a href="/misc/goto?guid=4959500220373913069">http://code.google.com/p/jspop/downloads/list</a></p> <p>2.demo地址:<a title="http://wuzhi.me/jspopupdemo.php" href="/misc/goto?guid=4959500220460781998" target="_blank">http://wuzhi.me/jspopupdemo.php</a></p> <p>3.配置说明:</p> <pre class="brush:javascript; toolbar: true; auto-links: false;">var setting = { // 过滤弹窗字段 当该字段为notpopup时不做弹出 如:<a href="/u/@" filter="notpopup"></a> filter:'filter', // 返回可以作为弹窗关键子的字段 filterfunction:function(url){ key = url.replace(/\/u\/@/g,""); return key; }, // 500毫秒以内仍然在才触发弹出 hideDelay:500, // 填充数据的url ajaxurl:'', // 弹窗关键字 key:'key', // 弹窗ID前缀,确保唯一 idpre:'jspopup_', // 弹窗class,确保唯一 mainclass:'jspopup', //等待提示 loadingmsg:'loadding....', //预计高度,用来判断弹出的上下方位 yjwidth:360, //预计宽度,用来判断弹出的左右方位 yjheight:60, //写在弹出框内的方法,xml为ajaxurl返回的数据 createhtml:function(xml){ return "<br><br>"+xml+"<br><br>"; } };</pre>4.页面代码 <p></p> <p><span style="color:#ff0000;">1)样式表及js</span></p> <pre><link href="../css/pop.css" rel="stylesheet"/> <script type="text/javascript" src="../js/jspop.js" ></script></pre> <p><span style="color:#ff0000;">2)覆盖默认配置项</span><br /> <span style="line-height:19px;font-family:Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;white-space:normal;color:#ff0000;font-size:13px;" class="Apple-style-span">//所有的a都支持弹窗,获取数据的url改为/data.php ,等待提示改为:等待中</span></p> <pre><span style="line-height:19px;font-family:Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;white-space:normal;color:#ff0000;font-size:13px;" class="Apple-style-span"><span style="color:#000000;">$('a').each(function(){$(this).jspop({'ajaxurl':'/data.php','loadingmsg':'等待中..'});});</script> </span></span></pre> <p></p> <p><strong>项目主页:</strong><a href="http://www.open-open.com/lib/view/home/1325560206906" target="_blank">http://www.open-open.com/lib/view/home/1325560206906</a></p>