在layui tab控件中载入外部html页面的方法

目前，潜入外部网页的方式，主要有3种：

iframe方式

<div><iframe src="xxx.jsp"></iframe>

ajax方式

<div id=“externalHtml"></div>

ajax加载数据后，直接赋予 externalHtml.innerHTML 即可。

script脚本方式

<div><script src="xxx.js" type="text/javascript"></script></div>

第一种方式的示例

<div class="layui-tab" lay-filter="demo" lay-data="{ height:332}">
  <ul class="layui-tab-title">
    <li class="layui-this">hao123</li>
    <li>百度</li>
    <li>layui的button</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      <iframe src="http://www.hao123.com"></iframe>
    </div>
    <div class="layui-tab-item" >
      <iframe src="http://www.taobao.com"></iframe>
    </div>
    <div class="layui-tab-item">
      <button class="layui-btn layui-btn-normal">百搭按钮</button>
    </div>
  </div>
</div>

以上这篇在layui tab控件中载入外部html页面的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui实现tab的添加拒绝重复的方法

    layui中tab的添加:重复添加,没有自动跳转肯定让你烦了很久吧,我也是花了很久才解决的 前提是这样的:我点击不同按钮生成对应tab,而且再点击前已经有一个tab了(比如说:'首页',个人需求而已) 我的思路是这样的:每添加一个tab用链表存储其id,通过id判断是否存在,并确定是添加tab还是跳转到指定tab. 删除时,监听tab的删除,然后从链表里删除对应id.但是在element.on('tabDelete',function(data){});中得不到你删除tab的id.有幸的是,能得

  • layUI ajax加载html页面后重新渲染的方法

    相关问题同: 1.layUI使用jquery.load加载界面时,如何让layui渲染页面? 2.layUI ajax加载html页面后重新渲染 layUI ajax加载html页面后渲染,关键在将html插到指定位置后重新调用element.init();渲染 $.ajax({ url : url, type : 'GET', success : function(data) { $("#layui-tab-title").append("<li class='lay

  • layui点击导航栏刷新tab页的示例代码

    layui的tab也默认是切换,不会刷新,想要达到点击导航栏刷新tab的功能只需在tab.js文件中将autoRefresh: false,改为true. 以上这篇layui点击导航栏刷新tab页的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 在layui tab控件中载入外部html页面的方法

    目前,潜入外部网页的方式,主要有3种: iframe方式 <div><iframe src="xxx.jsp"></iframe> ajax方式 <div id="externalHtml"></div> ajax加载数据后,直接赋予 externalHtml.innerHTML 即可. script脚本方式 <div><script src="xxx.js" type

  • Swift在控件中添加点击手势的方法

    今天有同行问我,如何在tableview的headerview中添加点击方法,今天就来简简单单说明一下,在swift中添加点击手势的方法是: 复制代码 代码如下: imagepath.addGestureRecognizer(UITapGestureRecognizer(target: self, action: "imagePathClick:")) 怎么样,看上去是不是比oc简单多了呢,简单解释一下,imagePath是我定义的一个UIImageView,可能有人添加了这个手势之后

  • layui中的tab控件点击切换触发事件

    layui中的tab控件点击切换触发事件

    目录 tab控件点击切换触发事件 方法一 方法二 layui选项卡无法切换 解决 tab控件点击切换触发事件 在layui中使用到tab控件,如果不想在页面加载时就加载所有tab的界面,而是点击某个tab再加载对应的数据,可以使用tab 的点击事件. 方法一 这个方法是我最初在网上找的使用方法. 非IE浏览器 //切换tab 调用不同的方法 layui.use('element', function(){ var $ = jQuery = layui.jquery; var element =

  • Android Tab 控件详解及实例

    Android Tab 控件详解及实例

    Android Tab 控件详解及实例 在桌面应用中Tab控件使用得非常普遍,那么我们经常在Android中也见到以Tab进行布局的客户端.那么Android中的Tab是如何使用的呢? 1.Activity package com.wicresoft.activity; import com.wicresoft.myandroid.R; import android.app.TabActivity; import android.os.Bundle; import android.util.Lo

  • 浅谈layui分页控件field参数接收对象的问题

    第一次使用layui分页控件,遇到的问题..field: 'type.typeName' 获取不到值. 页面代码 table.render({ elem: '#bookTable' ,height: 'full-20' ,url: '/admin/getBook' //数据接口 ,request: { pageName: 'begin' //页码的参数名称,默认:page ,limitName: 'length' //每页数据量的参数名,默认:limit } ,page: true //开启分页

  • layui时间控件选择时间范围的实现方法

    解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择 共有两种解决方式: 方式一(layui 1.x): html代码: <div class="layui-inline"> <div class="layui-input-inline"> <input type="text" name="start_time" class="layui-input" id=&

  • asp.net使用Repeater控件中的全选进行批量操作实例

    本文实例讲述了asp.net使用Repeater控件中的全选进行批量操作的方法.分享给大家供大家参考.具体分析如下: 今天在Repeater控件中碰到一个全选的操作,于是上网查了一下,找到一个觉得比较好,便记录下来, 界面代码简化之后(全选操作): 复制代码 代码如下: <script type="text/javascript"> function SelectAll(parentChk, ChildId, bigControlID) { var oElements =

  • C#实现读取DataSet数据并显示在ListView控件中的方法

    本文实例讲述了C#实现读取DataSet数据并显示在ListView控件中的方法.分享给大家供大家参考.具体如下: /*lvStudentList为ListView控件名 */ DataSet ds = new DataSet(); ds = student.QueryStudents(); //查询表的信息 int rowCount, columnCount,i,j; rowCount = ds.Tables[0].Rows.Count; columnCount = ds.Tables[0].

  • UIWebView控件中字体大小和字体样式的修改

    修改UIWebView控件中字体的样式: NSString *htmlString = [NSString stringWithContentsOfFile:self.webPath encoding:NSUTF8StringEncoding error:nil]; UIFont *font = [UIFont systemFontOfSize:12]; NSString *newHtmlString = [NSString stringWithFormat:@"<font face='%

  • 在Web用户控件中引用样式表中样式的方法

    如何在Web用户控件中引用样式表中的样式 复制代码 代码如下: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="gl1.ascx.cs" Inherits="admin_gl1" EnableTheming="True" %> < link href="../App_Themes/qiantai.css&quo

随机推荐