jquery panel

本文介绍了一个使用jQuery实现的滑动展开效果示例,该效果允许用户点击标题行来展开或收起详细内容。示例中包含了针对特定行业的DM广告描述,展示了如何通过简单的点击操作控制内容的显示与隐藏。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如下代码,复制过去直接用就可以啦:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
    $(".flip").click(function(){
   
       $(this).next().slideToggle("slow");
    
 });
 });


</script>
<style type="text/css">
div.panel,div.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>
<div class="p">
   <div class="flip">第一行</div>
   <div class="panel">
      DM夹报广告是通过各大报社的发行渠道有计划、有目的地将企业信息传播给指定范围内广告对象(如家庭、个人和公司)的广告传播形式。比如:客户可以选择王府井,中关村等站点区域,保证发行的有效性,合理地控制了成本。
   适合行业:房产、汽车、金融(理财)、商超、餐饮(酒店)、娱乐(健身)、休闲(洗浴)、演出票务、食品饮料、教育培训、婚纱摄影、网站购物、通讯电子、办公用品……等行业。
   </div>
</div>
<div class="p">
 <div  class="flip">第二行</div>
   <div  class="panel">
       1.针对性强:
    广告企业可自由选择具有针对性的区域或消费体群进行投递,避免无效发行给企业带来资源和资金的浪费。
   2.可控性强:
    夹报广告的传播对象可由企业自由选定和控制。广告企业可以根据企业的不同营销阶段,目标,对广告的内容,投放时间,区域,以及广告的预算进行控制,有的放矢,最大限度的发挥广告的效果。
   </div>
</div>
<div class="p">

<div  class="flip">第三行</div>
   <div  class="panel">
      宣传单页的大小和设计形式,发布的时间、地区、对象、数量,都可以根据商品的不同、销售意图、销售地区习惯的不同,而随时变更,这是区别于其它媒介的独特优势。
   4.宣传品(单页)的优势:
   宣传品不受规格大小和印刷尺寸限制,具有信息量大的特点。形式上,设计精美、新颖,给人耳目一新的感觉,视觉冲击力极强,让夹报广告不会淹没在泛泛众多广告中,使广告效果尽得溢彰。留存上,易保留,存放方便,存放率高,增强了广告效果的持效性。
   </div>
</div>

</body>
</html>

花生米AJAX-UI系列之:基于JQUERY的GooPanel窗体控件类0.1版 (从今起,以后所有的新控件均使用JQUERY 1.5以上的内核) 特点: 1、既可当浮动窗口用,也可以当作网页中的内容容器框使用。 2、具备relative,absolute两种定位方式,和两种风格。 3、不仅有“关闭、最大化/还原、最小化、收起/下拉,固定最前端”等默认的右上角功能按钮,用户还可自定义排列顺序以及自定设定的按钮。 4、支持手工调整大小,手工移动。 5、内容可以是从AJAX远端载入的内容,也可以是本页面中的一个DOM元素,也可以是嵌入一个iframe。 6、可以把移动的窗体限制在父框架可见的范围内, 也可以让窗体超出父框架显示。 7、使用单个或少数几个窗体时,可分别定义单独的GooPanel类对象;当使用多个窗体时或者在随时可能增减窗体的情况下时,就可用到GooPanelManager管理类 8、使用GooPanelManager管理类时,STICK功能状态(即把窗体固定在最前顶(z-index保持最大))才会有效. 9、用户可以自定义右上角功能按钮点击时,另外要执行的事件方法。 10、用户可以自定义当“重定义窗体宽高”、“重定义绝对定位”、“重设置Z-INDEX值”时分别发生的事件方法。其中绑定“重定义窗体宽高”事件很有用,比如用在窗体尺寸变化后,将内容框里的DOM元素重新Resize. 本品兼容IE6--IE8 ,firefox,chrome浏览器
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值