Bootstrap 支持的另一个特性,输入框组。输入框组扩展自 表单控件。使用输入框组,您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。...通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素。例如,您可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素。...也不要直接向表单组应用输入框组的 class,输入框组是一个孤立的组件。...您可以把复选框和单选插件作为输入框组的前缀或者后缀元素,如下面的实例所示: 实例 结果如下所示: 带有下拉菜单的按钮 在输入框组中添加带有下拉菜单的按钮,只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可
onBlur="if(this.value=="") this.value="******";" onFocus="if(this.value=="******") this.value="";"> jquery...实现方法 对于元素的焦点事件,我们可以使用jQuery的焦点函数focus(),blur()。...focus():得到焦点时使用,和javascript中的onfocus使用方法相同。...如: $("p").focus(); 或$("p").focus(fn) blur():失去焦点时使用,和onblur一样。...label覆盖在文本框上,可以更好的控制样式 jquery
需求 最近在项目中,有一个需求就是需要若数据库Input的数据改变且失去焦点则ajax请求后台保存新改变的数据。【如果数据没改变,那么就算失去焦点也不做任何处理】 ?...后来自己想了一个办法, 当数据库 获得焦点 后维护一个对象,将该input 的name和value分别作为键 和 值。...这样当该输入框失去焦点后,将目前的值对比之前维护的对象,若有变化则请求后台更新数据库。 附上部分代码截图 ?
基于Bootstrap和JQuery实现动态打开和关闭tab页 by:授客 QQ:1033553122 1....测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-dist win7 2.
$("#address").focus(function () { // 地址框获得鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if...(txt_value == "请输入邮箱地址") { $(this).val(""); // 如果符合条件,则清空文本框内容 } }); $("#address").blur(...function () { // 地址框失去鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if (txt_value == "") {...$(this).val("请输入邮箱地址"); // 如果符合条件,则设置内容 } }) $("#password").focus(function () { var...(this).val(""); // 如果符合条件,则清空文本框内容 } }); $("#address").blur(function () { // 地址框失去鼠标焦点
文本框失去焦点事件、获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件...,我们可以使用jQuery的焦点函数focus(),blur()。...focus():得到焦点时使用,和javascript中的onfocus使用方法相同。...如: $(“p”).focus(); 或$(“p”).focus(fn) blur():失去焦点时使用,和onblur一样。...其中placeholder就是其中一个,它可以同时完成文本框获得焦点和失去焦点。必须保证input的value值为空, placeholder的内容就是我们在页面上看到的内容。
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考。...在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了。直接上 Vue CLI3.0 配置步骤。...第一步:安装 jQuery、 Bootstrap、popper.js依赖。 其中popper.js 用于在 Bootstrap 中显示弹窗、提示、下拉菜单,所以需要引入。...npm install jquery bootstrap@3 popper.js --save 注意:上面的 bootstrap@3 指的是安装 Bootstrap 第三版,如果不加 @3 符号,默认安装第四版...', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper
/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> jquery.../2.0.0/jquery.min.js"> bootstrap/3.0.3/js/bootstrap.min.js...表单控件状态 除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上),Bootstrap 还为禁用的输入框定义了样式,并提供了表单验证的 class。...输入框焦点 当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow。...禁用的字段集 fieldset 对 添加 disabled 属性来禁用 内的所有控件。 验证状态 Bootstrap 包含了错误、警告和成功消息的验证样式。
如果你使用asp.net mvc,而且使用的js库是jQuery, 那么一定别错过使用jQuery UI,使用jQuery UI 有个一套的mvc套件值得使用jQuery ASP.Net MVC Controls...默认MVC3模板项目已集成jQuery: ?...jQuery ASP.Net MVC Controls是一个基于jQuery和jqGrid框架ASP.Net MVC的兼容控制的完整的包,主要包括jqGrid的Ajax的分页,编辑,分格,批量更新以及标准的控件
DOCTYPE html> Bootstrap 实例 - 表单控件大小 jquery/2.1.1/jquery.min.js"> bootstrap... 3 4 5 静态控件和密码框...DOCTYPE html> Bootstrap 实例 - 表单控件状态 输入框获得焦点
方法还是有挺多的,很多JavaScript的库都可以实现这个功能,但是因为WordPress里已经自动加载了jQuery了,所以就不想再引入其他库了,而且这个需求也很简单,用jQuery就足够了。...写CSS是我的弱项,所以我就选择了Bootstrap,完整版的太臃肿了,包含了太多不需要的东西,完整引入也有可能会把现有主题搞乱,所以在 Bootstrap官网上定制化下载了一个最简版的,只包含alert...和 progress部分,其他部分都不要。...因为这是一个页面,slug是genesis-explained,所以就叫page-genesis-explained.php,加入以下代码,作用就是用add_action()把上面的JavaScript脚本和CSS.../js/bootstrap-processbar.js', array( 'jquery' ), CHILD_THEME_VERSION, true
技术要点: 1)使用Bootstrap; 2)使用jQuery。...========================== 1、下载Bootstrap和jQuery文件,放置到网站项目的static文件夹中,如果没有static文件夹,创建它。...3、修改apps\questions\templates\questions\test.html文件,使用bootstrap和jquery。
现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这9...1、HTML5移动端外观时尚的日期时间选择控件 之前我们介绍过很多基于jQuery的日期时间选择控件,比如这款基于Bootstrap和jQuery的日历控件和日期选择插件。...和jQuery的日历控件和日期选择插件 这次我们要来分享一款漂亮而且实用的jQuery日历控件和日期选择插件,而且这款日历控件是基于Boostrap的,外观还不错。...控件有两种模式,一种是日历模式,可以快速定位年份和月份,很方便。另一种是日期选择模式,单击输入框即可弹出日期选择控件,并且支持格式化日期。 ?.../jquery-lunar-calendar.html) 5、基于Bootstrap的日期选择控件 可选择多种日期格式 这次要介绍的日期选择控件是基于Bootstrap风格的,可支持多种日期合适,并且外观也非常清爽
bootstrap.AMapPositionPicker 是一款基于高德地图的位置选择插件,使用jQuery开发。...概述 bootstrap.AMapPositionPicker是一款基于高德地图的位置选择插件,使用jQuery开发。...主要特性有: data-*属性配置 初始位置数据 浏览器定位 字段显示格式、验证 数据控件绑定 支持地理逆编码 自定义Modal外观样式 使用方法 1、依次引入高德地图 JS、jQuery、Bootstrap...和 bootstrap.AMapPositionPicker.min.js 文件。...2、在目标输入框初始化选项。
focus 绑定获得焦点事件 append appendTo after before SQL 入门 常见关系化数据库 ?...是html和css框架,动态css语言用less写的。 会随着网页变化而变化。bootstrap可以提高开发人员的工作效率,响应式页面,可以适应不同浏览器。 案例: jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --> jquery@1.12.4/dist/jquery.min.js"> 栅格系统就是bootstrap提供的一套响应式流式栅格系统,最多12列,用于通过一系列的行和列的组合来创建页面的布局。 ? 效果 ?
今天偶然间看到文档服务器有一个动态目录功能,点击目录能跳转到指定的位置;窗口滑动也能自动更新目录的焦点。...效果 框架 原来使用的是一个开源的jquery-ui控件——tocify.js,它可以遍历页面,把指定的DOM元素抽取出来形成目录。...去掉即可) images 可以忽略 libs 额外使用的文件,如jquery,jquery-ui,bootstrap等等 src 源文件(包括js以及css)——重点 test 忽略 其他忽略 举个栗子.../libs/jqueryui/jquery-ui-1.9.1.custom.min.js"> bootstrap.js"></script...: "h1,h2,h3,h4,h5" }); }); 效果就像前面flash中一样 这个控件支持很多的参数,源码中说的比较详细了,下面是默认的参数 /
>;因为我们这个音乐播放不是单曲循环的使用还要用到jQuery插件做一个下拉框式的选择切换功能,所以依旧要使用到jQuery插件;使用jQuery建立一个动态生成的歌曲选择器,再用jQuery...设置点击事件或者焦点失去事件,只要能触发下面的切换效果就行 内的属性以及解析: autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。...controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。 loop loop 如果出现该属性,则每当音频结束时重新开始播放。...难点:建立失去焦点事件,要做到歌曲选择的下拉框失去焦点的时候播放器切换到对应歌曲: $(“.music”).change(function(){ //设置焦点失去事件 var src=$(this...插件/css/bootstrap.min.css"> 音乐播放器 <div
数据权限(精细化数据权限控制,控制到行级,列表级,表单字段级,实现不同人看不同数据,不同人对同一个页面操作不同字段。 提高开发效率及质量。常用类封装,日志、缓存、验证、字典、文件、邮件、,Excel。...NFine技术介绍 一 前端技术 JS框架:jquery-2.1.1、Bootstrap.js、JQuery UI。...CSS框架:Bootstrap v3.3.4(稳定是后台,UI方面根据需求自己升级改造吧)。 客户端验证:jQuery Validation Plugin 1.9.0。...数据表格:jqGrid、Bootstrap Talbe。 对话框:layer-v2.3。 下拉选择框:jQuery Select2。...树结构控件:jQuery zTree、jQuery wdtree。 页面布局:jquery.layout.js 1.4.4。 图表插件:echarts、highcharts。
Bootstrap 表单 在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。...Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select。...输入框(Input) 最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。...输入框焦点 当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow。...禁用的字段集 fieldset 对 添加 disabled 属性来禁用 内的所有控件。 验证状态 Bootstrap 包含了错误、警告和成功消息的验证样式。
必须输入整数 (9)creditcard: 必须输入合法的信用卡号 (10)equalTo:"#field" 输入值必须和#field相同 (11...(jQuery.validator.messages, { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件...: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"), rangelength: jQuery.validator.format("请输入一个长度介于...{0} 和 {1} 之间的字符串"), range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format...,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点 focusCleanup:Boolean Default: false 如果是true那么当未通过验证的元素获得焦点时
领取专属 10元无门槛券
手把手带您无忧上云