I.はじめに

1.タブタブとは

2.iframeタグとは何ですか

3. iframe タグを使用する

2. 事例の実現

1. 需要分析

①オンラインのLayuiサンプルで適切なタブを探します

②左クリックの右側にurl属性がない

③左側のリストの右側の内容をクリックすると、さらに質問が開きます

I.はじめに

1.タブタブとは

タブ (Tab) は、コンテナ内に複数のコンテンツページを表示するために使用される        一般的なユーザーインターフェイス要素です。通常、各タブはラベルと対応するコンテンツ領域で構成されます。

ユーザーがタブのラベルをクリックすると、対応するコンテンツ領域が表示され、他のタブのコンテンツ領域は非表示になります。このようにして、ユーザーはさまざまなタブをクリックしてさまざまなページを切り替えることができるため、より優れたユーザーエクスペリエンスが提供されます。

        Web 開発では、通常、HTML、CSS、JavaScript を使用して手動でコーディングする方法や、開発プロセスを簡素化するために既存のタブプラグイン/ライブラリを使用する方法など、タブを実装する方法が複数あります。一般的なタブプラグイン/ライブラリには、Bootstrap の Tab プラグイン、jQuery UI の Tabs コンポーネントなどが含まれます。

        ユーザーはタブを使用して、ページ上のさまざまなコンテンツを簡単に切り替えることができます。これは、Web ページのナビゲーションメニュー、設定パネル、マルチタブブラウザーなど、多くのアプリケーションシナリオで非常に役立ちます。タブの外観と操作は、デザインのニーズとユーザーエクスペリエンスに応じてカスタマイズできます。

タブ効果の表示:

2.iframeタグとは何ですか

iframe (インラインフレーム) は、Web ページ内に別のページまたはドキュメントを埋め込むために使用される HTML のタグです。

iframe タグを使用すると、Web ページ内に独立したインラインフレームを作成し、別のソースまたは同じソースからの外部コンテンツを表示できます。この埋め込みページは、別の Web ページ、ビデオ、地図、広告などにすることができます。

通常、iframe タグには次の属性が含まれます。

src: ロードするコンテンツの URL を指定します。

width: 「iframe」の幅を指定します。

-height: `iframe` の高さを指定します。

Frameborder: 枠線を表示するかどうかを指定します。

スクロール: スクロールバーを表示するかどうかを指定します。

サンプルコードは次のとおりです。
<iframe src="http://www.example.com" width="500" height="300" frameborder="0" scrolling="auto"></iframe>
iframe タグを使用すると、埋め込まれたコンテンツは親ページからある程度分離された別のフレームに表示されることに注意してください。これにより、Web ページへのサードパーティコンテンツの埋め込み、広告の表示、他の Web アプリケーションの統合など、iframe が非常に便利になります。しかし同時に、iframe の悪用によって引き起こされる可能性のあるセキュリティリスクやユーザーエクスペリエンスの問題を回避するために、セキュリティと設計の考慮事項にも注意を払う必要があります。

3. iframe タグを使用する

iframe タグを使用する場合は、埋め込むコンテンツの URL またはソースファイルを指定し、対応する属性を定義する必要があります。以下は「iframe」タグを使用した例です。
<!DOCTYPE html>
<html>
<head>
  <title>嵌入页面示例</title>
</head>
<body>
  <h1>主页面</h1>

  <iframe src="http://t.csdn.cn/ommMR" width="800" height="600" frameborder="0" scrolling="auto"></iframe>

  <p>这是主页面中的其他内容。</p>
</body>
</html>
この例では、iframeタグは「http://t.csdn.cn/ommMR 」の Web ページを埋め込みます。幅を800px、高さを600pxに設定します。frameborder境界線を非表示にする場合はプロパティを 0 に設定し、scrollingコンテンツがフレームを超えるかどうかに基づいてスクロールバーを表示する場合はプロパティを「auto」に設定します。

タグを使用するには、iframe埋め込まれたコンテンツが信頼され、潜在的なセキュリティリスクを防ぐためのセキュリティのベストプラクティスに従っていることが必要であることに注意してください。

エフェクトデモ:

2. 事例の実現

1. 需要分析

①オンラインのLayuiサンプルで適切なタブを探します

以下は静的効果の表示です。

②左クリックの右側にurl属性がない

ツールクラス TreeVo はデータベース内のすべてのフィールドを持つことができないため、URL 属性を持つ TreeVo ツールクラスを動的に生成するにはどうすればよいでしょうか? ?

TreeVo ツールクラス
package com.zking.util;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;


public class TreeVo<T> {
	/**
	 * 节点ID
	 */
	private String id;
	/**
	 * 显示节点文本
	 */
	private String text;
	/**
	 * 节点状态，open closed
	 */
	private Map<String, Object> state;
	/**
	 * 节点是否被选中 true false
	 */
	private boolean checked = false;
	/**
	 * 节点属性
	 */
	private Map<String, Object> attributes;

	/**
	 * 节点的子节点
	 */
	private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();

	/**
	 * 父ID
	 */
	private String parentId;
	/**
	 * 是否有父节点
	 */
	private boolean hasParent = false;
	/**
	 * 是否有子节点
	 */
	private boolean hasChildren = false;

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public Map<String, Object> getState() {
		return state;
	}

	public void setState(Map<String, Object> state) {
		this.state = state;
	}

	public boolean isChecked() {
		return checked;
	}

	public void setChecked(boolean checked) {
		this.checked = checked;
	}

	public Map<String, Object> getAttributes() {
		return attributes;
	}

	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}

	public List<TreeVo<T>> getChildren() {
		return children;
	}

	public void setChildren(List<TreeVo<T>> children) {
		this.children = children;
	}

	public boolean isHasParent() {
		return hasParent;
	}

	public void setHasParent(boolean isParent) {
		this.hasParent = isParent;
	}

	public boolean isHasChildren() {
		return hasChildren;
	}

	public void setChildren(boolean isChildren) {
		this.hasChildren = isChildren;
	}

	public String getParentId() {
		return parentId;
	}

	public void setParentId(String parentId) {
		this.parentId = parentId;
	}

	public TreeVo(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
                  List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
		super();
		this.id = id;
		this.text = text;
		this.state = state;
		this.checked = checked;
		this.attributes = attributes;
		this.children = children;
		this.hasParent = isParent;
		this.hasChildren = isChildren;
		this.parentId = parentID;
	}

	public TreeVo() {
		super();
	}

}
上記のコードを読むと、必要な属性はありませんが、プライベート Map<String, Object> 属性 attributes があることがわかります。これにより、レベルデータを親に変換するときにレベルデータを直接トラバースできます。 -child level data この属性にデータベーステーブルのすべてのフィールドが含まれるように、これを Map コレクションに追加します。

③左側のリストの右側の内容をクリックすると、さらに質問が開きます

タブを追加する前に判断を追加するだけです。タブの li タグにlay-id 属性があることがわかりました。それに TreeVo ID を割り当て、クリックするたびにそれを渡すだけです。 jquery はラベルを取得します。ラベルが見つからない場合は開かれていないことを意味し、見つかった場合はそれを選択します。
//点击左侧列表右侧选项卡打开
		function opedTab(title, content, id) {
			//判断是否已经打开
			var node=$('li[lay-id="'+id+'"]');
			//没有找到该标签时就打开
			if(node.length==0){
				//因为element没有获取到要扩大权限（layui.use里有element）
				  element.tabAdd('demo', {
					title : title,
					content :"<iframe frameborder='0' src='"+content+"' scrolling='auto' style='width:100%;height:100%;'></iframe>",
					id : id
				})  
			}
			//有该标签就打开
			element.tabChange('demo', id)
			
		}
④公開ファイルの最適化

ページ上に大量の ${pageContext.request.contextPath} を記述する必要があるため、非常に面倒なので、タグ - ベースタグを使用できます
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html ">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/layui/css/layui.css">


<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/layui/layui.js"></script>


<base href="${pageContext.request.contextPath}/">


</head>

</html>
チップ：

<base> タグは、ページ内のすべての相対パスのベース URL を指定するために使用される HTML のメタタグです。

タグを使用すると、 <base> ページ内のすべての相対リンクのベース URL を変更できます。これはグローバル設定です。通常、相対パスは現在のページの URL に基づいて解決されます。ただし、 <base> タグを使用する場合、相対パスは <base> タグで指定された URL に基づきます。ページには 1 つの <base> タブのみを含めることができ、タブは <head> タブの一番上に配置する必要があることに注意してください。

2. Dao層の最適化

package com.xw.dao;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.xw.entity.Permission;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.TreeVo;

/**管理系统左侧列表
 * @author 索隆
 *
 */
public class PermissionDao extends BaseDao<Permission>{
	
	/**获取管理的所有信息（平级数据）
	 * @return
	 * @throws Exception 
	 */
	public List<Permission> list() throws Exception{
		String sql="select * from t_oa_permission";
		return  super.executeQuery(sql, Permission.class, null);
	}

	
	/**将平级数据变成我们需要的父子级数据
	 * @return
	 * @throws Exception 
	 */
	public List<TreeVo<Permission>> menu() throws Exception{
		//存放父子级的容器
		List<TreeVo<Permission>> menu=new ArrayList<TreeVo<Permission>>();
		//拿到平级数据
		List<Permission> list = this.list();
		//遍历平级数据
		for (Permission permission : list) {
			//工具类帮助我们完成父子级关系
			TreeVo<Permission> vo=new TreeVo<Permission>();
			vo.setId(permission.getId()+"");//id
			vo.setParentId(permission.getPid()+"");//父级id
			vo.setText(permission.getName());//列表名称
			
            //优化代码
			//利用一个map集合保存TreeVo没有的属性
			Map<String, Object> map=new HashMap<>();
			//将数据的所有信息保存到map容器中
			map.put("self", permission);
			vo.setAttributes(map);
			
			menu.add(vo);
		}
		
		//通过工具类筛选父级菜单的儿子，String是父级菜单的pid
		return BuildTree.buildList(menu, "-1");
	}
	
	
	
	
}

先ほどの要件分析でも触れましたので、ここではあまり説明しません。コードを直接見てください。

3. JSPページの構築

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<%@ include file="common/static.jsp"%>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo layui-hide-xs layui-bg-black">OA会议系统</div>
			<!-- 头部区域（可配合layui 已有的水平导航） -->
			<!-- <ul class="layui-nav layui-layout-left">
				移动端显示
				<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm"
					lay-header-event="menuLeft"><i
					class="layui-icon layui-icon-spread-left"></i></li>
				Top导航栏
				<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
				<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
				<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
				<li class="layui-nav-item"><a href="javascript:;">nav
						groups</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">menu 11</a>
						</dd>
						<dd>
							<a href="">menu 22</a>
						</dd>
						<dd>
							<a href="">menu 33</a>
						</dd>
					</dl></li>
			</ul> -->
			<!-- 个人头像及账号操作 -->
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item layui-hide layui-show-md-inline-block">
					<a href="javascript:;"> <img
						src="${pageContext.request.contextPath }/static/images/user/小黑子索隆.jpg"
						class="layui-nav-img">我的
				</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">修改信息</a>
						</dd>
						<dd>
							<a href="">安全管理</a>
						</dd>
						<dd>
							<a href="login.jsp">退出登录</a>
						</dd>
					</dl>
				</li>
				<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
					<a href="javascript:;"> <i
						class="layui-icon layui-icon-more-vertical"></i>
				</a>
				</li>
			</ul>

		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">

				</ul>
			</div>
		</div>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
				<ul class="layui-tab-title">
					
				</ul>
				<div class="layui-tab-content">
					
				</div>
			</div>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->
			底部固定区域
		</div>

	</div>
	<script>
	var element,layer,util,$;

layui.use(['element', 'layer', 'util','jquery'], function(){
	element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.jquery;
  

  	$.ajax({
  		url: " Permission.action?methodName=listmenu",
  		type: 'post',
  		dataType: 'json',
  		success: function(data) {
  			//定义一个变量将回显的数据进行拼接，最终追加到指定标签上
  			var str='';
  			$.each(data,function(i,n){
  				str+='<li class="layui-nav-item layui-nav-itemed">';
  				str+=' <a class="" href="javascript:;">'+n.text+'</a>';
  				//判断有无children节点有就遍历
  				if(n.hasChildren){
  					//有children节点拿到children节点
  					var children=n.children;
  						str+='<dl class="layui-nav-child">';
  					$.each(children,function(idx,node){
  						str+='<dd><a href="javascript:;" onclick="opedTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id+'\')">'+node.text+'</a></dd>';
  		  			})
  		  				str+='</dl>';
  				}
  				
  				str+='</li>';
  				
  			})
  			//将拼接内容追加到指定ul标签
  			$("#menu").html(str);
  			//渲染ul标签
  			element.render('menu');
  			
  		}
  	})
  
  
});




		//点击左侧列表右侧选项卡打开
		function opedTab(title, content, id) {
			//判断是否已经打开
			var node=$('li[lay-id="'+id+'"]');
			//没有找到该标签时就打开
			if(node.length==0){
				//因为element没有获取到所有要去上面扩大权限
				  element.tabAdd('demo', {
					title : title,
					content :"<iframe frameborder='0' src='"+content+"' scrolling='auto' style='width:100%;height:100%;'></iframe>",
					id : id
				})  
			}
			//有该标签就打开
			element.tabChange('demo', id)
			
			
			
		}
		
		
	</script>
</body>
</html>

4. 事例紹介

ログインに成功した場合のみ、メインページにアクセスできます。

ここの URL ページは私のプロジェクトに書かれていないので、404 は避けられませんが、心配しないでください。！！

5. まとめ

①自分で書いたメソッド内で要素を使用する必要があるため、メソッド内でこの要素を取得できなかったので、layui.use(モジュールのロード)が要素を取得する際にスコープを拡張する必要があります。

②urlにはTreeVoツールクラスにこの属性がないので、フラットレベルデータを親子データに変換する際に記事を書いてMapに追加し、TreeVoのAttributesプロパティにMapを代入する必要があります。、データベースのテーブルとコンテンツのすべてのフィールドを取得します。

③一度タブを開いた後は繰り返し開くことはできず、判断する必要があります。タブがすでに存在する場合は選択させ、存在しない場合は開きます。

私の共有はここで終わりです。議論やコミュニケーションのためにコメントエリアへようこそ！！

役に立ったと思ったら、高評価をお願いします♥♥

フロントエンドフレームワーク Layui は動的タブと iframe の使用を実装します (ソースコード付き)

I.はじめに

1.タブタブとは

2.iframeタグとは何ですか

3. iframe タグを使用する

2. 事例の実現

1. 需要分析

①オンラインのLayuiサンプルで適切なタブを探します

②左クリックの右側にurl属性がない

③左側のリストの右側の内容をクリックすると、さらに質問が開きます

④公開ファイルの最適化

2. Dao層の最適化

3. JSPページの構築

4. 事例紹介

5. まとめ

Supongo que te gusta

フロントエンド フレームワーク Layui は動的タブと iframe の使用を実装します (ソース コード付き)

I.はじめに

1.タブタブとは

2.iframeタグとは何ですか

3. iframe タグを使用する

2. 事例の実現

1. 需要分析

①オンラインのLayuiサンプルで適切なタブを探します

②左クリックの右側にurl属性がない

③左側のリストの右側の内容をクリックすると、さらに質問が開きます

④公開ファイルの最適化

2. Dao層の最適化

3. JSPページの構築

4. 事例紹介

5. まとめ

Supongo que te gusta

フロントエンドフレームワーク Layui は動的タブと iframe の使用を実装します (ソースコード付き)