分类:Javascript /Jquery / Bootstrap / Web

jQuery-jeditable: 点击即编辑, jquery双击编辑内容, jquery实时编辑插件, jQuery 即时编辑插件

实时编辑,就是在原位置直接编辑,不用另打开一个编辑页面。有时候我们只是想修改其中一个属性的值,打开一个完整的编辑页面实在没必要,实际效果就是像phpMyAdmin那样子。 插件官网:http://www.appelsiini.net/projects/jeditable 项目地址:https://github.com/NicolasCARPi/jquery_jeditable/ 在线demo:https://jeditable.elabftw.net/ 在线API:https://jeditable.elabftw.net/api/ 使用方法: 一、导入js文件 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/2.0.3/jquery.jeditable.min.js"></script> 二、基本案例 $('.editable').editable('editable.php',{ type:'textarea',//实时编辑input框的type cancel:'取消',//取消编辑按钮的文字 submit:'确定',//确认提交按钮的文字 indicator:'保存中...',//提交处理过程中显示的提示文字 tooltip:'单击编辑...'//鼠标悬停时的提示信息 });… Read More

jQuery选择什么版本 1.x? 2.x? 3.x?, jQuery各个版本的具体区别和特性

类似标题:jQuery选择什么版本?jquery一般用什么版本?jquery ie8兼容版本。jquery什么版本稳定? 目前jQuery有三个大版本: 1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日) 2.x:不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日) 3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本:3.3.1(2018年5月20日) 1.X大版本下,细分版本非常多,各个版本的函数都会有一定的差异。网上看到的很多教程大多是1.x版本的。jquery官方手册:http://api.jquery.com/ 维护ie678是意见头疼的事情,一般我们都会额外加载一个css和js单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,电脑端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对ie678的支持。    jquery3.0 新特性: 1. 移除旧的IE工作区 新的最终版最主要的目标是更加快速,更加时尚,因此,那些支持早于IE9版本的相关技术与工作区都被移除了。这意味着如果你想要或者需要支持IE6-8,你必须用回1.12版本,因为甚至是2.X版本都无法完整支持早于IE9的浏览器。 2. jQuery 3.0运行在Strict Mode下… Read More

jQuery: table列序列重排, 上移下移排序, 拖拽排序, 拖拽table列, dragtable table, Visually reorder all your table columns

  1. 拖拽排序 项目地址:https://github.com/akottr/dragtable 官网:http://www.danvk.org/wp/dragtable/index.html 直接下载:dragtable-master.zip 用法: 1. 引入库:jquery和 jquery ui 是必须的,dragtable.css 可以自定义 <link rel="stylesheet" type="text/css" href="//rawgithub.com/akottr/dragtable/master/dragtable.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>… Read More

Javascript: 数字处理, 数字格式化, Numeral.js

项目:https://github.com/adamwdraper/Numeral-js 下载:https://github.com/adamwdraper/Numeral-js/zipball/master 直接下载:Numeral-js.zip 用法 Use it 1. 直接引入,或者CDN引入。 <script src="numeral.min.js"></script> or include from cdnjs.com <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script> 2. In Node.js npm… Read More

Bootstrap: 如何修改Modal长度,Modal如何居中, How to increase Bootstrap Modal Width and be Centered?

上图有错误修改的结果, 解决方案如下: HTML: <a href="#shipping_calculator" title="" data-toggle="modal">TEST</a> <div id="shipping_calculator" class="modal fade" tabindex="-1"> <div class="vertical-alignment-helper"> <div class="modal-dialog vertical-align-center"> <div class="modal-content">

Javascript: Web API中的Blob, 使用URL.createObjectURL创建url对象, Blob 视频地址, 浏览器中创建和下载文件

在一般的Web开发中,很少会用到Blob,但Blob可以满足一些场景下的特殊需求。Blob,Binary Large Object的缩写,代表二进制类型的大对象。Blob的概念在一些数据库中有使用到,例如,MYSQL中的BLOB类型就表示二进制数据的容器。在Web中,Blob类型的对象表示不可变的类似文件对象的原始数据,通俗点说,就是Blob对象是二进制数据,但它是类似文件对象的二进制数据,因此可以像操作File对象一样操作Blob对象,实际上,File继承自Blob。 Blob 实例:点我   Blob基本用法 创建 可以通过Blob的构造函数创建Blob对象: Blob(blobParts[, options]) 参数说明: blobParts:数组类型,数组中的每一项连接起来构成Blob对象的数据,数组中的每项元素可以是ArrayBuffer, ArrayBufferView, Blob, DOMString 。 options:可选项,字典格式类型,可以指定如下两个属性: type,默认值为 "",它代表了将会被放入到blob中的数组内容的MIME类型。… Read More

Javascript: 图表类, Chart.js使用总结, 数据可视化, 画折线图实例, Chart.js 快速入门, Chart.js图表的保存/下载

概述 Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图、柱形图、雷达图、饼图、环形图等。在每种图表中,还包含了大量的自定义选项,包括动画展示形式。 Chart.js比较轻量(gzip版本仅4.5k),且不依赖其他库。 Chart.js官网: http://www.chartjs.org/ 使用步骤 第一步:安装 #npm: npm install chart.js --save #Bower: bower install chart.js --save #CDN: https://cdnjs.com/libraries/Chart.js chart.js源码:https://github.com/nnnick/Chart.js… Read More

jQuery:实现简单table 排序, table sort

使用jquery.sortElements 方法: 引入库: <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript" src="https://rawgithub.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script> HTML: <table> <tr> <th id="facility_header">Facility name</th> <th>Phone #</th> <th id="city_header">City</th> <th>Speciality</th>… Read More

JQuery: 操作数组 each、map、grep、filter, 循环数组, 编辑数组

Jquery中对数组的操作大致有一下几种形式: 1、$.each( collection, callback(indexInArray, valueOfElement) ) $.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合,不管是一个JavaScript对象或者是一个数组,如果是一个数组的话,回调函数每次传递一个数组的下标和这个下标所对应的数组的值(这个值也可以在函数体中通过this关键字获取,但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字),这个函数返回所遍历的对象,也就是这个函数的第一个参数,注意这里还是原来的那个数组,这是和map的区别。 其中collection代表目标数组,callback代表回调函数(自己定义),回调函数的参数第一个是数组的下标,第二个是数组的元素。当然我们也可以给回调函数只设定一个参数,这个参数一定是下标,而没有参数也是可以的。 下面举个例子: var mem = ['a','b','c']; var returnvalue = $.each(mem, function(index) { alert(index);… Read More