zoukankan      html  css  js  c++  java
  • fancyBox简单入门

    1. 下载 fancyBox,解压后根据需要将文件复制到网页文件夹中(建议不要更改目录结构),并在网页源码中引入相应的 css 样式和 js 文件(如果更改了目录结构,引入的时候请调整相应代码,对应它们所在的路径)。
    注意:别忘了还要先加载 jQuery 库!

    <!-- 加载 jQuery 库(必须) -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <!-- 引入 fancyBox 核心文件(必须)-->
    <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

    2. 给触发 fancyBox 特效的元素(如一张缩略图或“点击我”三个字)加上 a 链接,并将其 href 属性值设置为遮罩层中需要展示的文件的链接(如刚刚那张缩略图的原图的网址)。示例代码:

    <a class="fancybox" rel="group" href="原图_1.jpg"><img src="缩略图_1.jpg" alt="" /></a>
    <a class="fancybox" rel="group" href="原图_2.jpg"><img src="缩略图_2.jpg" alt="" /></a>

    3. 使页面加载完毕时初始化 fancybox() 函数。示例代码:

    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox();
        });
    </script>

    事例
    比如我们做一个点击图片弹出一个form表单,首先让一个a标签包裹住这个图片
    <a class="fancybox" rel="group" href="#yuyueform"><img src="/sta/img/1.gif" width="120px"></a>
    href中是这个form表单的id属性
     
    <form style="display:none" id="yuyueform" action="/yuyue/new.action" method="post">
           <legend><h3>XX医院就诊预约信息核对</h3></legend>
           <input type="hidden" name="yuyue.patient.id" value="${sessionScope.patient.id }">
           <input type="hidden" name="yuyue.doctor.id" value="${doctor.id }">
           <input type="hidden" name="yuyue.money" value="${doctor.role == '普通医师'?'2':'3' }">
           <label>预约人:${sessionScope.patient.patientname }</label>
           <label>诊断医生:${doctor.docname }</label>
           <label>挂号金额:${doctor.role == '普通医师'?'2元':'3元' }</label>
           <label>时间:</label>
           <input type="text" id="yuyuetime" name="yuyue.yuyuetime">
           <div class="form-actions">
               <button class="btn btn-success" onclick="btnsubmit()">确认</button>
           </div>
            
       </form>
    
    
    














  • 相关阅读:
    Java基础学习07--内部类与常用类
    Java基础学习06--集合
    leetcode124
    Python深度学习笔记09--使用Keras建立循环神经网络
    Python深度学习笔记08--处理文本数据的常用方法
    详解DNS域名解析系统(域名、域名服务器[根、顶级、授权/权限、本地]、域名解析过程[递归与迭代])
    计算机网络之应用层概述(C/S模型与p2p模型)
    计算机网络传输层之TCP拥塞控制(慢开始与拥塞避免、快重传和快恢复)
    计算机网络传输层之TCP流量控制
    计算机网络传输层之TCP可靠传输
  • 原文地址:https://www.cnblogs.com/itliucheng/p/4378013.html
Copyright © 2011-2022 走看看