Chip是一个小块实体,可以包含照片,小标题和短信息.
以下代码显示了Framework7中使用的基本芯片HTML布局 :
<div class = "chip"> <div class = "chip-media"> <img src = "http://lorempixel.com/100/100/people/9/"> </div> <div class = "chip-label">Jane Doe</div> <a href = "#" class = "chip-delete"></a> </div>
上面的HTML布局包含下面列出的许多类 :
chips : 它是芯片容器.
chip-media : 这是可以包含图像,头像或图标的芯片媒体元素.这是可选的.
card-label : 它是芯片文本标签.
card-delete : 它是芯片的可选删除图标链接.
以下示例表示诸如专辑,卡片元素等实体以及照片和简要信息 :
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> <meta name = "apple-mobile-web-app-capable" content = "yes" /> <meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> <title>Chips HTML Layout</title> <link rel = "stylesheet" href = "https://img01.yuandaxia.cn/Content/img/tutorials/framework7/framework7.ios.min.css" /> <link rel = "stylesheet" href = "https://img01.yuandaxia.cn/Content/img/tutorials/framework7/framework7.ios.colors.min.css" /> <link rel = "stylesheet" href = "https://img01.yuandaxia.cn/Content/img/tutorials/framework7/framework7.material.min.css" /> <link rel = "stylesheet" href = "https://img01.yuandaxia.cn/Content/img/tutorials/framework7/framework7.material.colors.min.css" /> </head> <body> <div class = "views"> <div class = "view view-main"> <div class = "pages"> <div class = "page navbar-fixed"> <div class = "navbar"> <div class = "navbar-inner"> <div class = "center">Chips HTML Layout</div> </div> </div> <div class = "page-content"> <div class = "content-block-title">Chips With Text</div> <div class = "content-block"> <div class = "chip"> <div class = "chip-label">Chip one</div> </div> <div class = "chip"> <div class = "chip-label">Chip two</div> </div> </div> <div class = "content-block-title">Chips with icons</div> <div class = "content-block"> <div class = "chip"> <div class = "chip-media bg-blue"><i class = "icon icon-form-calendar"></i></div> <div class = "chip-label">Set Date</div> </div> <div class = "chip"> <div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div> <div class = "chip-label">Sent Mail</div> </div> </div> <div class = "content-block-title">Contact Chips</div> <div class = "content-block"> <div class = "chip"> <div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div> <div class = "chip-label">James Willsmith</div> </div> <div class = "chip"> <div class = "chip-media"><img src = "/framework7/images/pic2.jpg"></div> <div class = "chip-label">Sunil Narayan</div> </div> <div class = "chip"> <div class = "chip-media bg-pink">R</div> <div class = "chip-label">Raghav</div> </div> <div class = "chip"> <div class = "chip-media bg-teal">S</div> <div class = "chip-label">Sharma</div> </div> <div class = "chip"> <div class = "chip-media bg-red">Z</div> <div class = "chip-label">Zien</div> </div> </div> <div class = "content-block-title">Deletable Chips</div> <div class = "content-block"> <div class = "chip"> <div class = "chip-label">Chip one</div> <a href = "#" class = "chip-delete"></a> </div> <div class = "chip"> <div class = "chip-media bg-teal">S</div> <div class = "chip-label">Sharma</div> <a href = "#" class = "chip-delete"></a> </div> <div class = "chip"> <div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div> <div class = "chip-label">Sent</div> <a href = "#" class = "chip-delete"></a> </div> <div class = "chip"> <div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div> <div class = "chip-label">James Willsmith</div> <a href = "#" class = "chip-delete"></a> </div> <div class = "chip"> <div class = "chip-label">Chip two</div> <a href = "#" class = "chip-delete"></a> </div> <div class = "chip"> <div class = "chip-media bg-green">R</div> <div class = "chip-label">Raghav</div> <a href = "#" class = "chip-delete"></a> </div> </div> </div> </div> </div> </div> </div> <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script> <style> </style> <script> var myApp = new Framework7 ({ material: true }); var $$ = Dom7; $$('.chip-delete').on('click', function (e) { e.preventDefault(); var chip = $$(this).parents('.chip'); myApp.confirm('Do you want to delete this Chip?', function () { chip.remove(); }); }); </script> </body> </html>
让我们执行以下步骤,看看上面给出的代码如何工作 : 去;
将上面给出的HTML代码保存为服务器根文件夹中的 cards_html_layout.html 文件.
将此HTML文件打开为http://localhost/cards_html_layout.html,输出显示如下.
该示例代表小块中的复杂实体,例如相册,卡片元素,已发布图片,其中包含照片,标题字符串和简要信息.