废话不多说了，直接给大家贴代码了，具体代码如下所述： <!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...