目录 一.组件结构 1.antd代码结构 2.rc-ant代码结构 3.组件结构 二.antd组件调用关系及功能详解 1.Model.tsx 2.confirm 三.rc-dialog详解 1.e.target 与 e.currentTarget 2.onMouseDown.onMouseUp 和 onClick 3.理解dialog中的鼠标事件 4.思维导图 一.组件结构 1.ant代码结构 2.rc-ant代码结构 3.组件结构 ant中modal的index.tsx中引入了Modal和co

一 目标: 实现antd Modal 弹窗或者其他弹窗的点击标题进行拖拽的效果 二 准备及思录: 1.使用antd  Modal 组件,要想改变位置需要改变Modal style 的left 和top属性,其默认值分别为0,100 2.Modal 的标题可以使组件,给这个标题组件添加一个鼠标点击事件,记录下鼠标点击的位置; 当鼠标移动的时候计算鼠标当前的位置和初始的位置差就是弹窗相对于初始位置的移动距离,从而计算出弹窗的实际位置, 通过state 记录弹窗实际位置,从而更新弹窗的style, 3

思路: 1.首先需要两个DIV,一个是和视口一样大drag-mask,绑定mouseMove事件和mouseUp事件,另一个是和Modal一样大的drag-target,绑定mouseDown事件: 2.已知Modal的样式.ant-modal{position:relative;top:100px;left:0px;},通过更改top.left改变Modal位置: 3.mouseDown事件时,记录坐标 handleMoseDown=(evt)=>{ this.setSate({ draggi

/** * Created by Administrator on 2016/5/4. */ /** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog modal-sm" role="document" s

最近写了一个重构的alert,confirm控件,调用时直接使用alert,confirm即可 //调用方法 alert("提示语") window.confirm('你确定要删除该记录?',function(){ //回调函数 }) css部分 引入我写的一个基础样式 <link href="http://120.26.59.104/base.css" rel="stylesheet" type="text/css"

HTML: <!-- system modal start --> <div id="ycf-alert" class="modal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type

前言 Bootstrap:Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架 官方网站:http://www.bootcss.com/ 1.Bootstrap Modals(模态框)基本用法 使用bootstrap之前需要应用jquery.js和bootstrap.js以及bootstrap.css 注意:最新版的bootstrap需要和jquery1.9以上版本配合使用 <!-- 按

<?phpecho "<script>alert('我弹出来了')</script>";?> 很简单你一句话就可以在PHP里面输出JS脚本让浏览器执行. 今天碰到一个很诡异的问题,就是这段代码在Chrom和firefox下至少单纯的输出字符串,没有执行,没有弹出alert. 原理: MIME chrome对text/plain 不做解析的.php利用header可以输出html ,浏览器用最后一次输出header作为content-type head

相信很多人都受够了 alert.confirm 的样子,最近正在用 bootstrap 做项目,顺便封装了一个 bootstrap 样式的消息框. 实现起来很简单,bootstrap 本身就自带了 modal 模态框,样子还不错 :)就把它封装一下用吧. 无码无真相,少说多做,上代码. 项目是Asp.net Mvc架构的,方便全局调用,我直接在全局 Layout 页面加上以下HTML: <!-- system modal start --> <div id="ycf-alert

代码: (function ($) { $(function () { var Modal = function () { var htmlContent = "<div id=\"dvModalDialog\" class=\"modal\">" + "<div class=\"modal-dialog modal-sm\">" + "<div class=\&qu

iTerm2 使用了1年多了,一些功能其实还没有主动去发现,这次接着项目忙完的空闲时间整理一下tips,提高工作效率,方便以后查阅. 一.几个术语 从小到大:session > pane > tab > window  二.好用的功能 1.Toggle Broadcasting Input - 广播输入 session窗口右键 > Toggle Broadcasting Input (1)当多个session一起打开,将同步输入 (2)更多设置(shell > Toggle

Dropdown下拉菜单 向下弹出的列表. 何时使用# 当页面上的操作命令过多时,用此组件可以收纳操作元素.点击或移入触点,会出现一个下拉菜单.可在列表中进行选择,并执行相应的命令. 最简单的下拉菜单. 分割线和不可用菜单项. Hover me, Click menu item 触发事件 点击菜单项后会触发事件,用户可以通过相应的菜单项 key 进行不同的操作. 有message.info的效果,我截图没有显示 多级菜单 传入的菜单里有多个层级. Click me 触发方式 默认是移入触发菜单,

基于vue-easytable实现数据的增删改查 原理:利用vue的数据绑定和vue-easetable的ui完成增删改查 后端接口: 1.条件查询表中数据 http://localhost:47953/Home/GetJtncSelectJsonResult 2.通过id查询单条数据 http://localhost:47953/Home/UploadJtnc 3.保存数据 http://localhost:47953/Home/SaveJtnc 4.删除数据 http://localhost

hdjs---后盾网requireJS课程 一.总结 一句话总结: requireJS是js端模块化开发,主要是实现js的异步加载,和管理模块之间的依赖关系,便于代码的编写和维 1.requireJS目录结构中的app目录和lib目录的作用是什么? app目录:存用户自己写的js(自定义模块) lib目录:存依赖的js文件 2.requireJS最简单实例? 在main.js的paths中配置好jquery,在页面中中使用:require(['jquery'], function ($) { m

(1) proxy 前端的端口在:localhost:3000后端的端口在:localhost:1234所以要在webpack中配置proxy选项 (proxy是代理的意思) 在package.json中添加如下配置-------这里用的是create-react-app脚手架eject后的项目 "proxy":"http://localhost:1234" // 把前端的请求都代理到1234端口,和后端一致,即可访问后端接口 (2) axios 配置好proxy后

今天在看到App Store 上架过程中,苹果公司反馈的拒绝原因发现了这么一个问题: Legal - 5.1.5 Your app uses background location services but does not clarify the purpose of its use in the location modal alert as required in the iOS Human Interface Guidelines. We've attached screenshot(s

使用以下模块时,需要导入依赖:var *** = require('@weex-module/****'); 1. navigator --像浏览器一样切换页面 2. webview(module) --<web> 组件的刷新,后退,前进 3. dom --组件的滚动(只用于 <list>,<scroller>) 4. stream --网络请求 5. modal --各种提示框 6. animation --动画 7. storage --存储 8. clipboar

和网上其它用JAVA或是PHP的实现不太一样, DJANGO中的解决办法如下: 后端样例: def render_to_json_response(context, **response_kwargs): data = json.dumps(context, ensure_ascii=False, indent=2) response_kwargs['content_type'] = 'application/json' return HttpResponse(data, **response_

一,官方推荐的样码. <button type="button" class="uk-button" onclick="UIkit.modal.prompt('Name:', '', function(val){ UIkit.modal.alert('Hello '+(val || 'Mr noname')+'!'); });">Prompt</button> <pre><code>UIkit.mo

1.一旦数据和模板绑定,数据的变化会立即体现在前台的变化 <template> <container> <text style="font-size: {{size}}">{{title}}</text> </container> </template> <script> module.exports = { data: { size: 48, title: 'Alibaba Weex Team' }

/** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div class="am-modal am-modal-alert" tabindex="-1"><div class="am-modal-dialog"><div class="am-modal-hd message-text"></div><div class="am