简介
fundament-npm 是一个简单易用的npm包,主要是为Jquery或Zepto设计的UI框架,它提供了常用UI元素、表单验证和一些工具函数等。这个包被广泛运用在Web前端开发中,它在开发中提供了很大的便利性,让我们对于前端开发有了更深入的理解和应用。
安装和引入
安装和引入非常简单,只需要在项目的根目录输入以下命令即可完成安装:
--- ------- ------------- ------
安装后,可以在项目中通过以下方式引入:
--- - - ------------------ --- --------- - -----------------------------------
使用
常用UI元素
fundament-npm 提供了许多常用UI元素,如 buttons, forms, cards, modal and tooltips 等等。这里将展示如何使用其中的一些元素。
Buttons
button元素是Web前端开发中经常会用的元素,使用fundament-npm 中的button元素十分方便。使用时,只需要在HTML中添加以下标签:
------- ----------------- ---------------
注意:在使用前,需要确认样式表已经引入到了HTML页面中。
Forms
form元素也是Web前端开发中十分重要的元素。使用fundament-npm 中的form元素非常方便。使用时,只需要在HTML中添加以下标签:
------ ---- ------------------ ------ ----------- ------------------ ------ ------ ---- ------------------ ------ ----------- ----------------- ------ ------ ---- ------------------ ------ ----------- -------------------- ------ ---- --------- ------- ------------- ------------------------------- ------ -------
Cards
card元素是一个包含文本块和图片等的盒子,与其他元素相比具有更好的视觉效果。使用fundament-npm 中的card元素非常方便。使用时,只需要在HTML中添加以下标签:
---- ------------- ---- --------- ---- ------------------------------------------------------------------------------ ------------- ------- ------ ---- --------- --- -------------------- ---- ------------- -- ---------------------- ------- --- ---- -- --- -------- -- ----- ---- ---- ------- -------- -- ----- ------ -- --- ---- -- --- ---------- ------ ------
表单验证
表单验证是Web前端开发中一个重要的环节。fundament-npm 中也提供了一些表单验证相关的功能。下面将介绍如何使用其中的一些功能。
Email验证
使用Email验证时,只需要在HTML中添加以下标签:
---- ------------------ ------ ------------ ------------------- ------------------------ ------
Required验证
使用Required验证时,只需要在HTML中添加以下标签:
---- ------------------ ------ ----------- ------------------ --------------------------- ------
MinMax验证
使用MinMax验证时,只需要在HTML中添加以下标签:
---- ------------------ ------ ------------- ----------------- ---------------------- ------ -------- ------
工具函数
fundament-npm 中还提供了一些工具函数,下面将介绍其中的一些函数。
格式化日期
--- ---- - ------------------------------------------ --------------------- ----------- ------------------
输出结果为:
----------- ---------
取得URL参数
--- ------ - ----------------------------------- --------------------
输出结果为:
- --- ----- ----- ------- -
总结
在本文中,我们对fundament-npm进行了详细的介绍和使用教程。它为Web前端开发带来了很大的便利性,让我们在开发中体验到了更好的效果。虽然我们只是介绍了其中的一些元素和功能,但日后的学习中,将有更多的元素和功能的使用。希望本文对于前端开发人员有所帮助,谢谢。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562f681e8991b448e0c0c