如何在 FineUIMvc 中引用第三方 JavaScript 库
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版。
引入第三方颜色选择器
在 FineUIMvc 中使用第三方 JavaScript 遵循一定的约定,也非常简单。
下面以官网示例为例:http://fineui.com/demo_mvc/#/demo_mvc/ThirdParty/ColorPicker
这个例子引入了第三方的颜色选择器,配合 FineUIMvc 的 TextBox 控件一起使用。
我们来看下本页面的视图定义:
@{ViewBag.Title = "ThirdParty/ColorPicker";var F = @Html.F(); } @section head {<link rel="stylesheet" href="~/third-party/res/spectrum/spectrum.css" /><style>.mycolor .f-field-body {display: inline-block !important;width: 150px;margin-right: 5px;}.mycolor .sp-replacer {border-width: 0;padding: 0;position: absolute;top: 50%;margin-top: -10px;}.mycolor .sp-dd {display: none;}.mycolor .sp-preview {margin-right: 0;}</style> }@section body {@(F.SimpleForm().ID("SimpleForm1").BodyPadding(5).Width(450).EnableCollapse(true).ShowBorder(true).Title("表单").ShowHeader(true).Items(F.DatePicker().Required(true).Label("日期一").EmptyText("请选择日期一").ID("DatePicker1").ShowRedStar(true),F.TextBox().ID("tbxMyBox").CssClass("mycolor").Text("#f90").Required(true).ShowRedStar(true).Label("选择颜色"),F.Button().ID("btnSubmit").ValidateForms("SimpleForm1").Text("提交表单").OnClick(Url.Action("btnSubmit_Click"),new Parameter("dateValue", "F.ui.DatePicker1.getText()"),new Parameter("textValue", "F.ui.tbxMyBox.getValue()"))))}@section script {<script src="~/third-party/res/spectrum/spectrum.js" type="text/javascript"></script><script src="~/third-party/res/spectrum/i18n/jquery.spectrum-zh-cn.js" type="text/javascript"></script><script>F.ready(function () {var tbxMyBox = F.ui.tbxMyBox;tbxMyBox.bodyEl.spectrum({preferredFormat: "hex3",showInput: true,showPalette: true,palette: [["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],["#c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"],["#900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]]});});</script> }
整体上讲分为三大部分:
1. @section head:所有的 CSS 定义都放在这里面,包含第三方的 CSS 文件引用。
2. @section body:正文部分
3. @section script:脚本区域,放置第三方脚本引用和初始化脚本。
下面看下页面的初始化脚本:
F.ready(function () {var tbxMyBox = F.ui.tbxMyBox;tbxMyBox.bodyEl.spectrum({......}); });
1. F.ready 类似于 jQuery 的 $.ready 函数,在页面上所有的控件初始化完毕之后触发。
2. F.ui.tbxMyBox 用来获取页面上 id=tbxMyBox 的控件实例,在 FineUIMvc 的客户端脚本中,你可以通过这种方式获取所有的控件实例。如果你之前用过FineUI(开源版),知道还有另一种获取控件实例的方式:F('tbxMyBox'),为了兼容之前的代码,这种方式依然支持。
3. tbxMyBox.bodyEl 表示的是文本输入框的 input 标签,是一个 jQuery 对象。通过浏览器的调试工具,我们很容易的观察 bodyEl 所指向的元素:
常见错误
一个看似简单的任务,但是如果不了解其中的原理,也会经常出错,下面就列出网友经常犯错的地方。
重复引入jQuery库
错误代码:
@section script {<script src="~/res/jquery.js" type="text/javascript"></script><script src="~/third-party/res/spectrum/spectrum.js" type="text/javascript"></script><script src="~/third-party/res/spectrum/i18n/jquery.spectrum-zh-cn.js" type="text/javascript"></script><script>...</script> }
因为 FineUIMvc 的客户端库里已经引入了 jQuery,因此无需再引入 jQuery 库,重复引入 jQuery 会出现各种问题。
因此上面的代码要把 <script src="~/res/jquery.js" type="text/javascript"></script> 这一行删掉。
JavaScript引用位置错误
错误代码:
@section head {<link rel="stylesheet" href="~/third-party/res/spectrum/spectrum.css" /><script src="~/third-party/res/spectrum/spectrum.js" type="text/javascript"></script><script src="~/third-party/res/spectrum/i18n/jquery.spectrum-zh-cn.js" type="text/javascript"></script><script>...</script> }
这是另外一个常见的错误,将 JavaScript 代码放入 head 节中。之所以这样做是错误的,还要看布局视图的定义(_Layout.cshtml):
<!DOCTYPE html> <html> <head>@F.RenderCss()@RenderSection("head", false) </head> <body>@Html.AntiForgeryToken()@F.PageManager@RenderSection("body", true)@F.RenderScript()@RenderSection("script", false) </body> </html>
这是一个简化的布局视图,注意其中我们放置的顺序,@F.RenderScript() 用来渲染 FineUIMvc 所需要的 JavaScript 引用,所以第三方和自定义 JavaScript 引用都要放到这个的后面,也就是 script 节中(当然,如果你调整了布局视图的定义,就另当别论了)。
$.ready 还是 F.ready
错误代码:
@section script {<script src="~/third-party/res/spectrum/spectrum.js" type="text/javascript"></script><script src="~/third-party/res/spectrum/i18n/jquery.spectrum-zh-cn.js" type="text/javascript"></script><script>$.ready(function () {var tbxMyBox = F.ui.tbxMyBox;tbxMyBox.bodyEl.spectrum({...});});</script> }
这个错误也会经常出现,很多网友认为 DOMReady 时($.ready)应该就可以写初始化代码了。其实不然,因为你的初始化代码中包含对 FineUIMvc 控件的引用(F.ui.tbxMyBox),而在 DOMReady 时这些控件还没有初始化。
记着一点:自定义初始化脚本放到 F.ready() 里面。
小结
本篇文章讲解了如何引入第三方 JavaScript 库到 FineUIMvc 主导的页面中,这个过程遵循一定的规则,简单明了。同时也分析了网友常见的错误,它们分别是重复引入 jQuery 库,JavaScript 放置的位置不对,以及自定义脚本放到了 DOMReady 里面。
《FineUIMvc随笔》目录:http://www.cnblogs.com/sanshi/p/6473592.html
如何在 FineUIMvc 中引用第三方 JavaScript 库相关推荐
- 如何在VC中调用第三方lib库(step by step)
我们以调用Kvaser的库文件为例. 第三方的库一般会提供两个文件,一个是库文件.一个是头文件. Kvaser的库文件为canlib32.lib . 头文件为canlib.h 该库文件里,提供了一个名 ...
- markdown中引用代码_如何在Markdown中引用您JavaScript源代码
markdown中引用代码 您是否撰写有关Javascript和Typescript的技术文章? (Do you write technical articles about Javascript a ...
- 如何在HTML中引用jQuery函数库
要使用jQuery,我们要知道,jQuery是一个函数库,简单来讲就是一个后缀名为".js"的文件.我们可以在这里找到jQuery的最新版本文件:http://jquery.com ...
- C++:如何在VS中配置第三方动态库 【visual Studio 2017 + Opencv 】
当新建C++项目,一用到opencv库函数的时候,就得配置,次次配,不如就写个教程,怕下次又忘了-- 一 opencv安装,环境变量设置 首先你要从官网下载opencv啦,然后解压.(安装路径 eg ...
- (转)CocoaPods:管理Objective-c 程序中各种第三方开源库关联
在我们的iOS程序中,经常会用到多个第三方的开源库,通常做法是去下载最新版本的开源库,然后拖拽到工程中. 但是,第三方开源库的数量一旦比较多,版本的管理就非常的麻烦.有没有什么办法可以简化对第三方库的 ...
- Vue引入第三方JavaScript库和如何创建自己的Vue插件
一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '-/a' 2.import ' ...
- IOS 编程中引用第三方的方类库的方法及常见问题
方法一:直接复制全部源文件到项目中 这样的方法就是把第三方类库的全部源文件复制到项目中.直接把全部.h和.m文件拖到XCode项目中就可以. 注意: 1. 假设第三方类库引用了一些系统自带类库.那么在 ...
- Android NDK编译中在libs\armeabi中加入第三方so库文件的方法
Android NDK编译中在libs\armeabi中加入第三方so库文件的方法 假设要加入库文件的名字为libffmpeg.so文件 1.要在project\jni目录下新建一目录prebuilt ...
- maven引入hadoop_如何在maven中引用hadoop v2.3.0 jar?
我的pom具有以下依赖性 . org.apache.hadoop hadoop-mapreduce 2.3.0 但是,在eclipse中,我看到以下错误 . 容器'Maven Dependencies ...
- 如何在latex中引用文献
如何在latex中引用文献 在 LaTeX 中,你可以使用 BibTeX 或 BibLaTeX 来管理你的文献.下面是使用 BibTeX 的基本步骤: 在你的 LaTeX 文档中添加 BibTeX 引 ...
最新文章
- 入门NLP最优解:从项目实践轻松入手!
- linux降内核版本_ubuntu16.04降级内核版本至3.13.0-85
- 提高篇 第二部分 字符串算法 第4章 AC自动机
- Linux 服务器高级编程ET LT代码
- 2018年全国高校教师“Python编程、应用及华为大数据”培训班
- 【笔记】菜鸟教程-JavaScript
- 制造行业相关名词释义
- 深圳市 华为技能证书补贴攻略
- OTFS调制中的干扰分析
- uiautomatorviewer 双击闪退问题
- SpringSecurity整合Redis实现单点登录及认证返回json数据
- java画好看坦克_坦克大战第一节——画出自己的坦克(新手篇)
- 首页大广告展示——淘淘商城(十六)
- 你知道wps可以开启护眼模式吗?
- android之broadcastreceiver 耳机按键,Android 实时监听耳机按钮事件
- 新唐单片机选型手册_新唐8051标准系列单片机选型指南
- Beta分布(概率的概率)
- 海信android4.4.2电视怎么投屏,海信电视怎样设置投屏
- Roboware Studio详细安装教程 (ROS kinetic)以及简单使用
- Android系统分析—OTA升级
热门文章
- Picture exceed the maximum allowable rotation range
- lnmp 1g内存 mysql5.6_LNMP(php5.6+mysql5.6+nginx)
- ES6学习笔记九(函数的扩展)
- APK解包修改后,重新打包
- WORD的一个BUG
- 编码基本功:遇到打印问题怎么办
- 编译错误:vulkan/vulkan.h:没有那个文件或目录
- webRTC:jssip登录freeswitch的正确办法及代码
- 觉得清楚,跟说清楚写清楚,两回事
- SecureCRT的Backspace显示为^H的解决办法