手记

EasyUi学习

  1. 首先到http://www.w3cschool.cc/jeasyui/jqueryeasyui-tutorial.html 下载了手册。

  2. 再到  http://edu.51cto.com/course/course_id-1300.html   点击学习



    第一课 2014.12.27

    jQuery EasyUi入门

    到百度下载 插件包  解压放入站点目录  官方网站:http://www.jeasyui.com/ 外国站点慢

    

   特点:1 基于jQuery

         2.支持html5

         3.源代码加密,商业版付费499美元

         适合做后台,属于比较重的框架 内置jQuery2.0版本,不支持IE9.0以下版本。(IE6,7,8)

   同类产品 DWZ;  ExtJS


        demo 样例,可以全部删除

        themes 主题(外观),可以删除

        locale 语言包 可以删除中文以外的文件

     

3. 实例 弹出一个对话框,可以移动,可以最小化

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Basic Dialog - jQuery EasyUI Demo</title>

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"><!-- 默认主题中总样式表-->  

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"><!-- 默认各种图标-->  

<link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">

<script type="text/javascript" src="easyui/jquery.min.js"></script> <!--载入jQuery 主核心文件2.0不支持IE6,7,8-->

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script><!--载入Easyui主核心文件-->

        <script type="text/javascript" src="easyui/locale/easyui-lang-zh_cn.js"></script>  <!--载入语言包-->

</head>      

    <body>

        <!--div class ="easyui-dialog"     

             data-options="title:'我的窗口' ,collapsible:true ,iconCls:'icon-ok',onopen;function(){}">

             对话内容. </div-->

       <h2>基本弹出窗口</h2>

<p>点击下面的按钮来打开或关闭对话框。</p>

<div >

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('Open')">开打</a>

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('Close')">关闭</a>

</div>

<div id="dlg" class="easyui-dialog" title="基本对话框" data-options="iconCls:'icon-save' ,collapsible:true " >

对话内容

</div>

    </body>

    

</html>

第一课结束

0人推荐
随时随地看视频
慕课网APP