精华内容
下载资源
问答
  • 叁贰壹/WEB 菜单按钮查看效果:http://songothao.gitee.io/webcaidananniu 知乎视频​www.zhihu.com主要说这个按钮吧,我觉得我做的这个按钮还不错,我是看到某个网站有这个按钮觉得很不错,然后自己写代码模仿下来...

    源码下载:叁贰壹/WEB 菜单按钮

    查看效果http://songothao.gitee.io/webcaidananniu

    知乎视频www.zhihu.com

    主要说这个按钮吧,我觉得我做的这个按钮还不错,我是看到某个网站有这个按钮觉得很不错,然后自己写代码模仿下来的。喜欢的朋友点个赞,不喜欢的朋友还望海涵,谢谢各位,小生不才,鲁班门前弄斧。

    html 代码如下
    这个按钮是由 3 个 span 标签组成的。
        <div class="close-menu" id="menu">
            <span></span>
            <span></span>
            <span></span>
        </div>
    js 代码如下
    若点击按钮,则改变样式,这个按钮有两个不同的 class ,一个是 open 状态,一个是 close 状态。(我这里使用了 jQuery,初学 jQuery 想试试,感觉还不错,比写原生 js 省了很多功夫)
            $(function() {
                $flag = true;
                $('#menu').click(function() {
                    if ($flag) {
                        $(this).attr('class', 'open-menu');
                        $('#menu-bar').css('top', '0');
                        $flag = false;
                    } else {
                        $(this).attr('class', 'close-menu');
                        $('#menu-bar').css('top', '-110px');
                        $flag = true;
                    }
                })
            })
    
    css 代码如下
    做这个按钮主要的就是设计样式,这个要掌握过渡动画和定位就可以的了,其实看视频也可以看出来,按钮进行了哪方面的变化。
            #menu {
                position: relative;
                cursor: pointer;
                float: right;
                margin: 30px;
                padding-top: 8px;
                padding-left: 7px;
                padding-right: 7px;
                height: 36px;
                width: 30px;
                border-radius: 50%;
                transition: all 1s;
                z-index: 99;
            }
            
            #menu:hover {
                background-color: #f40;
            }
            
            #menu>span {
                display: block;
                width: 30px;
                height: 2px;
                background-color: #fff;
            }
            
            .close-menu>span {
                margin: 6px 0;
                transition: transform 1s;
            }
            
            .open-menu {
                position: relative;
                background: rgb(0, 0, 0, .2);
            }
            
            .open-menu>span {
                transition: transform 1s;
            }
            
            .open-menu>span:first-child {
                transform: rotate(45deg);
                position: absolute;
                top: 50%;
            }
            
            .open-menu>span:last-child {
                opacity: 0;
            }
            
            .open-menu>span:nth-child(2) {
                transform: rotate(-45deg);
                position: absolute;
                top: 50%;
            }

    9fea090f5b47968f86fedf4a04c209c3.png

    CSDN:https://blog.csdn.net/weixin_43148062

    简书:https://www.jianshu.com/u/45339cbb7573

    展开全文
  • webupload 多个实例化上传按钮

    千次阅读 2016-11-30 18:57:36
    工作的时候,写后台用到的一前端的插件webupload,由于页面中有不确定的上传图片的按钮,这下犯难了。刚开始我试着把这插件封装,结果……欲哭无泪呀,上传不了。整个上传按钮都好使,我就glooge,各种搜,各种...

    工作中用到的一个前端的插件webupload,由于页面中有不确定数量的上传图片的按钮。刚开始我试着把这个插件封装,结果……欲哭无泪呀,上传不了,整个页面的上传按钮都不好使。最后在文档中,发现了addButton这个参数,终于解决了问题。不说了,直接上代码

            var uploader = WebUploader.create({
                // 选完文件后,是否自动上传。
                auto: true,
                // swf文件路径
                swf: BASE_URL + 'assets/admin-tools/webuploader_fex/dist/Uploader.swf',
                // 文件接收服务端。
                server: 'url',
                duplicate : true,
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建,可能是input元素,也可能是flash.
                pick: '#filePicker',
                fileVal: 'image', //服务端File对应的名称。
                // 只允许选择图片文件。
                accept: {
                    title: 'Image',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            // 文件上传成功,给item添加成功class, 用样式标记上传成功。
            uploader.on( 'uploadSuccess', function( file, obj ) {
                //如果你上传成功需要对某一个文本框赋值 以$("#rt_"+file.source.ruid)为对象找到需要赋值的文本框
                $("#rt_"+file.source.ruid).parent().next().val(obj.name);
                成功执行的代码
            });
            // 文件上传失败,显示上传出错。
            uploader.on( 'uploadError', function( file ) {
                //失败执行的代码
            });
            //计算出需要多少个实例化的按钮
            var boxes_len = $(".class").length;
            //循环实例化页面的上传按钮
            for(var i=1; i<=boxes_len ;i++){
                uploader.addButton({
                    id : "#filePicker"+(i),//必须唯一
                    innerHTML : '选择图片',
                });
            }
    展开全文
  • 在很多Web应用中,为了完成不同的工作,一个HTML form标签中可能有两个或多个submit按钮,如下面的代码所示:   ......  由于在中的多个提交按钮都向一个action提交,使用Struts2 Action的execute...
    struts2 多个提交按钮处理

    在很多Web应用中,为了完成不同的工作,一个HTML form标签中可能有两个或多个submit按钮,如下面的代码所示:

     

    <form action="..."   method="post">
    ......
    <input type="submit" value="保存" />
    <input type="submit" value="打印" />
    </form>
        由于在<form>中的多个提交按钮都向一个action提交,使用Struts2 Action的execute方法就无法判断用户点击了哪一个提交按钮。如果大家使用过Struts1.x就会知道在Struts1.2.9之前的版本需要使用一个LookupDispatchAction动作来处理含有多个submit的form。但使用LookupDispatchAction动作需要访问属性文件,还需要映射,比较麻烦。 
        从Struts1.2.9开始,加入了一个EventDispatchAction动作。这个类可以通过java反射来调用通过request参数指定的动作(实际上只是判断某个请求参数是不存在,如果存在,就调用在action类中和这个参数同名的方法)。使用EventDispatchAction必须将submit的name属性指定不同的值以区分每个submit。而在Struts2中将更容易实现这个功能。
    当然,我们也可以模拟EventDispatchAction的方法通过request获得和处理参数信息。但这样比较麻烦。在Struts2中提供了另外一种方法,使得无需要配置可以在同一个action类中执行不同的方法(默认执行的是execute方法)。使用这种方式也需要通过请求参来来指定要执行的动作。请求参数名的格式为

    action!method.action

    注:由于Struts2只需要参数名,因此,参数值是什么都可以。

    下面我就给出一个实例程序来演示如何处理有多个submit的form:

    【第1步】实现主页面(more_submit.jsp)


    <%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
    <%@ taglib prefix="s" uri="/struts-tags" %>
    <html>
      <head>
        <title>My JSP 'hello.jsp' starting page</title>
      </head>
     
      <body>
        <s:form action="submit.action" >
            <s:textfield name="msg" label="输入内容"/> 
            <s:submit name="save" value="保存" align="left" method="save"/>
            <s:submit name="print" value="打印" align="left" method="print" />     
        </s:form>
      </body>
    </html>

    在more_submit.jsp中有两个submit:保存和打印。其中分别通过method属性指定了要调用的方法:save和print。因此,在Action类中必须要有save和print方法。

    【第2步】实现Action类(MoreSubmitAction)


    package action;

    import javax.servlet.http.*;

    import com.opensymphony.xwork2.ActionSupport;
    import org.apache.struts2.interceptor.*;

    public class MoreSubmitAction extends ActionSupport implements ServletRequestAware
    {
        private String msg;
        private javax.servlet.http.HttpServletRequest request;
        // 获得HttpServletRequest对象
        public void setServletRequest(HttpServletRequest request)
         {
            this.request = request;
         }
        // 处理save submit按钮的动作
        public String save() throws Exception
         {
             request.setAttribute("result", "成功保存[" + msg + "]");
            return "save";
         }

        // 处理print submit按钮的动作
        public String print() throws Exception
         {
             request.setAttribute("result", "成功打印[" + msg + "]");
            return "print";
         }
        public String getMsg()
         {
            return msg;
         }

        public void setMsg(String msg)
         {
            this.msg = msg;
         }
    }

    上面的代码需要注意如下两点:

    save和print方法必须存在,否则会抛出java.lang.NoSuchMethodException异常。

    Struts2 Action动作中的方法和Struts1.x Action的execute不同,只使用Struts2 Action动作的execute方法无法访问request对象,因此,Struts2 Action类需要实现一个Struts2自带的拦截器来获得request对象,拦截器如下:

    org.apache.struts2.interceptor. ServletRequestAware

    【第3步】配置Struts2 Action

    struts.xml的代码如下:

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE struts PUBLIC
         "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
         "http://struts.apache.org/dtds/struts-2.0.dtd">
    <struts>   
        <package name="demo" extends="struts-default" namespace="/mystruts" >
            <action name="submit"   class="action.MoreSubmitAction">
                <result name="save" >
                     /result.jsp
                </result>
                <result name="print">
                     /result.jsp
                </result>
            </action>   
        </package>   
    </struts>

    【第4步】编写结果页(result.jsp)


    <%@ page pageEncoding="GBK"%>
    <html>
      <head>
        <title>提交结果</title>
      </head>
      <body>
        <h1>${result}</h1>
      </body>
    </html>

    在result.jsp中将在save和print方法中写到request属性中的执行结果信息取出来,并输出到客户端。

    启动Tomcat后,在IE中执行如下的URL来测试程序:

        http://localhost:8080/TestS/more_submit.jsp

    大家也可以直接使用如下的URL来调用save和print方法:

    调用save方法:http://localhost:8080/TestS/mystruts/submit!save.action?msg=123

    调用print方法:http://localhost:8080/TestS/mystruts/submit!print.action?msg=456

    展开全文
  • 用如下代码实现(网上搜的方法,还有几效果都一样)这 radio()方法是为了让某个单选按钮自动被选中。然后在浏览器上面点击启用按钮,上方的单选框就被选中了,在点击禁用按钮,对应的单选框也被选中了。但是当我...

    在项目中不好给大家介绍,于是我写了一个简单的页面来给大家讲解。

    0ed5c5223186f8213eb9f30ec0acb237.png

    大致功能就是我点启用或者禁用按钮时,它们上方对用的点选按钮就会被选中。

    用如下代码实现(网上搜的方法,还有几个效果都一样)

    77ebf8ab9d217dc213862b4998f21ec9.png

    这个 radio()方法是为了让某个单选按钮自动被选中。

    然后在浏览器上面点击启用按钮,上方的单选框就被选中了,在点击禁用按钮,对应的单选框也被选中了。

    681e19c99ca3367a4084c1a792d1b313.png

    但是当我再次点击启用按钮时,居然没效果了(也就是说重复2次就不管用了)。

    a25fb860ac062027b6477587d5b0958e.png

    试了几遍发现还是这样,打了个断点发现这个方法是执行了的,那问题到底出在哪里了呢?

    搞了半天我想出了如下的这个方法:

    90c18c74c235f41b6f2202692f78530c.png

    加了一行代码,先让所有的单选按钮都取消选中,然后再自动选中某个按钮,刷新一下浏览器页面,发现不会出现上面的情况了(偷笑)。

    当我得意了一会儿后却发现如果我用鼠标点击了某个单选框以后无论怎么点击按钮都不管用了。

    0e0accc34adc02bb32b1c1dcb23fbc3f.gif

    缓了半天,我怀疑是不是方法出了问题呀,于是我在百度上搜了半天,结果全是上面介绍的那几个方法。

    fb1da062f5c5ee264544a3b85ca19de9.gif

    再百度里找了大概半个小时,终于给我找着了BUG产生的原因:

    17a8ac6e9c8303b893028ca949d8cc60.png

    真的是方法用错了

    应该用prop方法,这是因为prop才是官方推荐的操作元素的固有属性,比如input标签的id/class/type/style等等,而attr更多的是用来操作元素的自定义属性。

    题外话:

    相信很多小伙伴都在百度或者搜狗再或者谷歌里面查找过方法吧,然后每次都要找半天,大多文档说的都是某个人的小技巧哇,心得什么的,也许他用不会出错,没准你用的话它就出错了,像我这种小新没一会儿心态就炸了,希望以后能出个直接在书里面寻找答案的网站,喜欢看书的我还是比较相信书里面的内容的。

    展开全文
  • 一、DOM的基本概念本章节可谓是相当重要了,是让JavaScript灵动起来必不可少的一步文档对象模型定义了树状...1 DOM样式测试2 若需要通过js设置多个元素的样式,可以使用querySelectorAll方法,示例代码如下: 1 2 香...
  • 选择按钮切换代码 在夏天,因为我听到越来越的海浪声而不是键盘打字声,所以我为您提供了快速的技巧,而不是详尽的文章。 这次是关于Swing。 我正在为宠物项目做Swing ... 而且我更像一网络人。 因此,我总是...
  • 在很多Web应用中,为了完成不同的工作,一个HTML form标签中可能有两个或多个submit按钮,如下面的代码所示: 由于在中的多个提交按钮都向一个action提交,使用Struts2 Action的execute方法...
  • 下面是实现代码 效果图 点击会有涟漪效果可以保存一下代码查看一下 视频教程地址 微信搜索 阿祥说 公众号 关注获取更资料可课程~ <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • 在我搜索了一些东西之后,页面底部会有一个按钮来显示更的搜索结果。在网站上的代码是:Weitere anzeigen (+30)这就是我如何(成功地)按下代码中的按钮:^{pr2}$现在,我想再按一次按钮,但现在它不起作用(我检查了...
  • java web 实现多个文件压缩下载

    千次阅读 2017-07-31 10:58:25
    文件下载时,我们可能需要一次下载多个文件。批量下载文件时,需要将多个文件打包为zip,然后再下载。实现思路有两种:一是将所有文件先打包压缩为一个文件,然后下载这个压缩包,二是一边压缩一边下载,将多个文件...
  • 在很多Web应用中,为了完成不同的工作,一个HTML form标签中可能有两个或多个submit按钮,如下面的代码所示: &lt;!--[if !supportLineBreakNewLine]--&gt; &lt;html action="" method="...
  • 在做asp.net的Web开发的时候,我们经常会遇到一次性上传多个文件的需求。通常我们的解决方法是固定放多个上传文件框,这样的解决办法显然是不合理的,因为一次上传多个,就意味着数量不确定。因此我们就要让这些文件...
  • 好的,我们换说法。假如让你做一款简单的成语词典网页APP,你有哪些方法?按照我们一贯的做法,都是先建立数据库,数据库中录入很成语,然后与网页绑定,进行查询。但是不要数据库行不行?当然可以!用...
  • Web API:代码测验 这应用程式设有一针对Javascript基础知识的定时编码测验,供学生测试本单元涵盖的材料上的技能。 密码测验包含项选择题和交互式编码挑战,以帮助学生通过在互动过程中经常需要的典型编码...
  • 开源框架EL-ADMIN开发自己的 web应用(2)-利用代码生成器生第一CRUD界面 小伙伴们,学习完第(1)节课的内容之后,我们可以成功启动eladmin了,现在需要更进一步利用eladmin来创建自己的增删改查界面了,话不说...
  • 对于具有多个按钮Web 页面而言,该功能尤为有用,从使用角度而言这是很有用的,会在终端用户单击按钮之前通知其要对该按钮执行单击操作了。 在服务器控件出现之前,该操作很容易实现,现在,尽管有了服...
  • 在很多Web应用中,为了完成不同的工作,一个HTML form标签中可能有两个或多个submit按钮,如下面的代码所示: ... ... type="submit" value="保存" /> 由于在中的多个提交按钮都向一个action提交,使用Struts2 ...
  • 我日常使用微信web开发者工具来学习和开发我们的微信小程序,在这过程中,我们可能会创建很小程序项目,总会有时候,我需要删除我们不需要的项目,通常情况下,我们可以进入要删除的项目,在“项目”菜单下,找到...
  • 文件下载时,我们可能需要一次下载多个文件。批量下载文件时,需要将多个文件打包为...下载样式:点击下载按钮,会弹出下载框:下载后就有一个包含刚刚选中的两个文件:代码实现:FileBeanpublic class FileBean im...
  • 是否想贡献并添加一个或多个按钮? 读 请求功能 想提出一项新功能吗? 建议。 贡献 我们欢迎对网站的任何贡献。 可用脚本 在项目目录中,可以运行: npm start 在开发模式下运行应用程序。 打开在浏览器中查看...
  • 最近遇到三个人问关于VB写网页服务器的问题,所以今天抽时间写一下,演示其实没有...文本框控件名不变,两个按钮的Name分别是启动服务和关闭服务。然后粘贴以下代码进去: (↓↓↓点+展开代码~.~) 1 O...
  • 时候在移动端的web页面中, 需要使用搜索功能, 然而页面中并没有太的空间来放置一像pc端上那样的搜索按钮, 这时候就需要借用手机输入法自带的搜索按钮来实现点击搜索 虽然不是什么大的功能, 但是确实很实用,...
  • 方法一:使用多个button按钮,为每个按钮的onclick事件设计一个子过程,通过读取按钮的值来判断向谁提交数据,源代码如下:script language="javascript"> function tosubmit1() ...{ document.submitform1....
  • 精通CSS--高级Web标准解决方案 >>更作品 作者:Cameron Moll Cameron Moll 杰出的网页设计师,曾经设计了大量网站,赢得了世界范围内同行的尊敬。他的个人网站CameronMoll.com提供大量设汁资源,...
  • 多线程类似于同时执行多个不同程序,多线程运行有如下优点:(推荐学习:web前端视频教程)使用线程可以把占据长时间的程序中的任务放到后台去处理。用户界面可以更加吸引人,比如用户点击了一个按钮去触发某些事件的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,172
精华内容 468
关键字:

web多个按钮代码