通过JavaScript调用显示Yii隐藏的小物件
来源：互联网 发布：刘小枫 知乎 编辑：程序博客网 时间：2024/05/01 15:58
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()"onclick="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 = "";elseobj.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" checkedonclick="form1.select1.style.display='';form1.select2.style.display='none';"> 11 <input type="radio" name="radiobutton" value="1"onclick="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>
0 0
- 通过JavaScript调用显示Yii隐藏的小物件
- Yii小物件widget的简单操作
- yii小物件详解
- yii小物件详解 小实例
- yii小物件前端表单集合
- yii 表单小物件使用注意事项
- YII用户注册和用户登录（二）之登录和注册在视图通过表单使用YII小物件并分析
- 隐藏物件
- Yii不用小物件，如何做到搜索条件提交
- JavaScript的显示和隐藏
- 在页面上通过JavaScript控制表格的隐藏和显示
- 利用JavaScript通过单选框radio控制div的显示和隐藏
- 乔布斯的世界： “小物件”，大世界
- 乔布斯的世界: “小物件”，大世界
- 关于显示隐藏的小技巧
- Android Fragment隐藏显示调用的方法
- 关于Javascript所隐藏的小知识
- yii小物件Widget创建表单，action提交到指定位置
- DeepLearning4J安装及遇到的问题
- Java集合框架
- 测试文章
- 交换机qos配置
- (9/10 OK) 在VirtualBox中运行 cm-13-kiwi (华为 荣耀 5X) - 移植 MPTCP 到 cm-13-kiwi
- 通过JavaScript调用显示Yii隐藏的小物件
- python property 简单使用
- ABBYY PDF Transformer+标志注释的方法
- centos7临时修改IP、永久修改IP
- Java Web技术经验总结（一）
- Android 系列 2.11使用Java 8 java.time API简化日期/时间计算
- ubuntu使用ffmpeg把图片生成视频
- JavaScript中this的六种模式
- 使用ViewPager加gridView实现菜单按钮分页滑动（类似QQ表情选择翻页效果）
