在开发过程中，为了效果好看，往往需要自己开发一个下拉列表，而不是使用 HTML 自身的 select 下拉列表。然而当编写自定义下拉列表的时候，就会碰到一个问题：如果用户在下拉列表的范围外进行鼠标点击的操作，如何关闭已经打开的下拉列表？ 解决思路如下：在 DOM 的根节点上添加一个 click 事件，同时下拉列表内阻止事件的默认行为和冒泡。当响应这个点击事件的时候，说明是在下拉列表范围外的点击（因为下拉列表内阻止了事件的冒泡...
两个对象：div1 和 div2，其中div1是div2的父元素，div2只能在div1的范围内拖拽 图中，红点是鼠标的位置，两个绿色箭头相减的结果就是disX，最后oEvent.clientX - disX 就是绿色箭头的部分，这个长度就是判断是否“出格”的依据，也就是这个短的绿色箭头范围应该在0 ~ div2.offsetWidth - div1.offsetWidth之间！ <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>客户区可见范围限制拖拽</title><style type="text/css...
瀑布流布局是网页中经常采用的一种布局方式，其布局有如下特点： 瀑布流布局特点： （1）图文元素按列排放 （2）列宽一致，但高度不等 （3）布局过程中将优先向高度最小的列补充数据 以下是自定义的一个jQuery瀑布流插件：jquery.myWaterfull.js (function ($) {$.fn.extend({myWaterfull: function () {var parentWidth = $(this).width(); //获取每行的宽度var childItems = $(this).children();var childWidth = childItems.w...
Vue是可以自定义指令的，最近学习过程中遇见了一个需要图片懒加载的功能，最后参考了别人的代码和思路自己重新写了一遍。以下将详细介绍如何实现自定义指令v-lazyload。 先看如何使用这个指令： <img v-lazyload="imageSrc" >imageSrc是要加载的图片的实际路径。 为了实现这个指令，我们首先单独建立一个文件，名字为lazyload.js.并填写基本的代码，如下： //Vue 图片懒加载，导出模块 export default (Vue , options = {}...
大多数情况下我们使用左键来进行页面交互，而右键大部分对于开发者来说是审查元素的，有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性，常见的有漫画左键前进、右键后退。 第一步我们要屏蔽浏览器默认的右键点击行为，即阻止弹出框。 首先要将阻止弹出函数绑定到目标元素上： //阻止浏览器默认右键点击事件 $("div").bind("contextmenu", function(){return false; })如此一来，div元素的右击事件就被屏蔽了，而浏览器其...
功能描述: 通过点击按钮,可以增减购物数量 组件名称是 CouterBtn 最终效果如下我们使用 vue-cli搭建基本的开发环境,这也是最快的进行 .vue组件开发的方式 对于入口组件 App.vue (可以暂时忽略其他细节,我们的重点是如何写组件) App.vue<template><div id="app"><h4>这是一个利用 v-model实现的自定义的表单组件</h4><h6>CouterBtn组件的值 <i> {{ btnValue }} </i></h6>5. <counter-btn v-model="btnValue"></counter-btn><form c...
微信提供了一个toast的api wx.showToast() 相关连接：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject 本来是比较好的，方便使用，但是这个toast会显示出图标，而且不能去除。 假设：我们执行完业务的时候，toast一下，当执行成功的时候，效果还可以接受，如下图： 但是，当执行失败的时候，如下图： 失败了，你还显示个扣扣图案，那到底是成功还是失败？？这肯定是不能接受的。 若是给老板看到...
微信提供了动画api，就是下面这个相关链接：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreateanimationobject 通过使用这个创建动画的api，可以做出很多特效出来 下面介绍一个抽屉菜单的案例 实现代码： wxml：<!--button--> <view class="btn" bindtap="powerDrawer" data-statu="open">button</view> <!--mask--> <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{...
上一篇文章：nodejs微信公众号开发——5.素材管理接口，我们实现了新增临时素材、管理永久素材的接口，这些接口的实现，使我们能够推送多样的消息给用户。本节介绍的内容是关于自定义菜单1. 自定义菜单的介绍自定义菜单能够帮助公众号丰富界面，让用户更好更快地理解公众号的功能。关于自定义菜单需要掌握以下几点内容： 自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单。一级菜单最多4个汉字，二级菜单最多7个汉...
1.前言 假设一个景区有多张图片需要在地图上展示，并且随着地图的缩放而缩放（不是单纯的以气泡来展示）。如果利用传统方案，则是我们首先将图片纠正赋予地理信息，然后根据地图级别进行切图，最后以瓦片的形式叠加至地图上，工作量是很大的。然而考虑到图片本身不会太大（小于3M），那么有没有其他方法来解决呢。这里我和大家一起探讨几种解决思路。 2.解决思路 2.1基于grahpic和symbol来解决 2.1.1思路描述 简单说就是获取图片左...
摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果调用方式 $("#picUrl").imgUpload({})，在代码内部为调用对象绑定了click事件，点击弹出上传界面。 $(function(){ $("#picUrl").imgUpload({url:<%=basePath%>+file/upload.do}) $("#picUrl").imgUpload("resize");/**弹出层水平垂直居中**/ })jquery自定义插件要点 1.定义作用域 2.$.fn.***为每个jquery对象...
最近在项目中使用了vue.js。在爬坑的路上遇到了很多问题。这里都会给记录下来，今天要说的是怎么获取自定义属性的值。 HTML <!DOCTYPE html> <html> <head> <script src="http://vuejs.org/js/vue.js"></script><meta charset="utf-8"><title>JS Bin</title> </head> <body><div id="app"><button v-for="list in items" @click="getType(list.type)" :type="list.type">click{{list.type}}</button><p>type:{{type}}</p></div></b...
按照国际惯例先安利：Useful-Open-Source-Android_jb51.rar 上一篇把环境搭完了，然后把默认的8080内容跑通了，这一片尝试把常用的一些标签给学习一下（按钮啊，列表，图片啥的） 整篇都是跟着官方教程学，只是加入一系列自己的理解和分析，方便以后温故 默认环境已经帮我们把包结构建好了，如下index.html是我们的页面 main.js是让App.vue和页面产生关联的“挂载js文件“（不知道这么描述合适不合适，有问题欢迎提出） App.vue就是...
最近有一个关于制作在线音乐播放器的项目，需要使用一个滚动条，但是自带滚动条实在是太丑了，所以就自己琢磨了一下自定义的滚动条。 在网上看原理，说实话没怎么看懂，就趁今天上午上安卓的时候，研究了一下，结果还算是满意吧。然后就包装一个对象。 使用方法很简单，就是自定义一个div，将这个对象导入做参数，new一下就可以。也可以自己定义滚动条的样式，只要自己修改一下样式表就可以 效果图：代码如下： <!doctype html> <...
jQuery的ContextMenu插件使用起来非常简单（当前前提是看了我的上一篇微博，哈哈），但是想改菜单的图标，很多人又要懵圈了。因为ContextMenu插件只提供了有限的几个图标，如剪切、拷贝、删除等等。 修改图标的相关代码： $(function(){$.contextMenu({selector: .context-menu-one, callback: function(key, options) {var m = "clicked: " + key;window.console && console.log(m) || alert(m); },items: {"edit": {name: "Edit"...