脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery实现根据类型自动显示和隐藏表单

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

 更新时间：2015年03月18日 11:39:27   投稿：hebedich  
这篇文章主要给大家分享了jQuery实现根据类型自动显示和隐藏表单的代码，非常的简单实用，仅仅10行代码，推荐给大家，希望能给大家一些提示。

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" style="display: none;">
                    <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 UI震动效果实现原理及步骤

    Jquery UI震动效果实现原理及步骤

    如果你想你的博客页面某些部分引起读者的注意，你可以使这些部分震动，如广告等等，今天这篇文章将介绍怎样使你的页面中的元素震动起来,感兴趣的你可不要错过了哦，或许对你学习jquery ui 有所帮助
    2013-02-02
  • IE6下opacity与JQuery的奇妙结合

    IE6下opacity与JQuery的奇妙结合

    在群里看见有人贴出一个页面问opacity不支持IE6，有什么好的支持方法没。贴出第一眼就发现用了jq库，当场就想到了支持的。 但很多人回答用CSS滤镜，当我看到这个答案的时候。有些很吃惊。难道大家都不知道JQ是支持opacity兼容IE6+的吗？ 开始他们都不相信。JQ怎么配合使用。于是就写了一个简单的代码给他们。
    2013-03-03
  • Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效

    Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效

    这篇文章主要介绍了Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效,需要的朋友可以参考下
    2015-03-03
  • jquery实现简单易懂的图片展示小例子

    jquery实现简单易懂的图片展示小例子

    图片展示想必大家都见到过吧，下面有个不错的例子，通俗易懂，使用jquery实现的，感兴趣的朋友不要错过
    2013-11-11
  • Jquery之美中不足小结

    Jquery之美中不足小结

    在QWrap群里讨论时，有同学问jquery/yui等已做到极致，我们有没必要再重复造一个叫QWrap的轮子？
    2011-02-02
  • jQuery使用手册之二 DOM操作

    jQuery使用手册之二 DOM操作

    jQuery使用手册之二 DOM操作...
    2007-03-03
  • jQuery实现的超链接提示效果示例【附demo源码下载】

    jQuery实现的超链接提示效果示例【附demo源码下载】

    这篇文章主要介绍了jQuery实现的超链接提示效果,结合实例形式对比分析了jQuery实现的带有loading动态图效果的提示文字以及默认提示文字显示效果,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2016-09-09
  • 浏览器常用高宽的jquery插件

    浏览器常用高宽的jquery插件

    兼容BackCompat,CSS1Compat两模式渲染的页面,测试的浏览器 :friefox ie678 chrome opera
    2011-02-02
  • jQuery实现的隔行变色功能【案例】

    jQuery实现的隔行变色功能【案例】

    这篇文章主要介绍了jQuery实现的隔行变色功能,结合具体实例形式分析了jQuery事件响应、元素遍历及属性动态操作相关使用技巧,需要的朋友可以参考下
    2019-02-02
  • jQuery实现火车票买票城市选择切换功能

    jQuery实现火车票买票城市选择切换功能

    本文通过实例代码给大家分享了jQuery实现火车票买票城市选择切换功能，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-09-09

最新评论