通过JavaScript调用显示Yii隐藏的小物件

最新推荐文章于 2020-07-25 14:17:19 发布

有梦想的人运气不太差

最新推荐文章于 2020-07-25 14:17:19 发布

阅读量2.3k

点赞数 1

分类专栏： JavaScript 文章标签： yii javascript 隐藏显示 php

本文链接：https://blog.csdn.net/xujing19920814/article/details/54134985

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1、有关例子的代码

点击文字后再展示隐藏的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
    <link rel="stylesheet" href="styles/lianxi.css">
    <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
    <script src="scripts/lianxi.js"></script>
    <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
    <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
    <style type='text/css'>
        .box{width: 100px;height: 30px;background: #FA6A2F;text-align: center;line-height: 30px;border-radius: 10px;cursor: pointer;color: #fff;}
        .on{display: none;}
    </style>
</head>
<body>
<a href="javascript:void()"οnclick="show()">点击此处显示或隐藏</a>
<div id="hoary"style="display:none">可以隐身可以显示。</div>

<script type="text/javascript">
function show(){
document.getElementById("hoary").style.display=document.getElementById("hoary").style.display==''?'none':'';
}
</script>

</html>

关于div控件的显示div空间隐藏讲解

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function dispHandle(obj) 
{
if (obj.style.display == "none")
obj.style.display = "";
else
obj.style.display = "none";
}
</script>
</head>
<body>
<div id="HideShow">Hello World!</div>
<a href="javascript:dispHandle(HideShow)">Hide Show</a>
</body>
</html>

关于单选按钮选中其中某一个后再展示隐藏的内容

<form name="form1" method="post" action="">
  <input name="radiobutton" type="radio" value="0" checked

οnclick="form1.select1.style.display='';form1.select2.style.display='none';"> 
  11
  <input type="radio" name="radiobutton" value="1"

οnclick="form1.select2.style.display='';form1.select1.style.display='none';"> 
  22  
  <select name="select1" style="display:yes">
    <option value="0" selected>11111</option>
    <option value="1">2222</option>
  </select>
  <select name="select2" style="display:none">
    <option value="3" selected>33333</option>
    <option value="4">44444</option>
  </select>
</form>

2、对于Yii小控件的使用，相关连接

yii小物件前端表单集合点击打开链接

查有关于hiddenField的使用

3、结合上述的代码，以及Yii小物件的使用，编写如下代码

<?php $form = $this -> beginWidget('CActiveForm',
    array(
            'enableClientValidation'=>true,
            'clientOptions'=>array(
                    'validateOnSubmit'=>true,
            ),
    )
); 
?>     
 <?php echo $form->labelEx($odModel,'type'); ?>                                       
<?php echo $form->radioButtonList($odModel,'type',$type,array('separator'=>' ','class'=>'type','name'=>'test_type','onclick'=>'show()' ))?>
<!--可以吧隐藏的东西放到一个div里面-->
    <?php echo $form->hiddenField($odModel,'test',array('id'=>'test3','style'=>'display:none'));?>
 <!--给属性增加id，值为test3,然后可以给JS调用-->
<div id="div_test" style="float:left;border:1px;width:100%;display: none;">
<p align="center" class="MsoNormal" style="margin: 0cm 0cm 0pt; text-align: center">
   <span style="font-size: 26pt; color: blue; font-family: 宋体; mso-bidi-font-size: 12.0pt; mso-ascii-font-family: 'times new roman'; mso-hansi-font-family: 'times new roman'">
       <b>信息呈现</b>
   </span>                                
</p>                            
</div>
 <?php $this->endWidget(); ?>
<script type="text/javascript">
function show(){
    var types = document.getElementsByName("test_type");//获取单选按钮的方式，不是通过id，因为这边不大好获取id，可以给单选按钮进行命名，一名称进行查找，结果是一个数组
    var radioValue = "";
    var i;
    //将所选的值，即为check的值拿出，比较，用户所选
    for(i=0;i<types.length;i++){
        if(types[i].checked == true){
            radioValue = types[i].value;  
            break;
        }else{
            continue;
        }
    }
    //如果是目标值，则对隐藏的内容进行展示
    if(radioValue == '2'){
        document.getElementById("test3").style.display=document.getElementById("test3").style.display==''?'none':'';//三元运算符
        document.getElementById("test3").setAttribute("type","visible");//设置隐藏内容的样式，button，text
        document.getElementById("div_test").style.display=document.getElementById("div_test").style.display==''?'none':'';//三元运算符
    }
    //否则对隐藏的内容继续隐藏，如果已经是显示的情况下，则改为隐藏
    else{
        document.getElementById("test3").style.display='none';
        document.getElementById("div_test").style.display="none";//隐藏
    }
}
</script>



效果是点击其中一个单选按钮，显示隐藏的div域；如果点击另外一个单选按钮，则不做任何显示








PS:小物件的对象为自己创建的，如$odModel,替换成自己的；对应的内容也进行修改
具体的操作在代码的注释里，这里不再详细描述。
这里提醒下，如果在Model文件中已经有相关的验证规则，那么此处的小物件的名字不要再更改，而是使用原来的，原来格式是model[attribute]进行调用。此处给上述例子的修改代码：

<?php $form = $this -> beginWidget('CActiveForm',
    array(
            'enableClientValidation'=>true,
            'clientOptions'=>array(
                    'validateOnSubmit'=>true,
            ),
    )
); 
?>     
 <?php echo $form->labelEx($odModel,'type'); ?>                                       
<?php echo $form->radioButtonList($odModel,'type',$type,array('separator'=>' ','class'=>'type','onclick'=>'show()' ))?>
<!--'name'=>'test_type' 这里 
-->


<!--可以吧隐藏的东西放到一个div里面-->
    <?php echo $form->hiddenField($odModel,'test',array('id'=>'test3','style'=>'display:none'));?>
 <!--给属性增加id，值为test3,然后可以给JS调用-->
<div id="div_test" style="float:left;border:1px;width:100%;display: none;">
<p align="center" class="MsoNormal" style="margin: 0cm 0cm 0pt; text-align: center">
   <span style="font-size: 26pt; color: blue; font-family: 宋体; mso-bidi-font-size: 12.0pt; mso-ascii-font-family: 'times new roman'; mso-hansi-font-family: 'times new roman'">
       <b>信息呈现</b>
   </span>                                
</p>                            
</div>
 <?php $this->endWidget(); ?>
<script type="text/javascript">
function show(){
    var types = document.getElementsByName("model[attribute]");//获取单选按钮的方式，不是通过id，因为这边不大好获取id，可以给单选按钮进行命名，一名称进行查找，结果是一个数组
//这里"test_type"

    var radioValue = "";
    var i;
    //将所选的值，即为check的值拿出，比较，用户所选
    for(i=0;i<types.length;i++){
        if(types[i].checked == true){
            radioValue = types[i].value;  
            break;
        }else{
            continue;
        }
    }
    //如果是目标值，则对隐藏的内容进行展示
    if(radioValue == '2'){
        document.getElementById("test3").style.display=document.getElementById("test3").style.display==''?'none':'';//三元运算符
        document.getElementById("test3").setAttribute("type","visible");//设置隐藏内容的样式，button，text
        document.getElementById("div_test").style.display=document.getElementById("div_test").style.display==''?'none':'';//三元运算符
    }
    //否则对隐藏的内容继续隐藏，如果已经是显示的情况下，则改为隐藏
    else{
        document.getElementById("test3").style.display='none';
        document.getElementById("div_test").style.display="none";//隐藏
    }
}
</script>