Category: Javascript /Jquery / Bootstrap / Web

jQuery :使用jquery.gritter.js实现弹框提示信息, 使用JQuery.Gritter做通知

  使用JQuery.Gritter做通知 JQuery.Gritter是一个基于JQuery的类似Growl的通知插件。它很容易使用而且能给用户留下深刻的印象。海鸥使用了它来做网站通知,你也使用把它应用到你的网站上。 官方教程 这里是JQuery.Gritter的Github主页,https://github.com/jboesch/Gritter。 如何使用它 通过Bower来安装JQuery.Gritter。只需要执行bower install jquery.gritter --save就会自动将JS和CSS文件下载到bower_components目录。 如果你不想使用Bower,你可以到它的官方网站下载JS和CSS文件。注意CSS文件也是很重要的,它会为你美化通知窗口。 引入js和css文件 <link rel="stylesheet" type="text/css" href="css/jquery.gritter.css" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script>… Read More

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