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


Posted in Javascript onMarch 18, 2015

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;

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

Javascript 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
JQuery与iframe交互实现代码
Dec 24 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
Ionic快速安装教程
Jun 03 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
jQuery实现列表的全选功能
Mar 18 #Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 #Javascript
JavaScript移除数组内重复元素的方法
Mar 18 #Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 #Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 #Javascript
Java File类的常用方法总结
Mar 18 #Javascript
JavaScript中的依赖注入详解
Mar 18 #Javascript
You might like
PHP入门速成教程
2007/03/19 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
Web程序工作原理详解
2014/12/25 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
基于Python fminunc 的替代方法
2020/02/29 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
护理专业自荐信范文
2014/02/26 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript
python神经网络Xception模型
2022/05/06 Python