动态创建标签页

一、首先添加标签页

<div title="员工信息">
    <a id="add_tab" style="width:100%"href="#" class="easyui-linkbutton">新标签页</a>
    <a style="width:100%" title="addUser.html" href="#" class="easyui-linkbutton">添加员工</a>
    <br>
    <a style="width:100%" title="editUser.html" href="#" class="easyui-linkbutton">修改员工</a>
        <br>
    <a style="width:100%" title="deleteUser.html" href="#" class="easyui-linkbutton">删除员工</a>
    <a style="width:100%" title="productlist.html" href="#" class="easyui-linkbutton">产品列表</a>
    </div>

二、写js函数

<script type="text/javascript">

$(function(){
    //创建打开新标签页的按钮
    $(".easyui-linkbutton").click(
            function()
            {
                //获取组件的属性或内容
                var tab_title=$(this).text();
                var tab_href=$(this).attr("title");

                if($("#tt").tabs("exists",tab_title))
                {
                    $("#tt").tabs("select",tab_title);
                }
            else
                {

                $("#tt").tabs(‘add‘,{
                    title:tab_title,
                    closable:true,
                    href:tab_href
                })

                }
            });

})

</script>

注意:1、js函数要写在$(function(){函数写在这里面})。

2、用this能够获取当前点击字段的值。

时间: 2024-10-10 04:51:51

动态创建标签页的相关文章

使用DOM动态创建标签

本文是参考<javascript Dom 编程艺术>第八章的内容所写,用到的知识点,就是关于创建平稳的web页面. 使用DOM方法: getElementById() getElementsByTagName() getAttribute() setAttribute() createElement() createTextNode() appendChild() 首先网页只是一段简单的html,含有部分复杂的标签. <abbr>用于缩写,<blockquote>引用.

jQuery EasyUI使用教程之创建标签页

<jQuery EasyUI最新版下载> 本教程将展示如何使用easyui创建一个标签组件.标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体. 标签一次只能显示一个面板,每个面板都有标题.图表和关闭按钮.当标签被选中之后,会显示相应面板的内容. 查看演示 使用HTML标记创建标签,其中包括一个DIV容器和一些DIV面板. < div class="easyui-tabs" style="width:400px;height:100

EasyUI 布局 - 动态添加标签页(Tabs)

首先导入js <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"> <link rel="stylesheet" href="../js/easyui/themes/icon.css"> <script type="text/javascript" src="../js/jquery

easyui 动态添加标签页,总结

步骤 1:创建 Tabs <div style="margin-bottom:10px"> <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a> <a href="#" class="easyui-linkbut

ABAP 选择屏幕创建标签页

*&---------------------------------------------------------------------* *& Report ZTEST_TAB *& *&---------------------------------------------------------------------* *& *& *&--------------------------------------------------

Aspx根据模版动态创建html页

Default.aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="creathtml.Default" %> <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" ><h

jquery-ui-bootstrap动态添加和删除标签页封装【效果更炫】

1.效果图 2.导入js和css <link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="font/Font-Awesome/css/font-awesome.css"> <link rel="styl

JS动态引入js,CSS——动态创建script/link/style标签

一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setA

JS动态引入js、CSS动态创建script/link/style标签

一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setA