Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use Html to add, delete, and right-click menus. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

The code is as follows:

.tabs {

Width:800px

Margin:150px auto

}

. tab-header {

Position: relative

Height: 40px

Line-height: 40px

Background: # fafafa

Border-bottom: solid 2px # 39AEF5

Overflow: hidden

}

.tab-left, .tab-right {

Position: absolute

Top: 0

Width: 40px

Height: 40px

Text-align: center

Color: # 888

Background-color: # ffffff

Cursor: pointer

Z-index: 1000

}

. tab-left {

Left: 0

Border-right: solid 1px # eee

}

. tab-right {

Right: 0

Border-left: solid 1px # eee

}

. tabs-wrap {

Position: relative

Overflow: hidden

Margin: 0 40px

}

. tabs-wrap ul {

List-style-type: none

Height: 40px

Margin: 0

Padding: 0

Font-size: 14px

Width: 5000px

}

. tabs-wrap ul li {

Float: left

Display: inline-block

}

. tabs-wrap ul li a {

Display: block

Border-right: solid 1px # eee

Padding: 0 15px

Color: # 888

}

. tabs-wrap ul li.active a {

Background-color: # 39AEF5

Color: # fff

}

. tabs-wrap ul li a:hover {

Text-decoration: none

}

Home page

Refresh

Close all tabs

Close other tabs

Close the other tabs on the right

Close the other tabs on the left

Add TABS1

Add TABS2

Add TABS3

Add TABS4

Add TABS5

Add TABS6

Add TABS7

Add TABS8

Add TABS9

/ / get the width of all tab tags

Function getContentWidth (c) {

Var w = 0

C.children () .each (function () {

W + = $(this) .outerWidth (true)

});

Return w

}

/ / determine whether tab already exists

Function tabRepeat (id) {

Var li = $(".tabs-content li")

Var isRepeat = false

$.each (li, function (iMagna) {

If ($(n) .attr ("data-id") = = id) {

IsRepeat = true

Return false

}

});

Return isRepeat

}

/ / add tab method

Function addTab (id, title, content) {

Var ul = $(".tabs-content")

Var panels = $(".tab-panel")

Var tab

/ / if the tab title already exists, open the current tab and return

If (tabRepeat (id)) {

Tab = $(".tabs-content li [data-id=" + id + "]")

ScrollSelected (tab)

} else {

/ / create a tab

Tab = $(

'' +

'' +

Title +

'' +

''

);

/ / create a tab panel

Var tabPanel = $(

'' +

Content +

''

);

/ / add tab and tab panels to the page

Tab.appendTo (ul)

TabPanel.appendTo (panels)

/ / if there are too many tags, scroll the label container so that the labels are displayed

Var tabsWidth = getContentWidth (ul)

TabsWidth > $(".tabs-wrap"). Width () & & ul.animate ({

"margin-left": $(".tabs-wrap") .width ()-tabsWidth

});

}

/ / check tab

SelectTab (tab)

}

/ / Select the tab

Function selectTab (self) {

/ / all tab are unchecked

$(".tabs-content li") .removeClass ("active")

/ / hide all panels

(".panel-content") .hide ()

/ / display the selected tab when selected

Self.addClass ("active")

Var id = self.attr ("data-id")

$(".panel-content [data-id=" + id + "]") .panel ()

Return false

}

/ / move Tab when selected

Function scrollSelected (self) {

Var w = parseInt (self.css ("width"))

Var ul = $(".tabs-content")

Var ulLeft = parseInt (ul.css ("margin-left"))

Var wapW = $(".tabs-wrap") .width ()

Var tabsWidth = getContentWidth (ul)

Var prveall = self.prevAll ()

Var nextall = self.nextAll ()

Var prveallwidth = 0

Var nextallwidth = 0

Var newleft

$.each (prveall,function (I, n) {

Prveallwidth + = parseInt ($(n) .css ("width"))

});

$.each (nextall,function (I, n) {

Nextallwidth + = parseInt ($(n) .css ("width"))

});

If (prveallwidth + w

< wapW){ newleft = 0 }else if( nextallwidth < wapW ){ newleft = wapW - tabsWidth }else{ newleft = -prveallwidth + wapW/2 } if( prveallwidth < -ulLeft || prveallwidth >

WapW-w) {

Ul.animate ({

"margin-left": newleft

})

}

}

/ / Delete the tab

Function closeTab (self) {

Var li = self.parents ("li")

Var id = li.attr ("data-id")

Var nextLI = li.next ()

Var prevLI = li.prev ()

Var w = li.width ()

Var ul = $(".tabs-content")

Var tabConLeft = parseInt (ul.css ("margin-left"))

/ / remove tags and panels

Li.remove ()

$(".panel-content [data-id=" + id + "]") .panel ()

/ / other tabs are displayed when you delete a tab page

If (li.hasClass ("active") & & nextLI.size () = = 0) {

PrevLI.addClass ("active")

$(".panel-content [data-id=" + prevLI.attr ("data-id") + "]") .panel ()

} else if (li.hasClass ("active") & & nextLI.size ()! = 0) {

NextLI.addClass ("active")

$(".panel-content [data-id=" + nextLI.attr ("data-id") + "]") .panel ()

Return false

}

/ / scroll the label as needed

TabConLeft

< 0 && ul.animate({ "margin-left": tabConLeft + w >

0? 0: tabConLeft + w

});

}

/ / bind click event

Function bindEvents (self) {

Self.unbind () .bind ("click", function (e) {

Var left = 200

Var ul = $(".tabs-content")

Var ulLeft = parseInt (ul.css ("margin-left"))

Var tabsWidth = getContentWidth (ul)

If ($(e.target) .hasClass ("tab-left") | | $(e.target). Parent (). HasClass ("tab-left")) {

UlLeft

< 0 && scrollBy(left); } else if ($(e.target).hasClass("tab-right") || $(e.target).parent().hasClass("tab-right")) { ulLeft >

$(".tabs-wrap") .width ()-tabsWidth & & scrollBy (- left)

} else if ($(e.target) .hasClass ("tab-close")) {

CloseTab ($(e.target))

} else {

Var li = $(e.target) .closest ('li')

If (li.length) {

SelectTab (li)

}

Return false

}

}). On ('contextmenu','li',function (e) {

E.preventDefault ()

SelectTab ($(this))

$(".Rightmenu") .css ({

Display: 'block'

Left: e.pageX

Top: e.pageY

});

});

TabRightmenuEven ()

}

/ / set label scrolling

Function scrollBy (left) {

Var ul = $(".tabs-content")

Var ulLeft = parseInt (ul.css ("margin-left"))

Var tabsWidth = getContentWidth (ul)

Var newLeft = ulLeft + left

If (newLeft > 0) {

NewLeft = 0

} else if (newLeft < $(".tabs-wrap") .width ()-tabsWidth) {

NewLeft = $(".tabs-wrap") .width ()-tabsWidth

}

Ul.animate ({

"margin-left": newLeft

})

}

/ / bind right-click menu event

Function tabRightmenuEven () {

/ / hide the right-click menu when leaving the tab

$(".Rightmenu") .on ('mouseleave',function () {

(this) .hide ()

Return false

});

$(".sidebar, .main, .top-navbar") .mouseover (function () {

(".Rightmenu") .hide ()

});

/ / Refresh

$('.tabUpdate') .click (function () {

Var tabs = $(".tabs-content li")

Tabs.each (function (I, n) {

If ($(n) .hasClass ("active")) {

Var id = $(n) .attr ("data-id")

/ / use js call to force refresh

(".panel-content [data-id ='" + id + "'] iframe") .attr ('src', $(".panel-content [data-id ='" + id + "'] iframe") .attr ('src'))

}

});

(".Rightmenu") .hide ()

Return false

});

/ / close all

$(".tabCloseAll") .click (function () {

Var tabs = $(".tabs-content li")

$.each (tabs, function (I, n) {

Var id = $(n) .attr ("data-id")

If (id! = 0) {

$(n) .remove

$(".panel-content [data-id ='" + id + "]") .panel ()

} else {

$(n) .addClass ("active")

$(".panel-content [data-id ='" + id + "]") .panel ()

}

});

(".Rightmenu") .hide ()

Return false

});

/ / close other pages

$(".tabCloseOther") .click (function () {

Var tabs = $(".tabs-content li")

Tabs.parent (. Css ("margin-left", "0px")

Tabs.each (function (I, n) {

If (I! = 0 & &! $(n) .hasClass ("active")) {

Var id = $(n) .attr ("data-id")

$(n) .remove

$(".panel-content [data-id ='" + id + "]") .panel ()

}

});

(".Rightmenu") .hide ()

Return false

});

/ / close all pages before the current tab

$(".tabulated close") .click (function () {

Var tab = $(".tabs-content li.active")

Var prevalltab = tab.prevAll ()

Var ulLeft = parseInt (tab.parent () .css ("margin-left"))

Prevalltab.each (function (I, n) {

If (I! = prevalltab.length-1) {

Var id = $(n) .attr ("data-id")

$(n) .remove

$(".panel-content [data-id ='" + id + "]") .panel ()

}

});

UlLeft < 0 & tab.parent () .animate ({"margin-left": 0})

(".Rightmenu") .hide ()

Return false

});

/ / close all pages after the current tab

$(".tabnextClose") .click (function () {

Var tab = $(".tabs-content li.active")

Var nextalltab = tab.nextAll ()

Var ulLeft = parseInt (tab.parent () .css ("margin-left"))

Var wapW = $(".tabs-wrap") .width ()

Nextalltab.each (function (I, n) {

Var id = $(n) .attr ("data-id")

$(n) .remove

$(".panel-content [data-id ='" + id + "]") .panel ()

});

Var tabs = $(".tabs-content li")

Var tabsW = 0

Tabs.each (function (ZBJ x) {

TabsW + = parseInt ($(x) .css ("width"))

});

If (ulLeft < 0) {

Tab.parent () .animate

"margin-left": tabsW < wapW? 0: wapW-tabsW

});

}

(".Rightmenu") .hide ()

Return false

});

}

$(function () {)

$(".btn") .click (function () {

Var id = $(this) .attr ("data-id")

Var title = $(this) .text ()

Var content =''

AddTab (id,title,content)

BindEvents ($(".tab-header"))

Return false

});

})

On "how to use Html to add, delete, right-click menu" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.