zoukankan      html  css  js  c++  java
  • jQuery使用load方法加载其他文档内容

    A文档载入B文档的内容,并且通过JQ操作被引入到A文档中的元素

    A文档 (index.html):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
         <link href="css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
    <div id="textDiv">
    
    </div>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script>
        $('#textDiv').load('modal.html',function(){
            $('#modalBox').modal('show');
        });
    
    </script>
    </body>
    </html>
    

     B文档(modal.html):

    <div class="modal fade" id="modalBox" role="dialog" aria-labelledby="conTitle">
        <div class="modal-dialog" role="document" >
            <div class="modal-content">
                <div class="modal-header" style="background-color: #fff;border-top-left-radius: 15px;border-top-right-radius: 15px;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="conTitle">Modal title</h4>
                </div>
                <div class="modal-body" style="background-color:forestgreen;">
                    <p>One fine body…</p>
                </div>
                <div class="modal-footer" style="border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    

    1、index.html引入jQuery文件,由于我有用到bootstrap,因此我引入了boostrap.css和bootstrap.js文件,要注意这些文件在文档中的位置和顺序;js文件一般放到最后在引入,由于bootstrap.js依赖jquery.文件,因此jquery.js要再比bootstrap.js先引入;

    2、jq代码:

     $('#textDiv').load('modal.html',function(){
            $('#modalBox').modal('show');
        });
    

    --1、 使用load的方法将modal.html加载到index.html中id为textDiv的div中;

    --2、在使用函数对modal.html中的元素操作(弹幕);

  • 相关阅读:
    LINQ语句中的.AsEnumerable() 和 .AsQueryable()的区别
    Linq扩展方法之All 、Any
    Linq扩展方法之Aggregate 对序列应用累加器函数
    C#开发的进化史
    C#选择文件、选择文件夹、打开文件(或者文件夹)
    XPath操作XML文档
    文档对象模型操作xml文档
    XML简介
    php获取某经纬度附近地点位置
    Yii中实例化类的四种方式
  • 原文地址:https://www.cnblogs.com/hcrs/p/4955370.html
Copyright © 2011-2022 走看看