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

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

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

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

jQuery实战案例精粹

jQuery实战案例精粹 从Web开发的实际应用角度出发,结合当下热门的 jQuery插件技术,深入浅出地介绍了 jQuery高性能开发的技巧,是前端开发、设计人员的绝佳选择。 本书共 22章,介绍了 jQuer

查看详情

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程序设计有所帮助。

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到jquery插件制作方法、 怎样处理jQuery EasyUI 已打开、 怎样实现jquery复选框chec、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:jQuery zepto.js简单实现tab切换的代码

下一篇:jQuery同步提交的实现代码分享

展开 +

收起 -

jQuery显示和隐藏表单 相关内容
jQuery EasyUI开发指南

使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

查看详情
jQuery Mobile从入门到精通

《jQuery Mobile从入门到精通》 一书以实例驱动的方式,用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识,并通过5个项目案例展现开发流程。全书分为4部分,共19章:第1部分为移动开

查看详情
疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战 查看详情
锋利的jQuery

《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版,事例选用全新升级的UI,编码更合乎词义化;提升jQueryMobile的章节目录;提升jQuery版本号转变的章节目录;提升jQuery特性提升和方法的章节目

查看详情
PHP与jQuery开发实例

这书由浅入深地叙述了怎么使用PHP与jQuery搭建高宽比互动的Web运用。每一章聚焦点一个主题风格,探讨Web开发者常常必须处理的一类实际难题。书中以实际上范例及编码表述的方法得出了有目

查看详情
jQuery实战从入门到精通

本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术,适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

查看详情
jQuery UI开发指南

《jQuery UI开发指南》 是jQuery UI的快速开发指南,全面介绍jQuery UI如何改进HTML页面展示,内容包括jQuery UI 1.8版本的下列扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历

查看详情
jQuery显示和隐藏表单 学习笔记
网友NO.715027

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.454850

基于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.810113

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.619383

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 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757