当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery实现根据类型自动显示和隐藏表单

jQuery根据类型自动显示和隐藏表单效果示例

  • 发布时间:
  • 作者:码农之家
  • 点击:139

这篇文章主要知识点是关于jQuery、显示和隐藏、jQuery实现菜单的显示和隐藏功能示例 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery实战案例精粹
  • 类型:jQuery大小:272 MB格式:PDF作者:吴绍兴//李勇//明廷
立即下载

jQuery实现根据类型自动显示和隐藏表单

jquery实现表单根据单选按钮进行字段的动画切换,昨天写的,感觉比起初学时写的js/jquery有了很大进步。。在最大化扩展性的情况下经可能使代码精简。

html

 

复制代码 代码如下:

<div class="control-group">
                    <label class="control-label">类型:</label>
                    <div class="controls control-row-auto" id="type">
                    </div>
                    <span class="auxiliary-text"></span>
                </div>
                <div class="control-group ctype ctype1 ctype2">
                    <label class="control-label">栏目模版:</label>
                    <div class="controls">
                        <select name="column_tpl" class="input">
                        </select>
                    </div>
                    <span class="auxiliary-text"></span>
                </div>
                <div class="control-group ctype ctype1">
                    <label class="control-label">文章模版:</label>
                    <div class="controls">
                        <select name="article_tpl" class="input">
                        </select>
                    </div>
                    <span class="auxiliary-text"></span>
                </div>
                <input type="hidden" name="tpl" id="tpl" value="" />
                <div class="control-group ctype ctype3" >
                    <label class="control-label"><s>*</s>栏目链接:</label>
                    <div class="controls">
                        <input name="url" type="text" class="input-large" data-rules="{required:true,minlength:1,maxlength:30}">
                    </div>
                    <span class="auxiliary-text">内部链接格式:模块/控制器/方法...,外部链接格式:http://../../</span>
                </div>

 

js

 

复制代码 代码如下:

//根据类型自动显示和隐藏表单
            var input_type=$('input[name=type]');
            function typeChangeHandle(){
                var ctypes=$('.ctype');
                var type=$(this).val();
                var hideCtypes=ctypes.filter(':not(.ctype'+type+')').slideUp(500,function () {
                    $('.ctype'+type).slideDown(500);
                });
            }
            typeChangeHandle.apply(input_type);
            input_type.on('change',typeChangeHandle);
            input_type=null;

 

以上所述就是本文的全部内容了,希望大家能够喜欢。

jQuery实现菜单的显示和隐藏功能示例

本文实例讲述了jQuery实现菜单的显示和隐藏功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net jQuery显示菜单隐藏和显示</title>
 </head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  /*jQuery演示*/
  $(function(){
   $("#div1").click(function(){
     if($(".div2").css("display")=="block"){
      $(".div2").css("display","none");
    }else {
      $(".div2").css("display","block");
    }
   });
   });
</script>
<!--div演示-->
<input id="div1" type="button" value="显示/隐藏">
<div class="div2" >
  <ui>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
  </ui>
</div>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试,效果如下:

jQuery实现菜单的显示和隐藏功能示例

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery显示和隐藏表单 相关电子书
学习笔记
网友NO.603778

jquery 实现密码框的显示与隐藏示例代码

html head script type="text/javascript" src="jquery-1.5.1.min.js"/script script type="text/javascript" $(function(){ $("#chk").bind({ click: function(){ if($(this).attr("checked")){ $("#passwd2").val($("#passwd").val()); $("#passwd").hide(); $("#passwd2").show(); }else{ $("#passwd").val($("#passwd2").val()); $("#passwd2").hide(); $("#passwd").show(); } } }); }); /script /head body form name="formName" input id="passwd" type="password" size="24" maxlength="17" / input id="passwd2" type="text" size="24" maxlength="17" / input id="chk" type="checkbox" /显示密码 /form /body /html ……

网友NO.625738

基于jquery实现页面滚动时顶部导航显示隐藏

本文实例讲述了jquery实现页面滚动时顶部导航显示隐藏效果代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: 引入核心文件 script src="js/jquery/1.11.1/jquery.min.js"/script 构建html, margint这个div中为了出现滚动条而建,并无实际作用。 div class="top-title"这是顶部导航条/divdiv class="margint"p滚动看效果/pp滚动看效果/p/div 写入CSS .top-title {background:#e74c3c;color:white;font-size:24px;padding:5px;text-align:center;position: fixed;left:0;top:0;width:100%;transition: top .5s;}.hiddened{top: -90px;}.showed{top:0;z-index: 9999;} top-title中定义了transition: top .5s;是指.5S时间内动画展示top方向数值的改为。如添加hidden类后,top-title会在0.5s内从top的0动画缓冲到-90PX。 写入JS $(function(){ var winHeight = $(document).scrollTop(); $(window).scroll(function() { var scrollY = $(document).scrollTop();// 获取垂直滚动的距离,即……

网友NO.153129

jquery和js实现对div的隐藏和显示方法

jQuery对div的显示和隐藏: 显示: $("#id").show() 隐藏: $("#id").show() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 document.getElementById("typediv1").style.visibility="hidden";//隐藏 document.getElementById("typediv1").style.visibility="visible";//显示 通过设置display属性可以使div隐藏后释放占用的页面空间,如下 document.getElementById("typediv1").style.display="none";//隐藏 document.getElementById("typediv1").style.display="";//显示 ……

网友NO.100167

jquery显示隐藏input对象

1 所属部门选择其他时 显示一个输入框进行填写 #htmlselect id='deptid' name='deptid' class="select" onchange='deptChange()' c:forEach var="item" items="${deptidList}" varStatus="status" option value='${item.value}'${item.name}/option /c:forEach/select !-- 类型为其他时 需要填写其它部门 --input id='otherDept' name='otherDept' type="text" class="text" maxlength='50' style='display:none;'/ //js// 根据切换是否显示其他部门输入框 function deptChange(){ var deptid = $('#deptid').val(); // alert('type:'+hytpye); if(deptid=='other'){ $('#otherDept').show(); }else{ $('#otherDept').hide(); } } ……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com