按钮 | 易学教程

`Reactjs`常用 `Hooks`

阅读更多关于 `Reactjs`常用 `Hooks`

Reactjs 常用 Hooks 1. useClippy 用来复制数据到剪切板的 hook, clipboard 是剪切板中的数据, setClipboard 用来向剪切板中设置数据. import useClippy from "use-clippy" function Component() { const [ clipboard, setClipboard ] = useClipy() return ( <div> <div>Clipboard</div> <div>{clipboard}</div> <button onClick={() => setClipboard("nnamdi")}>Set Clipboard</button> </div> ) } 2. useBrowserContextCommunication useBrowserContextCommunication使用广播通道API来提供不同浏览器上下文(选项卡、iframe、窗口)之间通信的简单解决方案。 import useBrowserContextCommunication from "react-window-communication-hook" const [communicationState, postMessage] = useBrowserContextCommunication

jquery 之幽灵按钮

阅读更多关于 jquery 之幽灵按钮

介绍幽灵按钮（Ghost Buttons）是指具备基本的按钮形状的透明按钮，但有细实线的边框。有些幽灵按钮是互动的，点击之后按钮可能会成为不透明的，白色或其他颜色的背景突出例如：实现 html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ghostbutton</title> <link rel="stylesheet" type="text/css" href="./app.css"/> <script src="./js/jquery-3.4.1.min.js"></script> </head> <body> <div class="wrapping"> <div class="link link-mission"> <span class="icon"></span>  <a href="#" class="button" data-text="My mission is clear">MISSION <span class="line line-top"></span> <span class="line line-right"></span> <span class="line line-bottom"></span>

可视继承2

阅读更多关于可视继承2

“大体上是这样的，但今天我们来看一下怎么通过可视化编译环境来实现这个过程。首先，是建一个基类窗体。”大李一边说，一边打开VB.NET编译器，从菜单中选择从“文件”菜单中依次选择“新建”和“项目”，打开“新建项目”对话框。创建了一个名为 “可视继承”的 Windows 应用程序。然后右击解决方案资源管理器中的“可视继承”项目节点并选择“属性”。在项目的属性中，将输出类型从“Windows 应用程序”更改为“类库”，然后单击“确定”。在“工具箱”的“Windows 窗体”选项卡上将一个按钮添加到窗体中。命名为btnProtected。然后在它的“属性”窗口中，将 Text 属性设置为 “保护”，同时将 Modifiers 属性设置为 Protected。接着大李双击 btnProtected 按钮，切换到代码窗口，书写了这样的代码： Private Sub btnProtected_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles btnProtected.Click MsgBox("protected的按钮") End Sub 接着切换回设计窗口，添加了第二个按钮btnPrivate，并将 Text 属性设置为 “私有”， Modifiers 属性设置为 Private。双击

小程序清除缓存功能如何实现

阅读更多关于小程序清除缓存功能如何实现

小程序清除缓存功能如何实现 Wxml: <button type="primary" class="clear" bindtap="clearStorage" loading="{{loading}}" disabled="{{disabled}}">清空缓存</button> Js: clearStorage: function(){ var that = this; that.setData({ loading:true, disabled:true }); that.update(); wx.clearStorage({ success:function(){ that.setData({ loading:false, disabled:false, toast1Hidden:false }); that.update(); } }); }, 文章来源：刘俊涛的博客欢迎关注，有问题一起学习欢迎留言、评论。来源： https://www.cnblogs.com/lovebing/p/9474308.html

事件对象、事件流、关于冒泡、默认行为

阅读更多关于事件对象、事件流、关于冒泡、默认行为

事件对象：在触发事件的时候，会产生一个事件对象event，这个对象中包含了与事件相关的信息。例如：在触发鼠标双击时，是触发了这几件事 onkeydown+onkeyup+onclick+onkeydown+onkeyup+onclick 事件流：当HTML元素产生一个事件时，这个事件会在元素节点与根节点之后的路径传播，路径所经过的节点都会接收到这个事件，这个传播过程称为DOM事件流。 DOM事件流分为冒泡事件流和捕获事件流。事件冒泡：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。当我们触发了子元素的事件后，父元素对应的事件也会被触发。这个事件从原始元素开始一直冒泡到DOM树的最上层。不管有没有注册事件都会冒泡，都没有事件的话就不会触发事件。只要有一层注册事件，它都会往上冒泡，对应的事件也会一层一层的被触发。在盒子套盒子的时候，1.当鼠标移到外盒子边框的时候会触发进出外盒子事件2.当接着进入内盒子会触发离开外盒子-进入内盒子-进入外盒子事件。在轮播图的时候，为什么不给内盒子添加移入事件，而给外盒子添加？因为内盒子与两个按钮是并列关系，当进入内盒子，它会触发显示按钮事件，接着你移到按钮上它会触发离开内盒子事件，接着冒泡，这时它向上冒泡给外盒子（真正离开内盒子了，隐藏按钮display：none，不占位置

window.history.go()

阅读更多关于 window.history.go()

window.history.go() type=button value=刷新 onclick=" window.location.reload()"> <input type=button value=前进 onclick=" window.history.go(1) "> <input type=button value=后退 onclick=" window.history.go(-1)"> <input type=button value=前进 onclick=" window.history.forward()" > <input type=button value=后退 onclick=" window.history.back()"> 后退+刷新 <input type=button value=后退 onclick=" window.history.go(-1);window.location.reload() "> 在C# Web程序中，如为页面按钮写返回上一页代码 this.RegisterClientScriptBlock("E", "<script language=javascript>history.go(-2);</script>"); 其中，history.go(-2)，要写为-2，因在按钮事件触发前，已刷新一次页面，所以应是-2。

window.history.back()的改进方法window.history.go()

阅读更多关于 window.history.back()的改进方法window.history.go()

今天在做项目时，測试人员提出了一条bug，起初没当回事，在改动过程中才意识到其重要性，故记录下来。依照需求，系统应该实现例如以下的功能：有三个关联的页面a.aspx（简称a），b.aspx（简称b），,c.aspx（简称c），当中a页面主要是进行因子录入，所有录入后点击“模型检验”，进入b页面，b页面中存在两个button，各自是“模型调整”和“取消”，点击“模型调整”进入c页面，点击“取消”返回录有数据的a页面。c页面存在两个button，各自是“模型确认”和“取消”。点击“取消”，返回到b页面。而bug的大概意思就是：先在b页面点击“模型调整”进入c页面，再在c页面点击“取消”，返回到b页面。最后，在b页面点击“取消”，理论上应该直接返回到录有数据的a页面，但此时却须要点击两次“取消”才干够实现。细致看页面，前台写的方法是window.history.back()，若要这样的方法实现理论上的效果，仅仅能是在b页面存在一个“取消”button，或者仅仅点击“取消”button。否则就会出现bug中的问题。我在网上找答案，可是其给出的答案不可以直接应用，我做了一些改动，终于可以实现预期效果，代码例如以下：前台，<a href="#" id="alink" runat="server"><img src="qx.jpg" border="0"></a> 后台，在page

HTML5简单入门系列（一）

阅读更多关于 HTML5简单入门系列（一）

前言随着HTML5的流行，LZ作为一个web开发者，也决定学习一下前端前沿技术。 HTML5 是下一代的HTML，它将成为 HTML、XHTML 以及 HTML DOM 的新标准。它是W3C（ World Wide Web Consortium）和WHATWG（Web Hypertext Application Technology Working Group）合作的结果，在2014年10月29日宣布完成。他们为 HTML5 建立的一些规则： 1、新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 2、减少对外部插件的需求（比如 Flash） 3、更优秀的错误处理 4、更多取代脚本的标记 5、HTML5 应该独立于设备 6、开发进程应对公众透明 HTML5新增的标签视频标签VIDEO Web上的视频播放大多都是通过插件来显示的，而HTML5规定了，通过一种新加的标签video实现视频播放的标准方法。请看下边的代码 1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <div style="text-align:center;"> 6 <button onclick="playPause()">播放/暂停</button> 7 <button onclick="makeBig()">大</button> 8 <button

jquery事件绑定与事件委托

阅读更多关于 jquery事件绑定与事件委托

//事件绑定简写形式 $(".div2 button").click(function () { $(".div1").scrollTop(0) }) //写全了方式 $('.div2 button').bind('click', function () { }) //解除绑定 $('.div2 button').unbind('click', function () { }) //事件委托注意三个参数的顺序,第一个是绑定事件,第二个是标签,第三个是方法 /* $('ul').on('click','li', function () { alert(999) }); $('button').click(function () { var $ele=$('<li></li>'); var len=$('ul li').length; console.log(333) $ele.html((len+1)+111); $('ul').append($ele); }) //页面载入第一种方法 $(document).ready(function () {//等整个document执行完成之后,在执行这些代码 $('ul li').html(5); }); //页面载入第二种方法 $(function () { }); 来源： https://www.cnblogs.com

vue项目怎么阻止很快速的点击两次然后提交的两次请求

阅读更多关于 vue项目怎么阻止很快速的点击两次然后提交的两次请求

像提交表单类似的数据的时候，连续点击两次会出现提交两次请求，前端有没有全局的js去控制这个? <template> <div>  <button v-if="canSave" @click="save">提交</button> <button v-else disabled>提交</button> </div> </template> <script> export default { data(){ return { canSave: true, } }, methods: { save(){ if(!canSave){ return; } this.canSave = false; // AJAX 结束后 this.canSave = true; }, } } </script> 本文看自： https://segmentfault.com/q/1010000015296510 来源： https://www.cnblogs.com/smart-girl/p/12605666.html

订阅按钮