這裡蒐索程式師資訊,查找有用的技術資料
当前位置:首页 » 网页前端 » web组件按钮操作
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web组件按钮操作

发布时间: 2022-09-09 20:32:27

① C# web 怎么实现点击按钮提示是否执行操作,选否就不执行后面的操作,选确定就执行代码

最简单就是注册按钮单击事件时,将另外那个窗口的事件处理函数注册在当前按钮单击事件里。
class Form2{ internal void Button1_Click(...){...} }
class Form1{ Form1(Form2 form2){ InitializeComponents(); this.Button2.Click+=form2.Button1_Click;}}
所有内容刷新又不重启,只能遍历控件各个清空内容了

② c#中winform的webbrowser控件在窗体中如何获取按钮或者的事件

HtmlElement btn=this.webBrowser1.Document.getElementById("这里填写按钮或a标签的id");

btn.Click+=btn_Click;

private void btn_Click(object sender,HtmlElementEventArgs e){

//这里是你的打开新的窗口Form1的操作

1、在打开的ie浏览器窗口右上方点击齿轮图标,选择“Internet选项”,如下图所示:

③ web开发:怎么控制每个按钮控件在屏幕上的位置

这是网页布局的只是,可以用表格,现在的做法是用div,配合css

④ c# web中点击BUTTON如何跳转到其他web页面

Response.Redirect("main.aspx", true);

或者Server.Transfer("main.aspx");

比如:现在做了两个页面,一个是登录页面(Default.aspx) 另一个就是输入正确账号密码后要跳转到的页面(main.aspx) 在登录页面的确定按钮的单击事件里写:

if(用户名密码和数据库中的匹配)

{

Response.Redirect("main.aspx", true);

}

(4)web组件按钮操作扩展阅读:

注意事项

一、切换对象

1、Response.Redirect可以切换到任何存在的网页。

2、Server.Transfer只能切换到同目录或者子目录的网页。

二、数据保密

1、Response.Redirect后地址会变成跳转后的页面地址。

2、Server.Transfer后地址不变,隐藏了新网页的地址及附带在地址后边的参数值。具有数据保密功能。

三、传递的数据量(网址后附带的参数)

1、Response.Redirect能够传递的数据以2KB为限。

2、传递的数据超过2KB时,务必使用Server.Transfer。

⑤ Web前端如何使用Vue编写一个长按指令

今天小编要跟大家分享的文章是关于Web前端如何使用Vue编写一个长按指令?正在从事web前端工作的小伙伴们有没有想过只需按住一个按钮几秒钟就能在你的
Vue应用中触发一个功能?


有没有想过创建一个按钮,按下一次就可以清除单次输入(或者持续按住可以清除所有输入)?


本文就是讲解如何在按下(或者按住)一个按钮时,既执行一个函数,又清除输入。


首先,我会讲解如何使用纯JS实现。而后也会创建一个Vue指令。下面就让我们一起来看一看吧。

一、原理


要实现长按,用户需要按下并按住按钮几秒钟。


想通过代码模拟这一效果,我们需要在鼠标“点击”按下按钮时,启动一个计时器监听用户按下的时长,如果时间超过我们期望的时长,就执行相应的函数。


非常简单!然而,我们需要知道用户何时按住按钮。


二、如何实现


当用户点击按钮时,在点击事件之前会触发另外两个事件:mousedown和mouseup。


当用户按下按钮时触发mousedown事件,用户松开按钮时调用mouseup事件。


我们需要做的是:


1.mousedown事件触发时,启动计时器。


2.一旦mouseup事件在预期的2秒前被触发,就清除计时器,不要执行相应的函数。就当作一个普通的点击事件。


只要计时器在我们预设的时间内没有被清除,即mouseup
事件没有被触发——那么可以断定用户没有释放按钮。因此,可以判定为一次长按,可以执行关联的函数。


三、实践


让我们深入代码,完成这一功能。


首先,我们必须定义三件事,即:


1.一个变量用于存储计时器。


2.一个启动功能函数,用于启动计时器。


3.一个取消功能函数,用于取消计时器。


1、变量


这个变量主要用来保存setTimeout的值,以便当鼠标mouseup事件触发时我们可以取消它。


letpressTimer=null;


我们把变量值设置为null是为了在执行取消操作前,检查这个变量的值判断当前是否有一个正在运行的计时器。


2、启动函数


这个函数包括一个setTimeout,它是JavaScript中的一个基本方法,允许在特定时间之后执行一个函数。


注意,click事件执行的过程中,会触发另外两个事件。但是我们需要启动计时器的是mousedown
事件。如果只是点击事件,不需要启动计时器。//创建计时器(1s之后执行函数)

letstart=(e)=>{

//如果是点击事件,不启动计时器

if(e.type==='click'&&e.button!==0){

return;

}

//在启动一个定时器之前确保没有正在运行的计时器

if(pressTimer===null){

pressTimer=setTimeout(()=>{

//执行任务!!!

},1000)

}

}

3、取消函数


这个函数见名知意,用来取消启动函数创建的setTimeout。


要取消setTimeout,可以使用JavaScript中的clearTimeout方法,它主要用来清除setTimeout()
方法设置的计时器。


在使用clearTimeout之前,需要检查pressTimer变量是否为null。如果没有为
ull,意味着有一个正在运行的计时器。因此,我们需要先清除它,并且将pressTimer变量设置为null。letcancel=(e)=>{

//检查pressTimer的值是否为null

if(pressTimer!==null){

clearTimeout(pressTimer)

pressTimer=null

}

}

一旦mouseup事件触发,这个函数就会被调用。


4、设置触发器


剩下的就是将事件监听器添加到想要长按效果的按钮上。


addEventListener("mousedown",start);


addEventListener("click",cancel);


以上代码合到一起是这样://定义变量

letpressTimer=null;

//创建计时器(1秒后执行函数)

letstart=(e)=>{

if(e.type==='click'&&e.button!==0){

return;

}

if(pressTimer===null){

pressTimer=setTimeout(()=>{

//执行任务!!!

},1000)

}

}

//停止计时器

letcancel=(e)=>{

//检查是否有正在运行的计时器

if(pressTimer!==null){

clearTimeout(pressTimer);

pressTimer=null;

}

}

//选择id为longPressButton的元素

letel=document.getElementById('longPressButton');

//添加事件监听器

el.addEventListener("mousedown",start);

//长按事件取消,取消计时器

el.addEventListener("click",cancel);

el.addEventListener("mouseout",cancel);

5、用Vue指令包装


创建Vue指令时,可以创建全局或局部指令,本文中,我们采用全局指令。


首先,我们必须声明自定义指令的名称。


Vue.diective('longpress',{


})


这就注册了一个名为v-longpress的全局自定义指令。


接下来,我们添加带参数的bind钩子函数,它允许我们引用指令绑定的元素,获取传递给指令的值,并标识指令使用的组件。Vue.directive('longpress',{

bind:function(el,binding,vNode){

}

})

接下来,我们在bind函数中添加长按功能的代码。Vue.directive('longpress',{

bind:function(el,binding,vNode){

//定义变量

letpressTimer=null;

//定义函数处理程序

//创建计时器(1秒后执行函数)

letstart=(e)=>{

if(e.type==='click'&&e.button!==0){

return;

}

if(pressTimer===null){

pressTimer=setTimeout(()=>{

//执行任务!!!

},1000)

}

}

//取消计时器

letcancel=(e)=>{

//检查是否有正在运行的计时器

if(pressTimer!==null){

clearTimeout(pressTimer);

pressTimer=null;

}

}

//添加事件监听器

el.addEventListener("mousedown",start);

//取消计时器

el.addEventListener("click",cancel);

el.addEventListener("mouseout",cancel);

}

})

接下来,我们需要添加一个函数来运行传递给longpress指令的方法。Vue.directive('longpress',{

bind:function(el,binding,vNode){

//定义变量

letpressTimer=null;

//定义函数处理程序

//创建计时器(1秒后执行函数)

letstart=(e)=>{

if(e.type==='click'&&e.button!==0){

return;

}

if(pressTimer===null){

pressTimer=setTimeout(()=>{

//执行函数

handler();

},1000)

}

}

//停止计时器

letcancel=(e)=>{

//检查是否有正在运行的计时器

if(pressTimer!==null){

clearTimeout(pressTimer);

pressTimer=null;

}

}

//运行函数

consthandler=(e)=>{

//执行传递给指令的方法

binding.value(e)

}

//添加事件监听器

el.addEventListener("mousedown",start);

//取消计时器

el.addEventListener("click",cancel);

el.addEventListener("mouseout",cancel);

}

})

现在,可以在Vue应用中使用这个指令了,除非使用者给指令传入的值不是一个函数。因此,我们需要通过警告反馈给使用者。


为了反馈给使用者,我们在bind函数中添加了以下内容://确保提供的表达式是函数

if(typeofbinding.value!=='function'){

//获取组件名称

constcompName=vNode.context.name;

//将警告传递给控制台

letwarn=`[longpress:]providedexpression'${binding.expression}'isnotafunction,buthastobe`;

if(compName){warn+=`Foundincomponent'${compName}'`}

console.warn(warn);

}

最后,如果这个指令也适用于触屏设备,那会是极好的。因此,我们添加了touchstart、touchend和touchcancel
事件监听器。


最终代码如下:Vue.directive('longpress',{

bind:function(el,binding,vNode){

//确保提供的表达式是函数

if(typeofbinding.value!=='function'){

//获取组件名称

constcompName=vNode.context.name;

//将警告传递给控制台

letwarn=`[longpress:]providedexpression'${binding.expression}'isnotafunction,buthastobe`;

if(compName){warn+=`Foundincomponent'${compName}'`}

console.warn(warn);

}

//定义变量

letpressTimer=null;

//定义函数处理程序

//创建计时器(1秒后执行函数)

letstart=(e)=>{

if(e.type==='click'&&e.button!==0){

return;

}

if(pressTimer===null){

pressTimer=setTimeout(()=>{

//执行函数

handler();

},1000)

}

}

//取消计时器

letcancel=(e)=>{

//检查计时器是否有值

if(pressTimer!==null){

clearTimeout(pressTimer);

pressTimer=null;

}

}

//运行函数

consthandler=(e)=>{

//执行传递给指令的方法

binding.value(e)

}

//添加事件监听器

el.addEventListener("mousedown",start);

el.addEventListener("touchstart",start);

//取消计时器

el.addEventListener("click",cancel);

el.addEventListener("mouseout",cancel);

el.addEventListener("touchend",cancel);

el.addEventListener("touchcancel",cancel);

}

})

现在可以在Vue组件里使用了: