zoukankan      html  css  js  c++  java

  • jQuery EasyUI入门

    什么是jQuery EasyUI？

    jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

    jQuery EasyUI的特点

    1、基于jquery用户界面插件的集合
    2、为一些当前用于交互的js应用提供必要的功能
    3、EasyUI支持两种渲染方式分别为javascript方式（如：$('#p').panel({...})）和html标记方式（如：class="easyui-panel"）
    4、支持HTML5（通过data-options属性）
    5、开发产品时可节省时间和资源
    6、简单，但很强大
    7、支持扩展，可根据自己的需求扩展控件
    8、目前各项不足正以版本递增的方式不断完善
    9、源代码加密，商业版付费
     
    jQuery EasyUI浏览器兼容性

    jQuery EasyUI1.3.5自带的jQuery版本为2.0，不再支持IE6,7,8这三款浏览器。

    jQuery EasyUI示例

    1. 在官网下载最新的版本包并解压；

    2. 在网页中至少引入下面文件：

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

    3. 完整代码：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Dialog - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Basic Dialog</h2>
    <p>Click below button to open or close dialog.</p>
    <div style="margin:20px 0;">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
    </div>
    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="400px;height:200px;padding:10px">
        The dialog content.
    </div>
</body>
</html>

    备注信息 

    jQuery EasyUI官网：http://www.jeasyui.com/

    jQuery EasyUI学习网站：

    EasyUI学习班：http://www.jeasyuicn.com/

    EasyUI中文社区：http://bbs.jeasyuicn.com/

    jQuery EasyUI中文网：http://www.jeasyui.net/tutorial/

    RUNOOB：http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html

    北风网：ibeifeng.com/

    瓢城Web俱乐部：http://www.ycku.com/
  • 相关阅读:
    博客美化
    hello world
    mysql数据库索引
    Golang：线程 和 协程 的区别
    计算机网络详解
    Redis持久化机制
    nginx 详解
    多级缓存的分层架构
    svn忽略文件不提交至服务器的方法
    Mysql 事务及其原理
  • 原文地址：https://www.cnblogs.com/ihuning/p/4706110.html
Copyright © 2011-2022 走看看