话不多说，请看代码 <html> <head><title></title><meta charset="UTF-8"><style>*{ padding:0; margin:0;}.block{ display:block;}.none{ display:none;}#wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}#tab1,#tab2{ list-style:none;}#tab1 li,#tab2 li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}...
使用Vue做双向绑定的时候，可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li {margin: 0px;padding: 0px; } .page-bar {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; } .page-button-disabled {color:#ddd !important; } .page-bar li {list-style: none;display: inline-block;...
利用面向对象自己动手写了一个封装好的jquery轮播对象，可满足一般需求，需要使用时只需调用此对象的轮播方法即可。 demo：https://github.com/zsqosos/shopweb 具体代码如下： HTML结构： <div class="banner" id="J_bg_ban"><ul><li><a href="#"><img src="banner_04.jpg" alt="广告图 /></a></li><li><a href="#"><img src="banner_04.jpg" alt="广告图 /></a></li><li><a href="#"><img src="banner_03.jpg" alt="广告图"/></a...
我们在做列表的时候经常会遇到全选，反选进行批量处理问题，例如：我当时就是简单的实现了，然后想封装到公共的js中，封装的太烂，不好意思贴出来了（就是把实现代码之间放到公共js中，然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了），然后想到之前老大有写过这个功能去看下他怎么写的，真是没有对比就没有伤害啊，这才叫封装； $(:checkbox[data-check-target]).click(function () { var target = $(this).att...
因为平常工作中很常用到该功能，所以就利用这次国庆假期，重新梳理与对原有代码进行改善，再集成一个常用的功能，最终封装出这个“简单倒计时”功能。 该倒计时方法具有以下该功能： 1. 根据指定日期与当前的电脑时间进行匹配 2. 通过指定一个数组参数，来设置在每一天内不同的时间段进行倒计时。 * 该方法还未通过实际工作的检测，稳定性未知（如果实际工作通过，会删除这段话） function countDown(date,target,filter){var setT...
扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识，最佳做法和常见的陷阱。 一、入门 编写一个jQuery插件开始于给jQuery.fn加入??新的功能属性，此处添加的对象属性的名称就是你插件的名称： . 代码如下: jQuery.fn.myPlugin = function(){ //你自己的插件代码 };用户非常喜欢的符号哪里去了？它仍然存在，但是，为了避免和其他JavaScript库冲突，我们最好将jQuery传递...
本文实例讲述了原生javascript实现的ajax异步封装功能。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="Scripts/jq...
目前学习小程序更多的是看看能否二次封装其它组件，利于以后能快速开发各种小程序应用。目前发现picker的selector模式只有一级下拉，那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢？答案是肯定可以的。那么我的思路是这样的： 1、使用template模板语法进行封装，数据从页面传入 2、根据picker组件的语法，range只能是一组中文地区数组，但是我们需要每个地区的唯一码来触发下一级联动数据。这样，我的...
微信小程序 使用picker封装省市区三级联动实例 目前学习小程序更多的是看看能否二次封装其它组件，利于以后能快速开发各种小程序应用。目前发现picker的selector模式只有一级下拉，那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢？答案是肯定可以的。那么我的思路是这样的： 1、使用template模板语法进行封装，数据从页面传入 2、根据picker组件的语法，range只能是一组中文地区数组，但是我们需要每...
前言 在实际的项目开发中，我们经常需要三级联动，比如省市区的选择，商品的三级分类的选择等等。 而网上却找不到一个代码完整、功能强大、使用简单的三级联动菜单，大都只是简单的讲了一下实现思路。 下面就给大家分享我在工作中封装并在项目中使用的三级级联操作代码，如有错误或者不当的地方欢迎大家指正。 使用简单(只需要一行代码) 可以根据需要设置是否显示“请选择”项 支持回调(在三级分类加载完成后触发回调事件) 支持一个...
本文实例讲述了微信js-sdk分享功能接口常用逻辑封装。分享给大家供大家参考，具体如下： 微信js-sdk 1.0，分享说明： 1.目前支持的分享接口5个，其中分享腾讯微博基本可以忽略 2.接口只是定义分享时的数据，没有提供触发分享功能 一、在ready事件使用使用示例 //分享对象使用 var shareData={title:分享标题,desc:分享描述,link:http://www.gongjuji.net,imgUrl:http://www.gongjuji.net/favicon.ico,success:function(){appendTex...
一. 语法 1.1 获取当前页面的所有cookie： var allCookies = document.cookie;allCookies 是一个字符串，其中包含了以分号分隔的cookie列表字符串 (即 key=value 键值对)。 1.2 写一个新cookie： document.cookie = updatedCookie;updatedCookie是一个键值对形式的字符串。只能用这个方法一次设置或更新一个cookie，而且写入并不是覆盖，而是添加。例如： document.cookie = "fontSize=14"; document.cookie = "fontSize=16"; docu...
前言 与js相比，jquery为我们省去了冗长的获取元素的代码，不用考虑一些麻烦的兼容问题，更加方便的动画实现，以及更加方便的方法调用让我们觉得jquery真是越用越舒服。但是jquery说到底还是对js的封装，我们不光要用的舒服还要深入理解其中的原理，这样才能更好的使用它。 首先我们封装的函数为了能实现可传入无限多个参数，在使用我们即将封装的函数时，需要使用对象进行传参，形式如下： //data作为参数传入我们下面封装的函数 ...
用js封装一些常用的jquery方法 记录一下 hasClass：判断是否有class function hasClass(ele, cls) {if (!ele || !cls) return false;if (ele.classList) {return ele.classList.contains(cls);} else {return ele.className.match(new RegExp((\\s|^) + cls + (\\s|$)));} }addClass：增加class function addClass(ele, cls) {if (ele.classList) {ele.classList.add(cls);} else {if (!hasClass(ele, cls)) ele.className += +...
本文实例讲述了JS封装的选项卡TAB切换效果。分享给大家供大家参考，具体如下： <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>JS封装的选项卡TAB代码</title> <style type="text/css"> *{ padding:0; margin:0;} .block{ display:block;} .none{ display:none;} #wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;} #diya,#diyas{ list-style:none;} #diya li,#diyas li{...