HTML / JS: расширение / переопределение собственных html элементов - PullRequest
Новая
       29

HTML / JS: расширение / переопределение собственных html элементов

0 голосов
/ 16 апреля 2020

Из-за множества ограничений в собственных элементах html мне интересно, возможно ли расширить собственный элемент html с помощью веб-компонентов и иметь собственное настроенное поведение. Я видел страницы по этому вопросу, но примеры очень простые и слабые, такие как добавление подтверждения для якорных тегов. Я не говорю о добавлении чего-то простого, я хочу изменить поведение. Я хочу, чтобы специалист по данным всегда показывал все элементы опций или даже имел свою собственную логику фильтрации c. Я никогда не могу найти код реализации этих нативных элементов, поэтому я не могу попробовать это.

Создание пользовательского элемента не вариант (если только для расширения нативного элемента). В моей компании мы используем openfin для небольших веб-приложений. Мы используем нативный список данных, потому что нам нужно, чтобы наши элементы могли выходить за пределы области просмотра (пользовательские элементы будут вырезаны).

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">







Item1Form





    
	
	      
	
	

    
	



//	">	
	
	
	function Item1Clear() {
	ClearVal = confirm("Clear List:\n\n" + "        " + document.forms[0].item1.value + "\n\nAre you sure?");
	 if( ClearVal == true ){document.forms[0].item1.value = ""; document.forms[0].item1.focus(); return true;}
	 else
	 {document.forms[0].item1.focus(); return false;}
     }
      
	
	
	


  
 
 
   

  
  
   
	
  
		
window.onload = Item1LoadXML();
    function Item1LoadXML() {
    var xmlhttp;
    if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
    xmlhttp.onreadystatechange=function()
      { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("Item1UDiv").innerHTML=xmlhttp.responseText.split("\n").slice(-2).join("\n"); }}//lines to show on red
    xmlhttp.open("GET","Item1ULog.txt",true);
    xmlhttp.send(); }

Last User
		         




			
	function addText(event) {
//alert(event.srcElement.innerText); event.srcElement.innerText == ""; event.srcElement.innerText.indexOf("$") == 1 $

if (event.srcElement.innerText.indexOf("$") > -1) {return false}
else 
{

var targ = event.target || event.srcElement;
document.getElementById("item1").value += targ.textContent + ". " || targ.innerText;
//	document.forms[0].item1.focus(); 
}


}



	
	
	
Type or Click the Item to add: 


 .scrollable1{
  overflow: scroll;
   height: 160px; /* adjust this width depending to amount of text to display */
    width: 88px; /* adjust height depending on number of options to display */
   border: 1px silver solid;
 color:black; background-color:bisque; font-size:16px; font-style:italic; }
 
  .scrollable2{
  overflow: scroll;
   height: 160px; /* adjust this width depending to amount of text to display */
    width: 88px; /* adjust height depending on number of options to display */
   border: 1px silver solid;
 color:black; background-color:azure; font-size:16px; font-style:italic; }

.bloc { width:100px;  /*adjusted to always display both scrolls as wide as the widest line no 
or  */}

.pb { margin-top:6px; color:blue; font-size:14px; text-decoration: underline; font-style:normal; line-height:2px; height:4px; }
.pb:hover { cursor:pointer; font-size:14px; text-decoration:underline; color:blue; }


 
  
Fruits:
 	


Apples
Bananas
Grapefruit
Grapes
Melon
Oranges
Pineaple
Plums
Strawberries
Tangerines
Watermelon
Veggies +: 
Beans
Carrots
Ginger
Lettuce
Onions
Peas
Plantains
Potatoes
Rice-brown
Rice-white
Sweet potatoes
Холодное + Frozen: Холод: 
Butter
Cheese
Eggs
Milk
Yogurt
Заморожен: 
Broccoli
Cauliflower
Chick peas
Corn
Ice cream
Mixed veggies
Мясо + Море: Мясо: 
Chicken
Ham
Meat
Море: 
Fish
Salmon
Shrimp
Банки + Пакеты: Банки: 
Canned chicken
Canned tuna
Пакеты: 
Almonds
Bread
Dry cranberries
Oatmeal
Peanuts
Prunes
Raisins
Seeds-flax $0.99 FancyFruits Colonial
Seeds-pumpkin
Seeds-sunflower
Ароматизатор: 
Cinnamon
Chocolate powder
Coffee
Dressings
Honey
Mayonnaise
Salt-iodized
Sugar-brown
Sugar-white
Vinegar
Напитки: 
Juice
Water
Water-Coconut
Здоровье: Дополнения: 
Amino acids
Calcium
Echinacea
Ginkgo biloba
Glucosamine
Hair-Vitamins
L-lysine
Magnesium
Protein
Saw palmetto
Лекарственные средства: 
Anti-acid
Aspirin
Cream analgesic
Cream anti-fungal
Cream anti-itch
Drops-eyes
Drops-nose
Nyquil
Pepto
Гигиена: 
Dental
Deodorant
Q-tips
Razors
Rinse
Shampoo
Soap-feminine
Soap-gel
Soap-hand
Talc
Toilet paper
Tooth paste
Wipes
Домашнее хозяйство: 
Clorox
Dish soap
Insect killer
Insect repellent
Laundry-detergent
Laundry-dryer-sheets
Laundry-rinse
Pine-sol
0 голосов
/ 16 апреля 2020

Ниже приведена ссылка для ознакомления с веб-компонентами:
https://www.webcomponents.org/introduction

На этой странице есть ссылки на примеры их реализации, как показано ниже:
https://www.npmjs.com/package/@polymer / paper-button

Предыдущая информация должна дать вам представление о реализации и необходимых зависимостях. Вы можете добавлять различные возможности через скрипты и даже больше модификаций через CSS.

Даже если веб-компоненты основаны на существующих веб-стандартах, их использование может потребовать некоторого межсайтового взаимодействия, а иногда блокировщики сценариев / спама могут не разрешать их. Из-за совместимости и вышеупомянутого я избегаю их использования до тех пор, пока полностью не принят в HTML стандарты и спецификации (спецификации) DOM.
Чтобы сделать это более интересным, эти HTML стандарты и спецификации DOM могут измениться в любой момент.

Для HTML стандартов: https://html.spec.whatwg.org/ https://www.w3.org/standards/webdesign/htmlcss

Для спецификации DOM: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction http://www.w3.org/DOM/ https://dom.spec.whatwg.org/


Рекомендации от кого-то, кто находится в этой области некоторое время (я):
- Использование что вы можете сделать, работая с текущими устройствами / браузерами, когда все меняется.
- Подобное поведение / ощущение / внешний вид веб-компонентов может быть достигнуто с помощью комбинаций HTML / CSS / Javascript.
- Как говорилось ранее, все меняется и нет ничего плохого в изучении чего-то нового, как это экспериментальные веб-компоненты ниже (они могут или не могут быть реализованы):
https://www.webcomponents.org/author/fs-webcomponents

В другом ответе я включил фрагмент с Старый список, который я создал.

Я надеюсь, что эта информация либо поможет вам, либо перенесет вас к другой информации, которая может помочь.
С уважением,
Рамон

...