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 prototype 原型链
Mar 12 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
使用Python对SQLite数据库操作
2017/04/06 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
python爬取微信公众号文章
2018/08/31 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
总经理助理岗位职责
2013/11/08 职场文书
毕业生自荐书
2013/12/18 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL