AG体育

杭州网站设计:如何使用Web组件创建自己的HTML元素

2019.08.02 mf_web

178

WebZUJIANMUQIANZHENGXINGFENDIBEICHENGWEIJIJIANGDAOLAIDE“ WANGLUOKAIFADEGOUZAOZHUANBIAN ”,CHENGNUOYONGJIUDIZHONGSUWANGYESHEJIQIANJING。DAXINGQIYEZHENGZAIXIANGQIANFAZHAN,JIANGWANGLUOZUJIANBIANWEIXIANSHI。GoogleHEMozillaDOUYIZHUBUTUICHUYUANSHENGLIULANQIZHICHI。

NIWENDEWANGYEZUJIANSHISHENME?HANGZHOUWANGZHANSHEJIJIANERYANZHI,WebZUJIANWEININTIGONGLEYIZHONGCHUANGJIANZIJIDEZIDINGYIHTMLYUANSUDEFANGFA,ZHEIXIEYUANSUKEYIZHIXINGNINXUYAODERENHENEIRONG。NINKEYIJIANGSUOYOUNEIRONGZHENGLICHENGPIAOLIANG,ZHENGJIEDEXIAOXINGZIDINGYIHTMLYUANSU,ERBUSHISHIYONGXIANGXIBIAOJI,ZHANGJIAOBENHEZHONGFUDAIMALAIJIAZAININDEWANGZHAN。

了解Web组件

LEJIEWebZUJIANRUHEYUNXUZIDINGYIHTMLYUANSUDEZUIJIANDANFANGFASHISHOUXIANCHAKANWOMENYIJINGCONGHTML5ZHONGLEJIEDEXIANYOUYUANSU:<video>BIAOJI。SHIYONGCIYUANSU,NINZHIXUJIXINGDAIMAJIKEFANGZHISHIPIN,LIRU:

您可能只看到上面的几行HTML,但这里是<video>元素在幕后的真实情况:

AG体育MORENQINGKUANGXIA,LIULANQIYINZANGSUOYOUXIANGXIDEDAIMA,YINCININBUXUYAOCHAKANTAHUODANXINZAININXIANGYAOFANGZHISHIPINSHIBIANXIETA。NIZHIZHONGJIZAINI<video>HE<source>BIAOQIAN,NISHIQIDONGHEYUNXING。 

AG体育YIQIAN,ZHIYOULIULANQIGONGYINGSHANGCAINENGYIZHEIZHONGFANGSHICHUANGJIANYUANSU。DANXIANGXIANGYIXIA,RUGUONINKEYIJIANGZIJIDEXIANGTONGFANGFAYONGYUQITALEIXINGDENEIRONGMA? 

YITUPIANHUANDENGPIANWEILI。TONGCHANG,NINXUYAOJILUNDAIYOUTEDINGLEIMINGCHENGDEQIANTAOdivLAICHULIHUANDENGPIANBAOZHUANG,BAOZHUANGMEIZHANGHUANDENGPIANYIJITIANJIABIAOTIHESUOLVETU。NINHAIXUYAOTONGGUOYIXIENEILIANjQuery / JavaScriptWEIHUANDENGPIANZHUANHUANXIAOGUOSHEZHIRENHEZHENGTIHUANDENGPIANXUANXIANG。

RUGUONIKEYITIAOGUOSUOYOUZHEIXIEERZHISHISHIYONG:

1
2
3
4
<slide-show transition="fade">
<slide src="slideone.jpg" thumb="slideone_thumb.jpg" caption="Look at this image">
<slide src="slidetwo.jpg" thumb="slidetwo_thumb.jpg" caption="Look at this other image">
</slide-show>

使用Web组件,这正是您可以做的。 

创建自己的HTML元素

RUGUONINXIANGTIGONGYIZHONGJIANJIE,YIYUYUFANGZHINEIRONGDEFANGFAJINXINGJIAOHU,FOUZEZHEIXIENEIRONGHUIBIANDEYONGZHONGHEBENZHUO,NINKEYIJIXUCHUANGJIANZIJIDEWebZUJIAN。

WebZUJIANYEKEYIQINGSONGGONGXIANG,YINCIDANGKAIFARENYUANJIARUSHI,NINKEYIQINGSONGHUOQUZUICHANGJIANXIANGMUYAOQIUDEYUGOUJIANWebZUJIAN。WOMENYIJINGKANDAOZIYOUGONGXIANGDEZUJIANCONG   YUYINSHIBIEZHONGDANCHULAI。 

以  展示建设者 ..

RANGWOMENLAIKANKANWebZUJIANMUHOUDENEIRONG。

是什么使Web组件

MUQIANCUNZAIDEWebZUJIANYOUSIBUFENZUCHENG:

  • ZIDINGYIYUANSU

  • YINGZIDOM

  • MOBAN

  • HTMLDAORU

自定义元素

ZIDINGYIYUANSUZHENGSHITAMENTINGQILAIDEYANGZI:KEYIMINGMINGWEININXUANZEDERENHEYUANSU,BINGYININXIANGYAODERENHEFANGSHICAOZUO。DANGWOYIRENHEFANGSHISHUOSHENMESHI,WODEYISISHI。LIRU,WOTICHULE<x-gangnam-style>YUANSU:

现场演示 - 将鼠标悬停在栏上

ZIDINGYIYUANSUYIZUIJIANDANDEXINGSHISHENGMING,RUXIASUOSHI:

1
2
3
<element name="x-gangnam-style">
...
</element>

CHUANGJIANZIDINGYIYUANSUSHI,KEYICONGTOUKAISHIWANCHENG,YEKEYIKUOZHANXIANYOUDEHTMLYUANSU(<button>LIRU),BINGWEIQITIGONGSUOXUDEXIUGAIGONGNENGHUOYANSHIWENGAO。

1
2
3
<element name="custom-button" extends="button">
...
</element>

ZHUYI:ZHIDEZHICHUDESHI,YOUYUBINGFAZHENG,GAI<element>BIAOQIANZAI2013NIANYIBEIQIYONG。TAKENENGHUICHANSHENGHUIBAO,DANYUCITONGSHIHAIYOUpolyfillXUANXIANG,WOMENJIANGZAISHAOHOUTAOLUN。GANXIEAddy Osmani  ZHICHUZHEIYIDIAN!

暗影DOM

Shadow DOMSHIJISHANGSHIWebZUJIANGONGZUOFANGSHIDEHEXINFANGMIAN。ZHIQIAN,WOMENCHAKANLEHTML5 <video> YUANSU,BINGZHANSHILEJINGUANZHIKANDAOJIXINGDAIMA,DANSHIJISHANGMORENYINZANGLEXIANGDANGDUODEDAIMA。YINZANGDAIMASUOZAIDEDIFANGCHENGWEI“Shadow DOM”。

LIULANQIGONGYINGSHANGDUONIANLAIYIZHISHIYONGZHEIGEshadow DOMLAIBENDISHIXIANSHURU,YINPIN,SHIPINDENGYUANSU。TONGGUOWebZUJIAN,RENHEKAIFARENYUANXIANZAIDOUKEYISHIYONGTA。

YIBANDEXIANGFASHINIZAIBIAOJIFANGZHIQIJIANHUOQUSUOYOUBUXUYAOKANDAODEDAIMA,BINGZAIShadow DOMZHONGYINZANGTA,ZHEIYANGTAJIUBUHUIFANGAITA。ZHEISHININZHIXUCHULIXIANGGUANXINXI,LIRUSHIYONG<video>YUANSUSHIDEGAODU,KUANDUHEYUANWENJIANWEIZHI。

AG体育SHIYONGShadow DOMZUIKUDESHIQINGZHIYIJIUSHIMEIGESHILIDOUSHITAZIJIDEXIAOZIBAOHANSHIJIE。YINCI,RUGUONINZAIYUANSUZHONGBAOHANYANGSHIHEJIAOBEN,ZETAMENBUHUIYIWAIXIELOUBINGYINGXIANGYEMIANSHANGDERENHEQITANEIRONG。 

AG体育XIANGFAN,YEMIANSHANGQITADIFANGDECSSHEJavaScriptBUHUIYINGXIANGNINDEWebZUJIAN,CHULENINKENENGZHUANMENCHUANGJIANDEYANGSHIGUAGOUYIYUNXUWAIBUCSSDINGWEI。SUOYOUZHEIYIQIEDOUYIWEIZHEBUZAIDANXINMINGMINGKONGJIANDEIDHELEIMINGYIBIMIANCHONGTU。

RUGUONIXIANGKANKANYINGZIDOMDEYANGZI,NEIHENJIANDAN。QUEBAONINZHENGZAIYUNXINGChromeDEZUIXINANZHUANG,DAKAIKAIFAGONGJU,DANJICHILUNTUBIAOYIDAKAISHEZHI,RANHOUXUANZHONGBIAOJIWEIXIANSHIYONGHUDAILIYINYINGDOMDEKUANG:

RANHOU,DANGNINSHIYONGshadow DOMJIANCHARENHEYUANSUSHI,NINJIANGKANDAOQIWANZHENGDAIMA。TONGGUOJIANCHA<x-gangnam-style>DAIYOUHEBUDAIYOUYINYINGDOM DEYUANSULAISHISHI:http:  //html5-demos.appspot.com/gangnam

AG体育DUIYUYINGZIDOMDEWANZHENGGANGYAO,QINGCHAKAN:  Shadow DOMJIANJIE

模板

WOMENYIJINGJIESHAOLEZIDINGYIYUANSURUHEZHIGUANZHUXIANGGUANXINXI,ERSUOYOUSHENGYUDAIMADOUZAIshadow DOMZHONGBEIYINZANG。WebZUJIANZHONGDEMOBANBAOHANSHENGYUDAIMADESUOYOUBIAOSHIYUANSU。

AG体育ZUOWEIDINGYIBIAOJI<template>...</template>FANGZHIDEWebZUJIANDEDAIMADEYIBUFEN,ZAIZHEIXIEBIAOJIZHIJIANBAOHANZUJIANSUOXUDERENHEHTMLHECSS。

LIRU,CHAKANCHUANGJIAN<x-gangnam-style>WebZUJIANDEDAIMA。TADEKAISHI<template>BIAOJIWEIYUDI4XING,QIJIESHU</template>BIAOJIWEIYUDI201XING。ZAIZHEIXIEBIAOJIZHIJIAN,NINJIANGKANDAOFUZECHUANGJIANDINGWEIHEDONGHUADESUOYOUCSS,YIJIFANGZHISUOSHEJIDEMEIGETUXIANGDEHTML。 

HTML导入

HTMLDAORUYUNXUNINCAIYONGSHANGSHUSUOYOUNEIRONGBINGSHIJISHIQIZAININDEYEMIANSHANGYUNXING。WebZUJIANZAIWAIBUHTMLWENJIANZHONGDINGYI,YINCIXUYAODAORUGAIWENJIANCAINENGSHIZIDINGYIYUANSUQIZUOYONG。HTMLDAORUTONGGUO<link>BIAOJILAICHULI,NINKEYITONGGUOBIAOJIDAORUWAIBUCSSWENJIAN。

AG体育LIRU,ZAISHIYONG<x-gangnam-style>WebZUJIANZHIQIAN,NINBIXUDAORUDINGYITADEHTMLWENJIAN,RUXIASUOSHI:

1
<link rel="import" href="/components/x-gangnam-style.html">

浏览器支持和Polyfill

QIANZAIKEHUSHOUXIANSHIYONGTAMENDEXIANGFAFEICHANGXIYINREN,DANMUQIANLIULANQIZHICHIHAIBUKEXING。MUQIANDEZHICHIZHUANGTAIRUXIA:

http://jonrimmer.github.io/are-we-componentized-yet/

AG体育YUANSHENGZHICHIZHENGZAIWEIChrome,OperaHEFirefoxSHISHI,DANSHANGWEIWANCHENG。IEHESafariHAIMEIYOUGONGBUTAMENDEJIHUA,DANSHIKAOLVDAODADUOSHU  LIULANQIZUIZHONGJIANGZHICHIWebZUJIAN,QITALIULANQIKENENGHUIXIAOFANG。

XIANZAI,RUGUONINXIANGKAISHISHIYONGWebZUJIAN,ZEXUYAOSHIYONGQIZHONGYIGEKEYONGDEpolyfill。HAOXIAOXISHILIANGGEZUILIUXINGDEJIEJUEFANGANSHIYOUGoogleHEMozillaCHUANGJIANDE,YINCIWOMENKEYIQIDAIKANDAOYUBENJIZHICHIZUIZHONGYUNYINGFANGSHIDEYIZHIXING。

Google的聚合物

AG体育HENNANBUQINGXIANGYUSHIYONGPolymer,  YINWEIChromeXIANZAISHISHIYONGZUIGUANGFANDELIULANQI,NINKENENGHUIKAOLVZAIKAIFAGUOCHENGZHONGKAOLVRUHEJIANGGoogleZUJIANDAIMABIANRUSUOYIN。

AG体育PolymerFUDAILEYIGEWANZHENGDEYUGOUJIANWebZUJIANKU。TABAOKUOGONGNENGDAOXIANGDE“ JUHEWUHEXINYUANSU ”HEMIANXIANGSHEJIDE“ ZHIYUANSU”。

AG体育SHIYONGPolymerCHUANGJIANZIDINGYIYUANSUSHI,ERBUSHISHIYONG<element name="...">NINSHIYONG  DEGESHI  <polymer-element name="...">。

AG体育JUHEWUJIANGZIJIMIAOSHUWEICHUYU“KAIFAZHEYULAN”ZHUANGTAI,ERBUSHIJUEDUISHENGCHANJIUXU,DANTAMENYESHUO 

...尽管标签很多人已经在生产中使用聚合物取得了成功。

浏览器支持

  • Chrome Android

  • GE

  • JIANALI

  • HUOHU

  • IE 10+

  • Safari 6+

  • YIDONGSafari

RUGUONIXUYAOYINGHEIE9,GUJITAZHANJULE  1.9%  DAO  5.11%  DESHICHANGFENE,BUXINGDESHINIDUIPolymerLAISHUOYUNQIBUHAO。DANSHI,NINRENGRANKEYISHIYONGMozillaDEX-Tags。

Mozilla的X-Tags

X-TagsSHIYOUMozillaCHUANGJIANDEJavaScriptKU,MUQIAN,TABIPolymerGENGJUYOUSHI,YINWEITADELIULANQIZHICHIFANWEIGENGGUANG。RUGUOZHEISHININDEZHUYAOKAOLVYINSU,X-TagsKENENGSHININDESHOUXUAN。

浏览器支持

  • AG体育Firefox 5+ZHUOMIANHEYIDONG

  • Chrome 4+

  • Chrome Android 2.1+

  • Safari 4+ZHUOMIANHEYIDONGSHEBEI

  • IE9 +

  • AG体育Opera 11+ZHUOMIANHEYIDONGSHEBEI

IE8支持

XIANZAI,RUGUONINXUYAOZHICHIIE8,NEIMEYIHANDESHI,WebZUJIANKENENGBUSHIHENIN,YINWEIKEYONGDEpolyfillZHICHIIE9 +。GUJIIE8YONGHUDAYUEZAI2.1%  DAO3.82%ZHIJIAN,DANDANGRANRUGUONIZIJIDETONGJISHUJUYOUSUOBUTONG,NEIMENIBIXUDUINIDELIULANQIZHICHIYINGGAIYANSHENDUOJIUZUOCHUPANDUAN。

Ember.js和AngularJS组件

NINKEYIZHUNBEIGUODUDAOSHIYONGWebZUJIANDEYIZHONGKENENGFANGFASHIZANSHISHIYONGEmber.jsHUOAngularJS  。LIANGZHEDOUYOUZIJIDEZUJIANCHUANGJIANXITONG,BINGQIEDOUCHENGNUOZAIWANQUANKEYONGSHIZHUANHUANWEILIYONGBENJIWebZUJIANDAIMA。

结论

AG体育HANGZHOUWANGZHANSHEJIWOXIWANGNINXIHUANYUEDUZHEIXIEWebZUJIANDEGAISHUYIJININYINGGAIGUANZHUDEYUANYIN!HAIYOUHENDUONEIRONGKEYISHENRUYANJIU,DANSHIKAOLVDAOZHEIXIEJICHUZHISHI,WOMENYOUHENDUOJIHUIKEYIHUODEYOUGUANSHIJIGOUJIANZIDINGYIWebZUJIANDEJIAOCHENG。NIZENMEKAN?ZAISHENMEQINGKUANGXIANIHUIKANDAOZIJISHIYONGTAMEN?

ZUIXINANLI

联系电话 400-6065-301

JIANZHANZIXUN XINGXING-ZONGJIAN

TOUSU