html
水痕01
暂停更新博客
展开
-
记录一次前端上传按钮按钮样式修改及上传图片bs64处理
<!DOCTYPE html><html lang="en"><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>Document&l原创 2020-06-08 13:59:03 · 574 阅读 · 0 评论 -
Redux-form嵌套到实际项目开发案例六
提交时候验证官方案例一、submit.js文件代码import {SubmissionError} from 'redux-form'const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))function submit(values) { return sleep(1000) // simulate serve原创 2017-04-07 17:45:51 · 1076 阅读 · 0 评论 -
Redux-form嵌套到实际项目开发案例五
本案例是同步校验表单的另外一种写法,操作方法一样的跟案例三是一样的一、新建一个src/component/FieldLevelValidationForm.js'use strict';import React,{Component} from 'react'import {Field, reduxForm} from 'redux-form'//定义一个必填的校验方法const requ原创 2017-04-07 16:57:22 · 899 阅读 · 0 评论 -
Redux-form嵌套到实际项目开发案例四
本案例是同步校验表单一、本案例与案例三是一样的操作方式'use strict';import React from 'react'import { Field, reduxForm } from 'redux-form'//定义校验的方法const validate = values => { const errors = {} if (!values.username)原创 2017-04-07 16:35:20 · 1013 阅读 · 0 评论 -
Redux-form嵌套到实际项目开发案例三
一、运行本项目案例直接把代码拷贝到案例一中的components文件夹下二、新建一个文件src/component/SimpleForm2.js文件'use strict';import React,{Component} from 'react'import {Field, reduxForm} from 'redux-form'class SimpleForm2 extends Compon原创 2017-04-07 16:25:05 · 1421 阅读 · 0 评论 -
Redux-form嵌套到实际项目开发案例二
ReduxForm和表单关联分为两个层面表单层面:ReduxForm提供的ReduxForm装饰器为表单组件提供了handleSubmit, pristine, reset, submitting等props,分别用于提交表单、判断表单数据是否改动、重置表单、显示正在提交这些功能字段层面:ReduxForm派遣了Field等组建与表单字段关联,Field不仅提供了一个component属性可以接原创 2017-04-07 15:10:19 · 1364 阅读 · 0 评论 -
关于前端代码基本命名规范与格式规范
一、HTML命名规范及格式规范1、html代码中所有的标签和属性应该都是小写(虽然大写不会错,但w3建议都是小写)2、在html代码中id多个单词要用下划线_连接,例如:reader_info3、在html代码中clss多个单词用中划线-连接,例如:reader-info4、如果仅仅是给js调用的class那么就在class的属性前加上js,例如:js-active5、不管是id还是cla原创 2017-06-22 14:18:48 · 1208 阅读 · 0 评论 -
handlebars.js模版引擎中EACH循环遍历的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script src="https://cdn.bootcss.com/handlebars.js/4.0.原创 2017-04-05 15:41:21 · 5023 阅读 · 2 评论 -
利用radio实现tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>radio选项卡切换</title> <style type="text/css"> *{margin:0;padding:0;} .test-box{width: 50%;margin: 10px aut原创 2017-04-04 22:55:55 · 2878 阅读 · 0 评论 -
css样式实现一个进度条
效果如图代码<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords"原创 2017-04-04 22:46:02 · 8461 阅读 · 0 评论 -
关于常见的左右赋权限的移动样式
效果如图:代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>拖拽演示</title> <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script> <style type原创 2017-04-04 22:40:57 · 746 阅读 · 0 评论 -
Redux-form系列教程
一、Redux-form部署到redux项目中二、Redux-form与form的关系三、redux-form直接使用html标签四、redux-form同步校验表单五、redux-form同步校验表单六、redux-form提交验证表单七、redux-form异步校验(失去焦点就校验)八、redux-form初始化数据及同步校验九、redux-form直接获取数据原创 2017-04-12 15:30:06 · 1556 阅读 · 0 评论 -
使用form表单中自带的fieldset与legend
在form表单中常常被忽视的两个标签fieldset和legend 下面我是用了bootstrap的样式,把一些默认样式去除了<div class="container"> <div class="col-md-5"> <form role="form" action="" method="post"> <fieldset>原创 2017-03-14 22:31:13 · 8130 阅读 · 0 评论 -
SweetAlert详解
sweetalert相关组件,该插件不需要jQuery库支持<script src="sweetalert.min.js"></script> <link rel="stylesheet" href="sweetalert.css"> 参数 描述 默认值 title 提示框标题 - text 提示内容 - type 提示类型,有:success(成功)原创 2017-03-31 12:47:18 · 2525 阅读 · 1 评论 -
改变网页上面那个小图标
<link rel="icon" type="image/png" href="{{ url_for('static',filename='./ioc/favicon.png') }}"> 图标尺寸最好是32px*32px原创 2017-03-23 15:25:17 · 1719 阅读 · 0 评论 -
关于H5页面开发适配指南
说明:本人习惯性的直接上代码,不想用太多的文字去表述一、html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var dpr, rem, scale; //人为给头原创 2017-03-23 10:41:02 · 1080 阅读 · 0 评论