Web 前台开发的必备开源工具– Jquery Box

Web前端 码拜 7年前 (2014-12-10) 1298次浏览 0个评论

Winform程序员转 WEB大家都觉得困难、Web开发的效率会不比Winform开发低, 其实是对HTML, JS不熟, 记不住语法之类的问题; 另外代码量也非常庞大。
我希望能够有一个类似于Winform的工具箱,能够集成所有的Jquery插件,或其他Web 控件。 开发时需要用到什么控件,直接从工具箱去拖拽,他能够帮我生成控件的相关代码,于是 “JqueryBox” 由此诞生!

该工具是一个Visual Studio 插件项目,已经很好的与VS集成,因此各开发环节实现了无缝衔接
Web 前台开发的必备开源工具-- Jquery Box

项目由Jquery 插件管理器, 和Jquery工具箱组件
1. 插件管理器:
Web 前台开发的必备开源工具-- Jquery Box

将最常用到的控件添加到我们的JqueryBox中,添加Jquery 插件的属性以及代码模块,
代码模块中使用Razor 语法,因此比T4模块可读性更高,代码更简洁。

2.使用已经集成好的Jquery插件

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
        });
    </script>
</head>
<body>
    Hello world!
</body>
</html>

这是一个非常简单的空白Html页面,在使用JqueryBox之前, 需要事先在页面中代码以下代码 :

<script type="text/javascript">
        $(document).ready(function () {
        });
    </script>

因为JqueryBox将会把生成的Js代码插入到  Ready(funcction(){})中;

在Html代码中,鼠标移至需要插入控件的位置 ,点右键:
Web 前台开发的必备开源工具-- Jquery Box

打开Jquery工具箱,如下图:
Web 前台开发的必备开源工具-- Jquery Box
选需要用到的Jquery插件, 为其配置好相应属性,将自动生成插件相关的Js与 Html代码,根据事先定义好的代码模板。最终的结果如下图:
Web 前台开发的必备开源工具-- Jquery Box

写在最后: 该项目有一个设计缺陷, 如果Jquery UI 的属性是一个复杂类型, 比如  Jquery Button, 有一个 Icons属性, 他有 primary 和 secondary子属性,于是我将这个类型在项目中创建了一个 C# Struct:

    [TypeConverter(typeof(JqueryUIType.MySmartExpandableObjectConverter))]
    public struct JqueryDataType_icons
    {
        public string primary { get; set; }
        public string secondary { get; set; }
    }

这样使得 Jquery 插件与该项目偶合太高, 后面有了新的思路再改进。

该项目所用到的开源项目:RazorEngine, JsPaser。 分别用于Razor语法解析,以及Js代码解析。
项目下载地址:http://download.csdn.net/detail/hyblusea/5985107 (免积分)


CodeBye 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明Web 前台开发的必备开源工具– Jquery Box
喜欢 (0)
[1034331897@qq.com]
分享 (0)

文章评论已关闭!