随笔分类 - jquery
摘要：设置时分秒，样本效果图：DEMO： 时间 1、鼠标点击选择上一个或下一个。 2、鼠标按住不放，可以自动选择上一个或下一个。 运行代码
阅读全文
摘要：doT.js模板和pagination分页应用博客中模拟了数据加载初始化的过程。doT.js渲染每一项内容的数据项。示例如下：pagination分页插件的使用，示例如下：MessPage.pagination(total, { callback: initPage, prev_text: "«", next_text: "»", items_per_page: pageSide, num_edge_entries: 1, num_display_entries: 10, current_page: current});参数说明：ca
阅读全文
摘要：基于jquery和dot.js弹出框插件，兼容IE6+等其他浏览器。思想：弹出框元素插入body节点中，并在页面垂直居中显示（fixed定位），触发确定和关闭事件绑定。注意ie6包含两个问题：一、select、flash不能遮罩，采用iframe。二、fixed属性采用滚动时重新计算高度或在样式中采用表达式计算expression。源码分析：1、creatHtml：采用doT.js初始化元素添加到body中；2、show：设置宽度，高度，居中显示；3、events：为关闭和确定绑定事件；4、removeCallback：移出元素节点，如有执行回调方法；5、ie6fixed：ie6中fixed的
阅读全文
摘要：checkbox和radio浏览器默认的已经满足不了大众的审美需求，更不用说浏览器之间的差异化，取而代之，优化checkbox和radio的方法也随之诞生了。html结构：单选框为例，简单说明： 其中必需项包括：class="radio" 和 name="名称"帅哥靓妹未选中不可点击选中不可点击css表现：transition介绍：元素从一种样式逐渐改变为另一种的效果。transition 简写属性，用于在一个属性中设置四个过渡属性。transition-property 规定应用过渡的 CSS 属性的名称。transition-duration 定义过
阅读全文
摘要：商品编辑描述：主要是根据选中事件选中或取消，编辑DOM元素错做，增加，删除，修改。功能：用户选择某一个商品时，标记选中的商品，在商品栏中添加选中的商品并计算商品的总价钱。当用户取消选中商品或点击商品栏中的删除按钮时，删除对应的商品，取消商品的标记并重新计算价钱。在商品列表中ul(id:accradio)中，每一个li属性上记录商品的ID，price，name等等基本信息。在商品栏中ul(id:chooselist)中，记录li属性上的商品的ID，price，name等等基本信息。备注：在计算价钱时，由于javascript本身的bug，会显示有偏差。javscript中计算浮点数时有精度误差b
阅读全文
摘要：阻止事件冒泡冒泡事件流当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。if(e.stopPropagation) { //W3C阻止冒泡方法 ..
阅读全文
摘要：左侧分类导航菜单，是电商购物导航的最直接的分类形式。js方面主要以下几点注意1、事件有mouseover、mouseleaveonmouseover 事件会在鼠标指针移动到指定的对象上时发生。onmouseleave 事件会在鼠标指针移出到指定的对象时发生。2、setTimeout、clearTimeoutsetTimeout 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout() 只执行 code 一次。clearTimeout方法可取消由 setTimeout() 方法设置的 timeout。代码片段：鼠标移动到li元素上和移出元素时执行的动作_this.showlist.
阅读全文
摘要：左侧分类导航菜单html结构： 手机 分类 小米手机 三星手机 ...
阅读全文
摘要：ZeroClipboard是一个轻量级的jQuery“复制到剪贴板”插件采用了时下流行的零剪贴板库。官网：http://www.steamdev.com/zclip参数及默认值path(必选) ZeroClipboard.swf的路径 默认:ZeroClipboard.swfcopy(必选) 字符串或表达式返回字符串 默认: nullafterCopy(可选) 指定文本后可以覆盖alert警告框 默认: nullbeforeCopy(可选) 指定一个函数之前调用文本复制。 默认: nullclickAfter(可选) 布尔值 默认: truesetHandCursor(可选) 布尔值 默认:
阅读全文
摘要：输出html标签内容格式：{{html 名字}}DEMO：<!DOCTYPE html><html> <head> <title>jquery tmpl</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="js/jquery-1.8.1.min.js"></script> <script src="j
阅读全文
摘要：使用方法：<script id="testTemplate" type="text/x-jquery-tmpl"> //模板</script>有{{if}}{{/if}}、{{each}}{{/each}}等关键字使用变量：${变量名称}<!DOCTYPE html><html> <head> <title>jquery tmpl</title> <meta http-equiv="Content-Type" content="text
阅读全文
摘要：官方网站：http://jscrollpane.kelvinluck.com/demo：http://jscrollpane.kelvinluck.com/auto_reinitialise.htmlscrollToBottom方法滚动到底部$(function(){ var settings = { showArrows: true, autoReinitialise: true }; var pane = $('.scroll-pane') pane.jScrollPane(settings); var api = pane.dat...
阅读全文
摘要：autocomplete实现原理主要用在input 和 textarea这两个标签上，为这标签增加键盘监听事件和提示列表添加鼠标事件。例如：input的id为txt为input增加键盘监听事件（keyup） var mindex = -1; $("#txt").keyup(function(e){ e = e || window.event; if(e.keyCode !== 27 && e.keyCode !== 38 && e.keyCode !== 40){ _mtxt = $(this).val(); ...
阅读全文
摘要：为字体设置背景：为每一个字设置span标签，使span变成成为inline-block元素，并设置背景。span{ display: inline-block; width: 24px; height: 24px; line-height: 29px; text-align: center; font-size：12px; background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_apple.jpg) no-repeat; overflow: hi...
阅读全文
摘要：效果图如下：要求：成功时加载商品信息，失败时提示重新加载。其中，总个数，当前页，上一页和下一页是前台页面模拟的。只在页面加载时请求一次。代码： ;(function($){ $.fn.mroductInfo=function(options){ var _this = $(this); var len = 0; var index = 0; var defaults = { title:'商品名称', type:'GET', ...
阅读全文
摘要：三级联动---城市地区选择有关数据源指给出了部分，仅作参考，其中提供了北京和天津两组数据作为测试用。示例展示：选择城市选择区县选择地区示例代码：<!DOCTYPE html><html> <head> <title>三级联动</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="views/js/libs/jquery-1.8.1.min.js&
阅读全文
摘要：在关于《jquery插件图片浏览》中遗留一个问题，“有点小问题：当图片第一次加载没完成的时候，这时图片没有显示，会自动执行到下一张图片”改进版代码如下： (function($){ $.fn.mPicsList = function(options){ var picsImgs = $(this).find("img"); var picsImgsLen = picsImgs.length; var index = 1; var ltBtn = $(".leftbtn"); ...
阅读全文
摘要：jquery插件图片浏览jquery代码部分 (function($){ $.fn.mPicsList = function(options){ var picsImgs = $(this).find("img"); //获取图片 var picsImgsLen = picsImgs.length; //图片总个数 var index = 0; //当前图片索引下标 var ltBtn = $(".leftbtn"); ...
阅读全文
摘要：首先，看下效果图：json字符串：var mcode={"minfo":[{"time":"9:00-10:00","status":2},{"time":"10:00-11:00","status":1},{"time":"11:00-12:00","status":3},{"time":"13:00-14:00","status":1
阅读全文
摘要：datepicker介绍：参考：http://jqueryui.com/demos/datepicker/css:.ui-datepicker { width: 300px; padding: .2em .2em 0;}.ui-widget-header{background: none;border:none;}.ui-datepicker-title{ border-bottom:1px solid #CCCCCC;}.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-de
阅读全文