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 相关文章推荐
理解Javascript_03_javascript全局观
Oct 11 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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获取网页内容方法总结
2008/12/04 PHP
详解PHP中的Traits
2015/07/29 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
Python正则表达式匹配HTML页面编码
2015/04/08 Python
python 异常处理总结
2016/10/18 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
简单了解Python生成器是什么
2019/07/02 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
中学生期中自我鉴定
2014/04/20 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
人民检察院起诉书
2015/05/20 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书