请选择 进入手机版 | 继续访问电脑版

技术_方法_掌握技术,成就未来-6miu百度云

 找回密码
 立即注册
查看: 8|回复: 0

.Text中的Advanced Panel学习笔记

[复制链接]

329万

主题

329万

帖子

988万

积分

论坛元老

Rank: 8Rank: 8

积分
9889035
发表于 2021-1-4 13:17:54 | 显示全部楼层 |阅读模式
.Text中的用户文章管理界面是使用Advanced Panel的主要界面。Advanced Panel与普通WebPanel相比,多提供一个Header栏,并且可以不使用任何代码实现折叠[Collapsing]功能,这是该控件最有特色的地方。 控件常用属性 1. Collapsible属性     该属性为bool型,如果为true,该控件会在右侧显示一个折叠按钮,用于显示或隐藏Panel所包含的内容。否则不显示按钮,该控件变为不可折叠的panel。 2. Collapsed属性     该属性为bool型,默认值为false,初始化时会显示panel容器中的所有内容;如果为true,初始化时,panel容器中的内容不会显示出来。如果为true,显示效果如下:  [图1] 图中,只能看到Panel的Header,但看不到Panel具体内容,只有点击右侧的折叠切换按钮才可以看到。 3. LinkBeforeHeader属性     该属性为bool型,默认值为false。如果为false,右面的折叠按钮会显示在Header的右下方,效果如图2  [图2]     如果为true,则像图1一样显示折叠按钮 4. HeaderText属性     该属性为string型,用于设置Header标题的内容,例如图2中的HeaderText的值为Edit Post 5. LinkImageCollapsed属性     该属性为string型,用于设置折叠按钮处于“折叠”状态的图片路径。 6. LinkImage属性     该属性为string型,用于设置折叠按钮处于“展开”状态的图片路径。 7. BodyCssClass属性     该属性为string型,用于设置内容显示区的样式。注意,由于内容显示区的实际上是一个div层,设置的样式要符合

  的属性,不要出现不能设置的属性。.Text中的BodyCssClass="Edit",设置如下:
      
  
  
   
   
   
    div.Edit  
    {}
    {     color: #333333;     border-bottom: 1px solid #AAAAAA;     margin-bottom: 8px;     padding: 4px 12px;     background: #f5f5f5; }
   
  
  当然你也可以设置一些其他属性如border-top[上边框], border-left [左边框], border-right[右边框]等。 8. DisplayHeader属性     该属性为bool型,用于设置是否显示Header栏 9. HeaderCssClass属性     该属性为string型,用于设置Header的样式。.Text中,HeaderCssClass="CollapsibleTitle",设置如下:
  
   
   
   
    div.CollapsibleTitle
    {}
    {     font-size: 105%;     background: #E5E5E5;     border-top: 1px solid #AAAAAA;     border-bottom: 1px dashed #AAAAAA;     font-weight: bold;     color: #333333;     width: auto;     padding: 2px 12px;     margin: 12px 0px 0px 0px;     clear: left; }
   
  
  其中我们可以看到border-top: solid,即上边框为实线,border-bottom: dashed,即下边框为虚线。 控件技术分析 1. Panel原理     Panel本身其实就是一个div层,不管是VS自带的WebPanel还是Advanced Panel都是如此。 2. 折叠效果实现     折叠按钮是一个关键,在最后生成的html代码中我们可以看到这样的代码:
  
   
   
   
    a
    id
    ="Edit_Link"
     onclick
    ="ToggleVisible('Edit_Contents','Edit_LinkImage','image/toggle_gray_up.gif','image/toggle_gray_down.gif'); return false;"
     href
    ="#"
    >
     
   
    img
    id
    ="Edit_LinkImage"
     src
    ="image/toggle_gray_down.gif"
     alt
    =""
     border
    ="0"
     
    />
     
   
     a>
   
  
      超链接标签中onclick被重载,一旦按钮按下,调用ToggleVisible()函数。 让我们来看看ToggleVisible函数的实现:
  
   
   
    function
     ToggleVisible(targetID, imageID, linkImage, linkImageCollapsed) {     
    if
     (document.getElementById){           target
    =
     document.getElementById(targetID);           
    if
     (target.style.display
    ==
     
    "
    none
    "
    ) {               target.style.display
    =
     
    ""
    ;           }
    else
     {               target.style.display
    =
     
    "
    none
    "
    ;           }                     
    if
     (linkImageCollapsed
    !=
     
    ""
    ) {               image
    =
     document.getElementById(imageID);               
    if
     (target.style.display
    ==
     
    "
    none
    "
    ) {                   image.src
    =
     linkImageCollapsed;               }
    else
     {                   image.src
    =
     linkImage;               }           }       } }
   
  
  其中,参数targetID指定内容显示区的id,即div层的id,.Text中为Edit_Contents。参数imageID指定显示出来的折叠按钮的图片id。 该函数通过javascript中的getElementById获得特定html元素的指针,从而控制相应的html元素。至于显示和隐藏内容是通过修改html元素的style.display属性实现的,当style.display="none"时,则不显示,如果style.display="",则显示。 其实,在本控件中,ToggleVisible是动态装载的,该函数放在uicontrols.js文件中,通过重载Panel控件的OnPreRender事件可以完成javascript的动态加载,具体方法可以见《ASP.NET服务器控件与组件开发》。装载代码如下:
  
   
   
    protected
     
    override
     
    void
     OnPreRender(EventArgs e)
   
    {         if (Collapsible){                 Page.RegisterClientScriptBlock(CLIENT_SCRIPT_KEY,                      Utilities.GetClientScriptInclude(CLIENT_SCRIPT_FILE));             }     base.OnPreRender(e); }
   
  
  其中,CLIENT_SCRIPT_KEY和CLIENT_SCRIPT_FILE为控件内部定义的常量。 3. Collapsed属性的实现     Collapsed属性如果为true,则一开始就不显示内容区,该工作是通过重载Panel控件的Render方法实现的,代码如下:
  
   
   
    if
     (Collapsed)
   
    {                             _contents.Style.Add("display", "none");     _image.ImageUrl = LinkImageCollapsed; }
   
  
  其中的_contents.Style.Add()为内容显示层增加了style.display="none",这样就可以在初始化时隐藏内容区。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|技术_方法_掌握技术,成就未来-6miu百度云

GMT+8, 2021-1-28 17:25 , Processed in 0.098960 second(s), 19 queries .

合作伙伴:

盘搜搜 / 百度云搜索 / 盘多多 / 如风搜 / 小说阅读网 / 笔趣阁 / 文库 / 学术 / 小说排行榜 / 专利网 / 专利查询 / 网盘搜索 / 网盘 / 问医生 / 健康网 / APP开发 / 金蝶 / 软件定制 / 软件开发 / 教育app / ERP系统 / SAP / 分销系统 / 成都软件开发 / 小程序开发 / ERP / WMS / MES / LIMS / SCADA / PLM / PDM / 希沃 / SEEWO / OTO / O2O / 培训系统 / 在线问诊 / 在线问诊系统 / 医疗咨询系统 / 网店代运营 / 返利网 / 京东代运营 / 斯特封 / trelleborg / NOK / 斯凯孚 / SKF / 圣戈班 / Saint-Gobain / 派克汉尼汾 / parker / 洪格尔 / hunger / Merkel / 密封圈 /
快速回复 返回顶部 返回列表