效果图：代码如下： <!DOCTYPE html> <html><head><meta charset="utf-8"><title>Staged progress bar</title><style type="text/css">*{margin:0;padding:0;}html,body{height:100%;}ul{list-style:none;}.cf:after{content:"";display:block;clear:both;height: 0;}#bar{height:20px;margin:100px 10px; margin-left: 50px}#bar div{float:left;position:relative;}#bar .staged, #bar .progress{border-color:#4CA8FF;}#bar .st...
很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法.自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用.1. 自定义指令实现拖拽 HTML: <div v-drag>我可以拖拽</div>JS:Vue.directive(drag, inserted:function(el){ //inserted 钩子函数:当元素被插入父元素时触发,可省略let oDiv=el; //el --> 触发的DOM元素oDiv.onmousedown=function(e){l...
1.自定义宽高效果1.html 代码 index.html <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="./jquery-1.12.4.min.js"></script> </head> <body> <img class="source" src="./test2.jpg" alt=""> <img src="" class="target" alt=""> </body> </html> 2.添加插件代码 (function ($) {$.fn.photoCrop=function (option) {var opt={img:,fixedScale:9/5,isHead:null,maxWidth:140...
vue.js 是数据绑定的框架，大部分情况下我们都不需要直接操作 DOM Element，但在某些时候，我们还是有获取DOM Element的需求的； 在 vue.js 中，获取某个DOM Element常用的方法是将这个元素改成一个组件 (component)，然后通过 this.$el 去获取，但是在一些很小的项目里，在一些没有使用 webpack 等构建工具的项目中，创建一个组件并不是那么值得，所以 vue 提供了另一种操作DOM元素的方式，就是自定义指令 (directive) ； 自定义指...
文本框（input或textarea）的光标无法修改样式（除了通过color修改光标颜色）。但笔者希望个人创建自己的网站时，文本框的光标有属于自己的风格。所以，尝试模拟文本框的光标，设计有自己风格的光标。以下是笔者个人的想法。 【************************基本思路***************************】 对于键盘操作来说，光标的基本操作不外乎最基本的三个键：左箭头（left arrow）、右箭头（right arrow）和退格键（backspace）。 左箭头...
网上看了好多分页插件都不太满意，所以根据网上的一些东西自己做了一个，可以搭配mvc和数据库效果图片先来css（样式不喜欢的话可以不用这个）.pagelist {padding:10px 0; text-align:center;} .pagelist span,.pagelist a{ border-radius:3px; border:1px solid #dfdfdf;display:inline-block; padding:5px 12px;} .pagelist a{ margin:0 3px;} .pagelist span.current{ background:#09F; color:#FFF; border-color:#09F; margin:0...
下面给大家分享vue自定义指令拖拽功能代码，具体代码如下所示：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>实例方法</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><script src="../js/vue1.0.js...
1、过滤器的用法,用 ‘| 分割表达式和过滤器。 例如：{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数。 用两个过滤器：{{msg | myfilter | myfilternumber }} 2、自定义的过滤器 过滤器的结构为：Vue.filter("id",function(value,a){}); value是过滤器的一个参数，也是默认的原始值。a是自定义的一个参数。 自定义过滤器的例子： <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><scri...
可直接使用的js滚动条，先看看效果图：代码如下 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>自定义滚动条</title> </head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滚动条</title> <style type="text/css"> *{ margin:0; padding:0;} #mainBox{ width:400px; height:500px; border:1px #bbb solid; position:relative; overflow:hidden;margin:50px auto;} #co...
就目前三大前端主流数据驱动框架（vue,ng,react）而言，均具有创建自定义组件的api，但都是必须先做到事先写好挂载点，这个挂载点可以是原有静态元素标签也可以是自定义模板；对于多种组件通过同一数据流生成的，如果事先在页面上写好挂载点(mounted)，然后通过dom操作去动态添加，会遇到类似这样一条错误提示信息：Failed to execute appendChild on Node: parameter 1 is not of type Node.(…)。这又是为何呢，下一步该怎么办？...
微信小程序 Toast自定义实例详解 实现类似于Android的Toast提示 index.js： var timer; var inputinfo = ""; var app = getApp() Page({ data: { animationData:"", showModalStatus:false }, onLoad: function () { }, showModal: function () { // 显示遮罩层 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(200).step() this...
微信小程序 自定义对话框实例详解 效果图：index.wxml： <button type="default" bindtap="clickbtn"> 点击 </button> <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"> <!--对话框标题--> <view class="dialog-title"> 请输入内容 </view> <!--对话框输入部分--> <view class="in...
自定义分页样式，不多废话，直接上代码~ html部分 <div id="my_id"> <div class="my_id"><table style=""><thead style=""><tr> <td>购买日期</td> <td>门票名称</td> <td>比赛时间</td> <td>比赛选手</td> <td>门票数量</td></tr></thead><tbody></tbody></table></div> </div> js部分 function testFun(){var data = [["哈哈","呵呵","嘿嘿","啦啦","耶耶"],["哈哈","呵呵","嘿嘿","啦啦","耶耶"],["哈哈"...
市面上大多数关于Vue.js自定义指令的文章都在讲语法，很少讲实际的应用场景和用例，以致于即便明白了怎么写，也不知道怎么用。本文不讲语法，就讲自定义指令的用法。自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。比如谷歌图片的加载做得非常优雅，在图片未完成加载前，用随机的背景色占位，图片加...
Javascript自定义事件，其本质就是观察者模式（又称订阅/发布模式），它的好处就是将绑定事件和触发事件相互隔离开，并且可以动态的添加、删除事件。 下面通过实例，一步一步构建一个具体的Javascript自定义事件对象。 如：我有一个action1函数，我想每次在执行完action1后，触发另一个函数service1，那么代码我们可以这么写： //服务service1 function service1(){} //函数action1 function action1(){//other things//then 启动s...