Web前端开发之EasyUI

最新推荐文章于 2023-07-23 16:57:13 发布

愿有岁月可回首&

最新推荐文章于 2023-07-23 16:57:13 发布

阅读量5.8k

点赞数 7

分类专栏：【Web前端】文章标签： easyui web前端界面

本文链接：https://blog.csdn.net/lianjiangwei/article/details/43410819

版权

【Web前端】专栏收录该内容

12 篇文章 0 订阅

订阅专栏

EasyUI是一宗基于JQuery的用户界面插件集合.因此Jquery EasyUI的目的就是帮助Web开发者能够易如反掌的打造出功能丰富并且非常漂亮的UI界面.

EasyUI一个很大的好处就是,你不需要很懂JavaScript,也不需要对CSS样式有深刻的研究,你需要了解一些简单的HTML标签,就能随心所欲的设计精美的Web前端界面.

Jquery EasyUI的优势

1为创建现代化,互动,JavaScript应用程序,提供必要的功能.

2大大的节省开发的时间和资源

3一个字easy 两个字简单 but功能强大

4支持扩展,你可以根据自己的需求随意扩展控件

5完美的支持HTML5网页的编写

两种方法声明UI组件:

1直接在HTML脚本中声明组件

2编写JavaScript代码来创建组件

具体的代码示例大家可以到Jquery EasyUI官网上去看,这里就不再赘述了.

这里想重点讨论的是如何在VS2012中使用EasyUI去美化我们的页面。我们要准备就是VS2012和jquery-easyui-1.3.2，就以这个为例说明一下。

首先我们要创建项目，这个很简单，我以MVC3为例创建一个项目，如下图所示：

然后将我们准备好的jquery-easyui-1.3.2放到上图中的Scripts文件夹下，因为easyui整体不大，对一个程序的加载，不存在过多的影响，完成之后效果如下：

然后我们就可以使用了,使用的时候有一个问题要注意,那就是在使用EasyUI插件的页面添加必要的文件,比如样式表了,js文件了什么的,要想使用EasyUI封装好的控件,下图中的5个文件是必须要添加的

最后我们来写一个进度条的代码实例,视图页面代码如下:

<span style="font-size:18px;">@{
    Layout = null;
}

<!DOCTYPE html>

<link href="../../Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />
<link href="../../Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
<link href="../../Scripts/jquery-easyui-1.3.2/demo/demo.css" rel="stylesheet" />
<script src="../../Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script src="../../Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>

<script type ="text/javascript">
    $(function () {
        var value = $('#p').progressbar('getValue');
        if (value < 100) {
            value += Math.floor(Math.random() * 10);
            $('#p').progressbar('setValue', value);
            setTimeout(arguments.callee, 200);
        }
    })
   
</script>
<html>
<head>
    <title>EasyUITest</title>

</head>
<body>

    <div id="p" class="easyui-progressbar" data-options="value:0" style="width:400px;"></div>

</body>
</html></span>

运行结果

小结:这篇博客没有什么技术含量,但是对于如何在VS中使用EasyUI封装好的控件进行了描述,相信会给初学者带来些许帮助,当然进一步的学习需要各位朋友去EasyUI的官网上逛了,那里有各种控件的使用说明和参数说明,这样你们可以自己随意定制自己想要的效果.

愿有岁月可回首&

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
8
评论
Web前端开发之EasyUI

EasyUI是一宗基于JQuery的用户界面插件集合.因此Jquery EasyUI的目的就是帮助Web开发者能够易如反掌的打造出功能丰富并且非常漂亮的UI界面.EasyUI一个很大的好处就是,你不需要很懂JavaScript,也不需要对CSS样式有深刻的研究,你需要了解一些简单的HTML标签,就能随心所欲的设计精美的Web前端界面. Jquery EasyUI
复制链接

扫一扫