废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{width:200px;} </style> </head> <body> <div id="wrap"> <img src="images/DSC_3496.jpg" style="position:absolute;width: 200px;z-index:100"> <img src="images/DSC_3949.jpg" style="position:absolute;width: 300px;"> <img src="images/DSC_3172.jpg" style="wid...
本文介绍了vue引入swiper插件,分享给大家,希望对大家有帮助步骤一:安装vue, $ npm install vue 步骤二:创建vue项目 # 全局安装 vue-cli $ npm install -g vue-cli $ cd my-project $ npm install $ npm run dev 上面这些就是安装好vue项目,最主要的就是下面的步骤 步骤三:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下。 步骤四: 安装runtime: 终端命令:npm install babel-runtime 步...
之前写了一个上传头像的功能模块,以下的内容是描述上传头像过程中裁剪图片插件结合vue的一个使用。当然,使用就安装 npm install cropperjs接着再引入 import Cropper from 'cropperjs'下面是源码<template> <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel"> <div> <img id="image" :src="url" alt="Picture"> </div> <button type="button" id="button" @click="crop">确定</button> </div> <div style=...
昨天在vue的官网上看到vue-aplayer这个音乐播放器的插件,由于个人有比较喜欢音乐,所以就拿过来玩一玩,感觉还是比较实用的,界面美观。首先,我们先安装 npm install vue-aplayer --save ,之后在组件中引入 import VueAplayer from vue-aplayer,下面就是源码,可供参考: <template> <div> <div style="padding:10px 0;"> <a-player :music="songList" :showlrc="3" :narrow="false" theme="#b7daff" mode="circulation" v-if...
先给大家展示下效果图,如果大家感觉不错,请参考实现代码:废话少说,直接上代码,可拷贝直接运行: <!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>validationEngine 插件</title><!--<link rel="stylesheet" type="text/css" href="css/validationEngine.jquery.css...
微信小程序 wx:for的使用实例详解 在小程序的开发过程中,经常会用到在前端页面循环打印一个数组或者对象的数据,这样的话就需要用wx:for来实现。 一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据,这些在上一篇博客中有详细介绍。我们最后说到写好的本地数据可以另一个页面读取: var fileData = require(../../utils/data.js) Page({ data: { sh...
效果图:代码如下: <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;font-family: "微软雅黑";}#wrap{width: 400px;height: 500px;border: 1px solid #ccc;margin: 20px auto;position: relative;overflow: hidden;background: #f1f1f1;}#wrap a{width: 40px;height: 50px;background:rgba(0,0,0,.4);/*border: 1px solid #fff;*/position: absolute;top: 50%;margin-top: -25p...
之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定。接触vue后,对前端MVVM框架有了全新的认识。本文是基于webpack+vue构建,由于之前的工作主要是基于java的服务端开发工作,对前端框架和组件的理解,不够深入,借此来记录在前端框架使用和构建中的点点滴滴。此分页组件参照于bootstrap-datatable底部分页开发完成,相关参数增加自定义功能。最终使用展现效果图如下,数据来源于cnodejs【https:/...
本文实例总结了javascript的replace方法结合正则使用方法。分享给大家供大家参考,具体如下: replace()方法用于在字符串中用一些字符替换另一些字符,或者替换一个正则表达式匹配的字符串 例子一:直接使用repalce替换 var stringObj="终古人民共和国,终古人民"; //替换错别字“终古”为“中国” //并返回替换后的新字符 //原字符串stringObj的值没有改变 var newstr=stringObj.replace("终古","中国"); //中国人民共和国,终古人...
学习使用bootstrap表格是对客户端进行分页的时候,在朋友的帮助下,找到了文档http://bootstrap-table.wenzhixin.net.cn/examples/ 找到了传到后台的每页条数Limit,和记录开始数Offset。 开始封装,分享一下我的代码,从bootstrap table 获取页码和页数,并交给后台处理。 $(#table).bootstrapTable({url: <%=path%>/FeedList.cqzk,striped: true,pagination: true,pageList: [3,5,20],pageSize:3,...
在ExtJS中,不管是叶子节点还是非叶子节点,都统一用TreeNode表示树的节点。在ExtJS中,有两种类型的树节点。一种节点是普通的简单树 节点,由Ext.tree.TreeNode定义,另外一种是需要异步加载子节点信息的树节点,该类由Ext.tree.AsyncTreeNode定 义。 在数据中, text 显示文字, leaf 节点 , children 子节点,expanded 展开var store = Ext.create(‘Ext.data.TreeStore, { root: { expanded: true, children: [ { text: “留学...
在开发的时候经常遇到分页比较麻烦,尤其对于一个后端程序猿来说,但是这个问题不能不解决,于是找了一个分页的控件用用,记录在下,以便以后使用。 以下是官网中使用的简单例子://以下将以jquery.ajax为例,演示一个异步分页 $.getJSON(test/demo1.json, {curr: 6}, function(res){ //从第6页开始请求。返回的json格式可以任意定义 laypage({ cont: page1, //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div ...
Model 关于backbone,最基础的一个东西就是model,这个东西就像是后端开发中的数据库映射那个model一样,也是数据对象的模型,并且应该是和后端的model有相同的属性(仅是需要通过前端来操作的属性)。 下面就从实例来一步一步的带大家来了解backbone的model到底是什么样的一个东西。 首先定义一个html的页面:<!DOCTYPE html> <html> <head> <title>the5fire-backbone-model</title> </head> <body> </body> <script src="http://...
JavaScript中isPrototypeOf函数方法是返回一个布尔值,指出对象是否存在于另一个对象的原型链中。使用方法:代码如下: object1.isPrototypeOf(object2)其中object1为必选项,一个对象的实例。 object2为必选项,另一个对象,将要检查其原型链。 如果 object2 的 原型链中包含object1,那么JavaScript中isPrototypeOf函数方法返回 true。 原型链可以用来在同一个对象类型的不同实例之间共享功能。 如果 object2 不是一个对象或者 obje...
注意:请在微信中测试 <!DOCTYPE html> <html><head><title>微信WeixinJSBridge API</title> <meta charset="utf-8" /> <script type="text/javascript"> (function(){ var a=document.getElementsByTagName("html")[0]; window.Session={appDomain:a.getAttribute("data-app-domain")||"",staticDomain:a.getAttribute("data-static-domain")||""} })();window.registNS=function(fullNS,isIgnorSelf){ var reg=/^[_$a-z]+[_$a-z0...