EasyUI入门第一课

首先下载easyUI,最好是最新的,然后新建一个空web程序或是网站,不废话,怎么引用,代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JqueryEasyUI.WebForm1" %>



<!DOCTYPE html>



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>EasyUI入门第一课</title>

    <script src="jquery-easyui-1.4/jquery.min.js"></script>

    <script src="jquery-easyui-1.4/easyloader.js"></script><%--有这一行就不用加载下面的几行了,但是设置标签时需要使用easyloader.load(array,function)--%>

   <%-- <script src="jquery-easyui-1.4/jquery.easyui.min.js"></script>所有压缩后js

    <link href="jquery-easyui-1.4/themes/default/easyui.css" rel="stylesheet" />所有标签样式

    <link href="jquery-easyui-1.4/themes/icon.css" rel="stylesheet" />图标样式

    <script src="jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>--%>中文

    <script type="text/javascript">

        $(function () {

            //除了图片外,其他标签都已经加载完毕后执行,而body中的onload()事件是在所有的包括图片在内的加载完执行的事件。

            //$("#divDia").dialog();//js设置dialog

            //console.info($("#divDia"));

            easyloader.load(["dialog","messager"], function () {

                $("#divDia").dialog({modal: true});//modal是使用的window的属性

                $.messager.alert('Title','messager');//消息提示框

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <%--<div class="easyui-dialog" style="width:400px;height:200px;position:relative">dialog</div>--%><%--标签中设置dialog--%>

         <div  id="divDia"  style="width:400px;height:200px;position:relative">dialog</div>      


       <div id="p" class="easyui-panel" title="My Panel" style="width: 500px; height: 150px; padding: 10px; background: #fafafa;"              data-option="iconcls:'icon-remove'; closable:'true';collapsible:'true'; minimizable:'true'; maximizable:'true'">


      <p>panel content.</p>
      <p>panel content.</p>
    </div>
    <input type="button" value="001" onclick="$('#p').panel('open')" />
    <input type="button" value="002" onclick="$('#p').panel('close')" />
    <input type="button" value="003" onclick="$('#p').panel('distroy')" />

    <input class="easyui-combobox" name="language"
        data-options="
      url:'combobox_data.json',
      valueField:'id',
      textField:'text',
      panelHeight:'auto',
      onSelect:function(record){
      alert(record.text)
     }" />

 不过我对parser产生了疑问。。。 </div>

    </form>

</body>

</html>

 

你可能感兴趣的:(easyui)