8 examples of 'new tab html' in JavaScript

181
async function createTabHtml(tab, showLinks) {
182
  var linksSpan, listImg, listLink, listHover;
183
184
  if (tab.sessionId) {
185
    linksSpan = createEl('div', {
186
      class: 'tabContainer',
187
      'data-tabId': tab.id || tab.url,
188
      'data-url': tab.url,
189
    });
190
  } else {
191
    linksSpan = createEl('div', {
192
      class: 'tabContainer',
193
      'data-url': tab.url,
194
    });
195
  }
196
197
  listHover = createEl(
198
    'span',
199
    {
200
      class: 'itemHover removeLink',
201
    },
202
    '\u2716'
203
  );
204
205
  const faviconMeta = await gsFavicon.getFaviconMetaData(tab);
206
  const favIconUrl = faviconMeta.normalisedDataUrl;
207
  listImg = createEl('img', {
208
    src: favIconUrl,
209
    height: '16px',
210
    width: '16px',
211
  });
212
213
  listLink = createEl(
214
    'a',
215
    {
216
      class: 'historyLink',
217
      href: tab.url,
218
      target: '_blank',
219
    },
220
    tab.title && tab.title.length > 1 ? tab.title : tab.url
221
  );
222
223
  if (showLinks) {
224
    linksSpan.appendChild(listHover);
225
  }
226
  linksSpan.appendChild(listImg);
227
  linksSpan.appendChild(listLink);
228
  linksSpan.appendChild(createEl('br'));
229
230
  return linksSpan;
231
}

24
function addTab(tab) {
25
    if (isHttpUrl(tab.url) && tab.status === "complete") tabs.push({"Title":tab.title, "URL":tab.url});
26
}

37
function createTab(tab: any): JQuery {
38
  return $("<div>").addClass("tab").attr("data-tab-page-id", tab.id).html(tab.name);
39
}</div>

77
static TAB_DEFAULT(page, tab) {
78
  return {
79
    type : 'TAB_DEFAULT',
80
    payload : {page , tab}
81
  }
82
}

20
function tab(n) {
21
  $('#featureTabsContainer .tab').removeClass('tab_selected');
22
  $($('#featureTabsContainer .tab')[n]).addClass('tab_selected');
23
  $('#featureElementsContainer .feature').hide();
24
  $($('#featureElementsContainer .feature')[n]).show();
25
}

8
function changeTab(selected_tab,tabs){
9
10
    for (var i =0; i< tabs.length;i++){
11
	if (tabs[i].children[0].id == selected_tab.id){
12
      
13
	var selected = document.getElementById(selected_tab.id+"_content");
14
	selected.style.display ="block";
15
	selected_tab.className = "selected";
16
17
	}else{
18
	  var non_selected = document.getElementById(tabs[i].children[0].id+"_content");
19
	  non_selected.style.display = "none";
20
	  tabs[i].children[0].className = "nonselected";
21
	}    
22
    }
23
}

30
function addTab( tab ){
31
	return '<li><a href="#' + tab.id + '">' + tab.msg +'</a></li>';
32
}

50
open_tab ({ label, description, category, position = 'next' } = {}, view) {
51
  const id = `${category}-${view.id}`;
52
  const add_tab = () => this.$$tablist.add_tab(id, label, description || label, $tabpanel, position);
53
  let page;
54
  let pages = BzDeck.views.pages[`${category}_list`];
55
  let $tab = document.querySelector(`#tab-${CSS.escape(id)}`);
56
  let $tabpanel = document.querySelector(`#tabpanel-${CSS.escape(id)}`);
57
58
  if (!pages) {
59
    pages = BzDeck.views.pages[`${category}_list`] = new Map();
60
  }
61
62
  // Reuse a tabpanel if possible
63
  if ($tabpanel) {
64
    page = pages.get(view.id);
65
    $tab = $tab || add_tab();
66
  } else {
67
    page = view;
68
    pages.set(view.id, page);
69
    $tabpanel = this.get_template(`tabpanel-${category}-template`, view.id);
70
    $tab = add_tab();
71
72
    // Prepare the Back button on the mobile banner
73
    BzDeck.views.global.add_back_button($tabpanel);
74
  }
75
76
  BzDeck.views.global.update_window_title($tab);
77
  BzDeck.views.pages[category] = page;
78
  this.tab_path_map.set($tab.id, location.pathname + location.search);
79
  this.$$tablist.view.selected = this.$$tablist.view.$focused = $tab;
80
  $tabpanel.focus();
81
}