仿照admob 概要

效果图 ( 左边填写，右边自动xxoo)

================HTML================

仿照admob 概要
<div style="background-color:#eee">
    <div id="floatwindow">
          <div class="mediumPopUpTop">
            <div id="ad-preview-body" >
                <div class="objectPreviewPanel" style="margin:0 auto;" >
                    <div class="campaignPreviewPanel">
                        <div class=" ">
                            <h2>仿照admob 概要</h2>
                        </div>
                        <div class="ppBodyHead"></div>
                        <div class="ppBody">
                            <div><label>名称</label><p>哗啦啦</p></div>
                            <hr>
                            <div><label>URL</label><p>http://www.baidu.com.cn?id</p></div>
                            <hr>
                            <div><label>类别</label><p>接受到匹配度更</p></div>                   
                            <div class="clear"></div>
                        </div>
                    </div>   
                </div>
            </div>
          </div>
          <div class="mediumPopUpBottom">&nbsp;</div>
        </div>
</div>

================css================

<style type="text/css" charset="utf-8">
/**
 *{{{ 概要浮动窗 floatwindow ,用的图片见附件
*/
#floatwindow{width:250px; font-weight:normal; font-size:11px;}

#floatwindow .mediumPopUpTop{ background : url("./images/pop_up_medium.png") repeat scroll  0px 1px  transparent !important ; width:250px;}
#floatwindow .mediumPopUpBottom{ background : url("./images/pop_up_medium.png") repeat scroll  0px -784px  transparent !important ; width:250px; font-size:11px;}
#floatwindow .objectPreviewPanel { width:220px; padding:5px 8px 5px 5px;}
#floatwindow .objectPreviewPanel div { line-height:20px; overflow: auto;}
#floatwindow h2{ font-size:14px; font-weight:normal; line-height:15px; margin:5px 0; padding-left:5px;}
#floatwindow .ppBodyHead{ background : url("./images/preview_panel_inset.png") repeat scroll  0px 0px  transparent !important ; height:7px; overflow:hidden;}
#floatwindow div.ppBody{ background:url("./images/preview_panel_inset.png") no-repeat scroll 0 bottom transparent; padding:0 7px 5px;}
#floatwindow div.ppBody{ *width:206px; *overflow:hidden;}/*ie67 兼容*/
#floatwindow .objectPreviewPanel div.ppBody label { float:left;font-weight:bold;margin-right:10px; }
#floatwindow .objectPreviewPanel div.ppBody p { text-align:right; }
#floatwindow .objectPreviewPanel p, div, img { border:0 none;margin:0;padding:0;}
#floatwindow .objectPreviewPanel hr { background:none repeat scroll 0 0 #CCCCCC;border:0 none;clear:both;display:block;height:1px;line-height:1px;margin:1px 0;}
/**
 * 概要浮动窗 }}}
*/
</style>

 

================js/应用jQuery================

<script type="text/javascript">
/* {{{ 概要浮动窗 floatwindow */
/*
 * input 标签
 *sourid 为input标签的id
 *ordinal 为p标签的序数
 *defaultshow 未填写显示文字
 */
var cpValue = function(sourid, ordinal, defaultshow) {
  var sourContent = $('#'+sourid).val();
  var target = $('.ppBody p').eq(ordinal - 1);
  if (sourContent) {
    target.text(sourContent);
  }else{
    target.text(defaultshow);
  }
}

/*
 *checkbox 类别时条调用
 *sourid 为checkbox上一级标签的id,如页面中只有一个checkbox，可为空
 *ordinal序数
 *defaultshow 未填写显示文字
 */
var cpClassValue = function(sourid, ordinal, textval, defaultshow) {
  var target = $('.ppBody p').eq(ordinal - 1);
  if(sourid){
    var numChecked = $('#'+sourid+"input:checked").size();
  }else{
    var numChecked = $("input:checked").size();
  }
  if (numChecked) {
    target.text(textval+numChecked);
  }else{
    target.text(defaultshow);
  }
}
/*
#eg
jQuery(function($) {
  setInterval("cpValue('AddappForm2_appName', 1, '暂未选择')",600);
})
*/
/* 概要浮动窗 }}} */
~
</script>