搜索
热搜: 活动 交友 discuz
查看: 873|回复: 1

[讨论] [JS][新手][PUI]JS隐藏panel的可见度的几种方法

[复制链接]

216

主题

227

帖子

1885

积分

Lv:6 苍空龙法师

UID
12420
金币
4307
精华
0
节操
-3
发表于 2017-9-22 13:21:29 | 显示全部楼层 |阅读模式

前方高能预警!非战斗人员请尽快登录!

您需要 登录 才可以下载或查看,没有帐号?注册账号

x
本帖最后由 qq382767 于 2017-10-1 08:00 编辑


可见
visibility:visible;


不可见
visibility:collapse;





1.先找到UI的类名,先移除,再添加 能够使得 UI 显示/隐藏 的类

JS文件中
31.png 31.png
var boolstr_ = null;
function ShowHide()
{
        var id_wrapper = null;
         if(boolstr_ == null)
         {
         boolstr_ = "ButtonHide";
         }
         else if(boolstr_ == "ButtonHide")
         {
         boolstr_ = "ButtonShow";
         }
         else if(boolstr_ == "ButtonShow")
         {
         boolstr_ = "ButtonHide";
         }
        for(var i=0;i<wrapper.length;i++){
                id_wrapper = null;
                id_wrapper = "#"+wrapper;
                Judget_Remove_AddClass($( id_wrapper ),"ButtonShow","ButtonHide",boolstr_);
                $.Msg("***------------_test().  "+id_wrapper);
        }
}

function Judget_Remove_AddClass(_panel,str_class1,str_class2,str_addclass)
        {
        if(_panel != null)
        {
                if(_panel.BHasClass( str_class1 ))
                {
                        _panel.RemoveClass( str_class1 );
                }
                else if(_panel.BHasClass( str_class2 ))
                {
                        _panel.RemoveClass( str_class2 );
                }
                _panel.AddClass( str_addclass );
        }
}


CSS文件
31.png
.ButtonShow
{
visibility:visible;

}
.ButtonHide
{
visibility:collapse;

}


在XML文件中 要添加JS和CSS文件路径
  <styles>

<include src="file://{resources}/styles/custom_game/文件名.css" />
  </styles>

<scripts>
    <include src="file://{resources}/scripts/custom_game/文件名.js" />

</scripts>

UI组件的代码
           <Label id="ControlShow" class="LabelCenter" style="position:10px 0.0px 0.0px;width:50px;height:100%;" tabindex="auto" text="#Show" />






2.直接对 每个 panel 的 vidibility 进行设置就行了
不需要多余的函数

放羊的郭神. 的指点

31.png var bool_visibility = null;
function _ShowHide()
{
var id_wrapper = null;
         if(bool_visibility == null)
         {
         bool_visibility = "collapse";
         }
         else if(bool_visibility == "collapse")
         {
         bool_visibility = "visible";
         }
         else if(bool_visibility == "visible")
         {
         bool_visibility = "collapse";
         }
        for(var i=0;i<wrapper.length;i++){
                id_wrapper = null;
                id_wrapper = "#"+wrapper;
                $( id_wrapper ).style["visibility"] = bool_visibility;
                $.Msg("***------------_test().  "+id_wrapper);
        }
}






评分

参与人数 1节操 -2 收起 理由
zwzt0001 -2 很给力!赞!

查看全部评分

回复

使用道具 举报

5

主题

15

帖子

281

积分

Lv:2 长袍法师

UID
11872
金币
141
精华
0
节操
0
发表于 2018-11-29 00:24:48 | 显示全部楼层
更简洁的方式.

1. css文件中定义样式
.hide {
   visibility: collapse;
}

2. js中直接动态切换Class
$("#id").ToggleClass("hide")

参考API
https://developer.valvesoftware. ... avascript/API#Panel

Panel.ToggleClass( cstring cstring_1 )
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册账号

本版积分规则

QQ|Archiver|手机版|小黑屋|AMHC!dota2rpg~ ( 闽ICP备14009209 )

GMT+8, 2018-12-19 06:59 , Processed in 0.145215 second(s), 28 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc. Theme.Yeei

快速回复 返回顶部 返回列表