`

EasyUI

 
阅读更多

http://www.jeasyui.com/   http://www.jeasyui.com/download/index.php

 

0.Tree

 

<head>
      <link rel="stylesheet" type="text/css" href="UI/themes/gray/easyui.css" />
      <link rel="stylesheet" type="text/css" href="UI/themes/icon.css" />
     <script type="text/javascript" src="UI/jquery-1.4.4.min.js"></script>
     <script type="text/javascript" src="UI/jquery.easyui.min.js"></script>
     <script type="text/javascript">
         $(function() {
         // 异步动态加载树
         $("#tt").tree({
                 checkbox:false,
                 url: "DocumentTree/ArchivesClassificationTreeHandler.ashx?action=getTree",
                 onBeforeExpand: function(node, param) {// 获取该节点下其他数据
                     $('#tt').tree('options').url = "DocumentTree/ArchivesClassificationTreeHandler.ashx?action=getTree_Click&id=" + node.id;
                 },
                 onSelect: function(node) {
                     $("#tt").tree("expand", node.target);
                 },
                 onClick: function(node) {
                     alert(node.id + " " + node.text + " " + node.attributes.sjzbm);
                 }
             });
         })
     </script>
</head>
<body>
    <form id="Form1" runat="server">
    <div style=" width:220px;">
    <ul id="tt" animate="true"></ul>
    </div>
    </form>
</body>

 ArchivesClassificationTreeHandler.ashx

 

    string action = string.Empty;
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    ArchivesClassificationTreeBLL actbll = new ArchivesClassificationTreeBLL();
    public void ProcessRequest(HttpContext context)
    {
        HttpRequest request = context.Request;
        HttpResponse response = context.Response;
        response.ContentType = "text/html";
        action = request.Params["action"];
        codeHandle(context, request, response);
    }
    /// <summary>
    /// 统一跳转
    /// </summary>
    /// <param name="request"></param>
    /// <param name="response"></param>
    private void codeHandle(HttpContext context, HttpRequest request, HttpResponse response)
    {
        switch (action)
        {
            case "getTree":
                GetArchiveTree(request, response);
                break;
            case "getTree_Click":
                GetArchiveTree_Click(request, response);
                break;
            default:
                break;
        }
    }
    /// <summary>
    /// 初始化的时候
    /// </summary>
    /// <param name="request"></param>
    /// <param name="response"></param>
    public void GetArchiveTree(HttpRequest request, HttpResponse response)
    {
        List<TreeModel> tms = new List<TreeModel>();
        tms = actbll.ReturnArchivesClassificationTreeRootNode(false);
        string result = serializer.Serialize(tms).Replace("CHECKED", "checked");
        response.Write(result);
    }
    ///  根据条件获取检索树
    /// </summary>
    /// <param name="request"></param>
    /// <param name="response"></param>
    public void GetArchiveTree_Click(HttpRequest request, HttpResponse response)
    {
        List<TreeModel> tms = new List<TreeModel>();
        tms = actbll.ReturnArchivesClassificationTreeChildNode(request.QueryString["id"], false);
        string result = serializer.Serialize(tms).Replace("CHECKED", "checked");
        response.Write(result);
    }
  
    [Serializable] 
    public class TreeModel    //TreeModel与easyui的tree树节点node对应(如node.id)这些属性一般由数据库实体类(这里是ArchivesClassificationTreeEntity)为其赋值,将被JavaScriptSerializer转成json对象
    {
        private string _id = string.Empty;
        private bool _checked = false;
        private string _state = "open";
        private string _iconCls = "";
        private TreeAttributes _attributes = new TreeAttributes();
        private string _target = string.Empty;
        private string _text = string.Empty;
        private List<TreeModel> _children = new List<TreeModel>();
        private List<TreeModel> _parents = new List<TreeModel>();

        public string id
        {
            set { _id = value; }
            get { return _id; }
        }
        public bool CHECKED
        {
            set { _checked = value; }
            get { return _checked; }
        }
        public string iconCls
        {
            set { _iconCls = value; }
            get { return _iconCls; }
        }
        public string state
        {
            set { _state = value; }
            get { return _state; }
        }
        public TreeAttributes attributes
        {
            set { _attributes = value; }
            get { return _attributes; }
        }
        public string target
        {
            set { _target = value; }
            get { return _target; }
        }
        public string text
        {
            set { _text = value; }
            get { return _text; }
        }
        public List<TreeModel> children
        {
            set { _children = value; }
            get { return _children; }
        }
        public List<TreeModel> parents
        {
            set { _parents = value; }
            get { return _parents; }
        }
    }

    //TreeModel的attributes属性，可能在easyui的node.attributes用到的属性

(如ode.attributes.attrval)这些属性一般由数据库实体类(这里是ArchivesClassificationTreeEntity)为其赋值
public class TreeAttributes
    {
        private string _attrval = string.Empty;//需要的参数，可以自己添加
        private bool _existChildren = false;//是否存在子节点
        private bool _addtab = false;//是否在右边添加tabs，暂时作废
        private bool _isdel = true;
        private bool _isupdata = true;
        private bool _isRole = true;
        private bool _isDept = true;//组织机构树节点是否是部门节点
        private string _nodeType = string.Empty;//模板树节点类型
        private string _nodeCrtName = string.Empty;//模板树节点创建人
        private string _cnt = "";
        private string _foldername = "";
        private string _tabName = string.Empty;
        private string _fjdid = string.Empty;
        private string _haschild = string.Empty;
        private string _nodeLevel = string.Empty;
        private string _sjzbm = string.Empty;
        private string _sjcbm = string.Empty;
        private string _jdzdm = string.Empty;
        private string _jddm = string.Empty;

        public string haschild
        {
            set { _haschild = value; }
            get { return _haschild; }
        }
        public string fjdid
        {
            set { _fjdid = value; }
            get { return _fjdid; }
        }
        public string tabName
        {
            get
            {
                return _tabName;
            }
            set
            {
                _tabName = value;
            }
        }
        private string _url = "about:blank";
        public string url
        {
            get { return _url; }
            set { _url = value; }
        }
        public string cnt
        {
            get { return _cnt; }
            set { _cnt = value; }
        }
        public string foldername
        {
            get { return _foldername; }
            set { _foldername = value; }
        }
        public bool isRole
        {
            get { return _isRole; }
            set { _isRole = value; }
        }

        public string attrval
        {
            set { _attrval = value; }
            get { return _attrval; }
        }
        public bool existChildren
        {
            set { _existChildren = value; }
            get { return _existChildren; }
        }
        public bool addtab
        {
            set { _addtab = value; }
            get { return _addtab; }
        }
        public bool isdel
        {
            set { _isdel = value; }
            get { return _isdel; }
        }
        public bool isupdata
        {
            set { _isupdata = value; }
            get { return _isupdata; }
        }
        public bool isdept
        {
            set { _isDept = value; }
            get { return _isDept; }
        }
        public string nodeType
        {
            set { _nodeType = value; }
            get { return _nodeType; }
        }
        public string nodeCrtName
        {
            set { _nodeCrtName = value; }
            get { return _nodeCrtName; }
        }
        public string nodeLevel
        {
            set { _nodeLevel = value; }
            get { return _nodeLevel; }
        }
        public string sjzbm
        {
            set { _sjzbm = value; }
            get { return _sjzbm; }
        }
        public string sjcbm
        {
            set { _sjcbm = value; }
            get { return _sjcbm; }
        }
        public string jdzdm
        {
            set { _jdzdm = value; }
            get { return _jdzdm; }
        }
        public string jddm
        {
            set { _jddm = value; }
            get { return _jddm; }
        }
    }
 

 

    [Serializable]   //数据库实体类
    public class ArchivesClassificationTreeEntity
    {
        private string _JDID = string.Empty;
        /// <summary>
        /// 节点ID
        /// </summary>
        public string JDID
        {
            get { return _JDID; }
            set { _JDID = value; }
        }

        private string _JDMC = string.Empty;
        /// <summary>
        /// 节点名称
        /// </summary>
        public string JDMC
        {
            get { return _JDMC; }
            set { _JDMC = value; }
        }

        private string _JDDM = string.Empty;
        /// <summary>
        /// 节点代码
        /// </summary>
        public string JDDM
        {
            get { return _JDDM; }
            set { _JDDM = value; }
        }

        private string _FJDID = string.Empty;
        /// <summary>
        /// 父节点ID
        /// </summary>
        public string FJDID
        {
            get { return _FJDID; }
            set { _FJDID = value; }
        }

        private string _JDCC = string.Empty;
        /// <summary>
        /// 节点层次
        /// </summary>
        public string JDCC
        {
            get { return _JDCC; }
            set { _JDCC = value; }
        }

        private int _JDPX;
        /// <summary>
        /// 节点排序
        /// </summary>
        public int JDPX
        {
            get { return _JDPX; }
            set { _JDPX = value; }
        }

        private string _JDAJBM = string.Empty;
        /// <summary>
        /// 节点案卷表名
        /// </summary>
        public string JDAJBM
        {
            get { return _JDAJBM; }
            set { _JDAJBM = value; }
        }

        private string _JDWJBM = string.Empty;
        /// <summary>
        /// 节点文件表名
        /// </summary>
        public string JDWJBM
        {
            get { return _JDWJBM; }
            set { _JDWJBM = value; }
        }

        private string _JDLB = string.Empty;
        /// <summary>
        /// 节点类别（案卷2  文件1）
        /// </summary>
        public string JDLB
        {
            get { return _JDLB; }
            set { _JDLB = value; }
        }

        private string _JDZDM = string.Empty;
        /// <summary>
        /// 对应条件字段名
        /// </summary>
        public string JDZDM
        {
            get { return _JDZDM; }
            set { _JDZDM = value; }
        }

        private string _HTTPDZ = string.Empty;
        /// <summary>
        /// http通信用地址
        /// </summary>
        public string HTTPDZ
        {
            get { return _HTTPDZ; }
            set { _HTTPDZ = value; }
        }

        private string _SOCKET = string.Empty;
        /// <summary>
        /// SOCKET通信用地址
        /// </summary>
        public string SOCKET
        {
            get { return _SOCKET; }
            set { _SOCKET = value; }
        }

        private string _JDLJ = string.Empty;
        /// <summary>
        /// 原文绝对路径
        /// </summary>
        public string JDLJ
        {
            get { return _JDLJ; }
            set { _JDLJ = value; }
        }

        private string _SFXS = string.Empty;
        /// <summary>
        /// 是否显示（0非  1是）
        /// </summary>
        public string SFXS
        {
            get { return _SFXS; }
            set { _SFXS = value; }
        }

        private string _CJR = string.Empty;
        /// <summary>
        /// 创建人
        /// </summary>
        public string CJR
        {
            get { return _CJR; }
            set { _CJR = value; }
        }

        private string _BZH = string.Empty;
        /// <summary>
        /// 备注
        /// </summary>
        public string BZH
        {
            get { return _BZH; }
            set { _BZH = value; }
        }
    }

  ashx里面的ReturnArchivesClassificationTreeRootNode(创建根节点)方法，及创建根节点下的第一层档案树节点方法

 ArchivesClassificationTreeDAL actdal = new ArchivesClassificationTreeDAL();

        /// <summary>
        /// 创建根节点
        /// </summary>
        /// <param name="isPermission">是否根据权限读取数据</param>
        /// <returns>TreeModel实体List</returns>
        public List<TreeModel> ReturnArchivesClassificationTreeRootNode(bool isPermission)
        {
            List<TreeModel> tms = new List<TreeModel>();

            List<ArchivesClassificationTreeEntity> lacte = new List<ArchivesClassificationTreeEntity>();
            lacte = actdal.GetArchivesClassificationTreeNode("0");

            foreach (ArchivesClassificationTreeEntity acte in lacte)
            {
                TreeModel tm = new TreeModel();
                tm.id = acte.JDID;
                tm.text = acte.JDMC;

                if (!string.IsNullOrEmpty(acte.JDAJBM))
                {
                    tm.attributes.sjzbm = acte.JDAJBM;
                    tm.attributes.sjcbm = acte.JDWJBM;
                }
                else
                {
                    tm.attributes.sjzbm = acte.JDWJBM;
                }

                tm.state = "open";
                tm.iconCls = "icon-tree-folder";

                ReturnArchivesClassificationTreeFirstLevelNode(tm, tm.id, isPermission);
                tms.Add(tm);
            }

            return tms;
        }

        /// <summary>
        /// 创建根节点下的第一层档案树节点
        /// </summary>
        /// <param name="tm_parent">父节点实体</param>
        /// <param name="parentNodeValue">父节点Id</param>
        /// <param name="isPermission">是否根据权限读取数据</param>
        public void ReturnArchivesClassificationTreeFirstLevelNode(TreeModel tm_parent, string parentNodeValue, bool isPermission)
        {
            List<ArchivesClassificationTreeEntity> lacte = new List<ArchivesClassificationTreeEntity>();

            if (!isPermission)
            {
                lacte = actdal.GetArchivesClassificationTreeNode(parentNodeValue);
            }
            else
            {
                //根据登录用户权限读取树节点
            }

            foreach (ArchivesClassificationTreeEntity acte in lacte)
            {
                TreeModel tm_child = new TreeModel();
                tm_child.id = acte.JDID;
                tm_child.text = acte.JDMC;
                if (!string.IsNullOrEmpty(acte.JDAJBM))
                {
                    tm_child.attributes.sjzbm = acte.JDAJBM;
                    tm_child.attributes.sjcbm = acte.JDWJBM;
                }
                else
                {
                    tm_child.attributes.sjzbm = acte.JDWJBM;
                }
                tm_child.state = "open";
                tm_child.iconCls = "icon-tree-folder";

                if (IsHasChildren(tm_child.id))
                {
                    tm_child.state = "closed";
                }
                else
                {
                    tm_child.state = "open";
                }
                tm_parent.children.Add(tm_child);
            }
        }

 ashx里的ReturnArchivesClassificationTreeChildNode(返回当前选择节点下的所有子节点)方法

/// <summary>
        /// 返回当前选择节点下的所有子节点
        /// </summary>
        /// <param name="parentNodeValue">父节点Id</param>
        /// <param name="isPermission">是否根据权限读取数据</param>
        /// <returns>TreeModel实体List</returns>
        public List<TreeModel> ReturnArchivesClassificationTreeChildNode(string parentNodeValue, bool isPermission)
        {
            List<TreeModel> tms = new List<TreeModel>();

            List<ArchivesClassificationTreeEntity> lacte = new List<ArchivesClassificationTreeEntity>();

            if (!isPermission)
            {
                lacte = actdal.GetArchivesClassificationTreeNode(parentNodeValue);
            }
            else
            {
                //根据登录用户权限读取树节点
            }

            foreach (ArchivesClassificationTreeEntity acte in lacte)
            {
                TreeModel tm = new TreeModel();
                tm.id = acte.JDID;
                tm.text = acte.JDMC;
                if (!string.IsNullOrEmpty(acte.JDAJBM))
                {
                    tm.attributes.sjzbm = acte.JDAJBM;
                    tm.attributes.sjcbm = acte.JDWJBM;
                }
                else
                {
                    tm.attributes.sjzbm = acte.JDWJBM;
                }
                tm.state = "open";
                tm.iconCls = "icon-tree-folder";

                if (IsHasChildren(tm.id))
                {
                    tm.state = "closed";
                }
                else
                {
                    tm.state = "open";
                }

                tms.Add(tm);
            }

            return tms;
        }

DAL里的GetArchivesClassificationTreeNode方法

         /// <summary>
        /// 读取节点下所有子节点
        /// 如果读取根节点，则参数为0
        /// </summary>
        /// <param name="nodeId">父节点ID</param>
        /// <returns>ArchivesClassificationTreeEntity  List</returns>
        public List<ArchivesClassificationTreeEntity> GetArchivesClassificationTreeNode(string parentNodeId)
        {
            List<ArchivesClassificationTreeEntity> lacte = new List<ArchivesClassificationTreeEntity>();

            string sqlStr = "select * from yg_bz_das where fjdid = ? and sfxs = '1' and scbz = '0' order by jdpx";
            OleDbParameter[] param = new OleDbParameter[]{
                new OleDbParameter("",OleDbType.VarChar)
            };
            param[0].Value = parentNodeId;

            OleDbDataReader odr = OledbHelper.ExecuteReader(CommandType.Text, sqlStr, param);
            while (odr.Read())
            {
                ArchivesClassificationTreeEntity acte = new ArchivesClassificationTreeEntity();
                acte.JDID = odr["JDID"].ToString();
                acte.JDMC = odr["JDMC"].ToString();
                acte.FJDID = odr["FJDID"].ToString();
                acte.JDCC = odr["JDCC"].ToString();
                acte.JDAJBM = odr["JDAJBM"].ToString();
                acte.JDWJBM = odr["JDWJBM"].ToString();
                acte.JDLB = odr["JDLB"].ToString();
                acte.HTTPDZ = odr["HTTPDZ"].ToString();
                acte.SOCKET = odr["SOCKET"].ToString();
                acte.JDLJ = odr["JDLJ"].ToString();
                acte.CJR = odr["CJR"].ToString();
                acte.JDDM = odr["JDDM"].ToString();
                acte.JDZDM = odr["JDZDM"].ToString();

                acte.BZH = odr["BZH"].ToString();


                lacte.Add(acte);
            }

            odr.Dispose();

            return lacte;
        }

 

 

1.Accordion

 

<head>
    <title>Accordion - jQuery EasyUI Demo</title>
     <link href="jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
     <link href="jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
     <link href="jquery-easyui-1.2.4/demo/demo.css" rel="stylesheet" type="text/css" />
     <script src="jquery-easyui-1.2.4/jquery-1.6.min.js" type="text/javascript"></script>
     <script src="jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
     <script type="text/javascript">
     function select(){
     $("#aa").accordion('select','selected属性表示初始选择版面')
     }   //选择某个版面,第二个参数是某个版面的title属性值
     var num=1;
     function add(){
     $("#aa").accordion('add',{title:'title'+num,content:'<input type="button" value="确定"/>'});
     num++;     //添加一个版面，版面的title及其内容
     }
     function remove(){
     var pp=$("#aa").accordion('getSelected');   //获得当前选的版面
     if(pp){
        var theTitle=pp.panel("options").title;  //当前选的版面的title
        $("#aa").accordion('remove',theTitle);  //删除某个版面
       }
     }
     </script>   
</head>
  
<div style="margin: 10px 0;">	
<a href="#" class="easyui-linkbutton" onclick="select()">Select</a>
		<a href="#" class="easyui-linkbutton" onclick="add()">Add</a>
		<a href="#" class="easyui-linkbutton" onclick="remove()">Remove</a>
	</div>

<div id="aa" class="easyui-accordion" style="width:700px; height:500px;">
<div title="title属性必须有,title属性值就是每个版面的标题" iconCls="icon-ok" style="overflow:auto;padding:10px;">AAA</div>
<div title="iconCls属性就是每个版面标题前面的图标类型" iconCls="icon-reload" style="padding:10px;">BBB</div>
<div title="上面的easyui-accordion类必须有,是整个accordion的样式" selected="true" style="padding:10px;">CCC</div>
<div title="selected属性表示初始选择版面" style="padding:10px;">DDD</div>
<div title="上面aa里定义的width:700px; height:500px就是每个版面的宽和高" style="padding:10px;">EEE</div>
</div>

 

2.Calendar

<div class="easyui-calendar" style="width:180px;height:180px;"></div>

 

3.Combo

 

<script type="text/javascript">
     $(document).ready(function(){
     //下拉框是否不能为空，是否可编辑
     $("#cc").combo({required:true,editable:false});
     //将div里的内容添加到下拉框中
     $("#sp").appendTo($("#cc").combo("panel"));
     //选择选项后取得所选项的键值，及隐藏下拉框
     $('#sp input').click(function(){
				var v = $(this).val();
				var s = $(this).next('span').text();
				$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
			});
     })
     </script>
<select id="cc"></select>
	<div id="sp">
		<div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div>
		<input type="radio" name="lang" value="01"/><span>Java</span><br/>
		<input type="radio" name="lang" value="02"/><span>C#</span><br/>
		<input type="radio" name="lang" value="03"/><span>Ruby</span><br/>
		<input type="radio" name="lang" value="04"/><span>Basic</span><br/>
		<input type="radio" name="lang" value="05"/><span>Fortran</span>
	</div>

 

4.Layout

 

<body class="easyui-layout">  <!--整个页面都是layout-->
    <div region="north" split="true" title="North" border="false" style="height:120px;padding:10px;">north region</div>
	<div region="west" split="true" title="West" style="width:100px;padding:10px;">west content</div>
	<div region="center"  title="Main" style="padding:10px;">center region</div>
	<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
	<div region="south" title="South" border="false" style="height:120px;padding:10px;">south region</div>
<!--以上region表示每个div的位置，split表示该div是否可以伸缩，title表示每个div的标题 有title才有隐藏内容的功能-->
</body>
<!--只在某个范围内是layout，必须设置该div的width和height-->
<div class="easyui-layout" style="width:700px;height:400px;">
    <div region="north" split="true" title="North" border="true" style="height:120px;padding:10px;">north region</div>
	<div region="west" split="true" title="West" style="width:100px;padding:10px;">west content</div>
	<div region="center"  title="Main" style="padding:10px;">center region</div>
	<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
	<div icon="icon-reload" region="south" title="South" border="true" style="height:120px;padding:10px;">south region</div>
<!--icon="icon-reload"表示title标题前面的图标-->
	</div>

 

<div class="easyui-layout" style="width:700px;height:400px;">
    <div region="north" split="true" title="North" border="true" style="height:120px;padding:10px;">north region</div>
	<div region="west" split="true" title="West" style="width:100px;padding:10px;">west content</div>
	<div region="center"  title="Main" style="padding:10px;">
<!--位于某个div里的layout 设置fit属性可以自动调整大小，除了center外其他什么west east south等最好设置width和height center会根据它们的高宽自动设置合适的大小-->
	<div class="easyui-layout" fit="true">
	<div region="center">位于某个div里的layout</div>
	<div region="east" split="true" style="width:100px;">没有title，可以伸缩，像可以拉拖的表格一样</div>
	</div>
	</div>
	<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
	<div region="south" icon="icon-reload" title="South" border="true" style="height:120px;padding:10px;">south region</div>
	</div>

 

5.Tabs

 

<script type="text/javascript">
		$(function(){
			$('#tt').tabs({
				tools:[{
					iconCls:'icon-add',
					handler: function(){
						alert('add');
					}
				},{
					iconCls:'icon-save',
					handler: function(){
						alert('save');
					}
				}]
			});
		});
//以上给tabs右上角添加工具按钮(这里是添加和保存 及它们的handler处理函数)		
		var index = 0;
		function addTab(){
			index++;
			$('#tt').tabs('add',{
				title:'New Tab ' + index,
				content:'Tab Body ' + index,
				iconCls:'icon-save',
				closable:true
			});
		}
//以上是添加tab的按钮的函数
		function getSelected(){
			var tab = $('#tt').tabs('getSelected');
			alert('Selected: '+tab.panel('options').title);
		}
//以上是取得所选tab的按钮的函数
		function update(){
			index++;
			var tab = $('#tt').tabs('getSelected');
			$('#tt').tabs('update', {
				tab: tab,
				options:{
					title:'new title'+index,
					iconCls:'icon-save'
				}
			});
		}
//以上是更新当前所选tab的按钮的函数(这里是更新tab的title和title前图标)
	</script>
 

 

<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a>
	<a class="easyui-linkbutton" href="javascript:void(0)" onclick="getSelected()">getSelected</a>
	<a class="easyui-linkbutton" href="javascript:void(0)" onclick="update()">Update</a><br/><br/>
<!--整个tabs的class必须为easyui-tabs，必须设置width和height，plain表示tabs的标题部分有没有背景色-->
	<div id="tt" class="easyui-tabs" plain="true" style="width:700px;height:250px;">
		<div title="Tab1" style="padding:20px;">
		</div>
<!--closable表示该tab能否关闭，cache表示该tab启不启动缓存-->
		<div title="Tab2" closable="true" style="padding:20px;" cache="false" href="tabsUI.aspx">
			This is Tab2 with close button.
		</div>
		<div title="Tab3 with iframe" closable="true">
			<iframe scrolling="yes" frameborder="0"  src="http://www.google.com" style="width:100%;height:100%;"></iframe>
		</div>
<!--包含tabs的tab-->
		<div title="Tab5 with sub tabs" closable="true" iconCls="icon-cut" style="padding:10px;">
			<div class="easyui-tabs" fit="true" plain="false" style="height:100px;width:300px;">
				<div title="Title1" icon="icon-add" style="padding:10px;">Content 1</div>
				<div title="Title2" style="padding:10px;">Content 2</div>
				<div title="Title3" style="padding:10px;">Content 3</div>
			</div>
		</div>
	</div>
  

6.Messager

 

 <script type="text/javascript">
     $(document).ready(function(){
     $.messager.show({
				title:'My Title',
				msg:'将在5秒钟后关闭'+'<br/><a href="http://www.baidu.com">去百度</a>'+
				'<br/><table rules="all"><tr><td>AAA</td><td>BBB</td></tr><tr><td>CCC</td><td>DDD</td></tr></table>'+
				'<br/><br/><br/><br/><br/>',
				timeout:5000,
				showType:'slide',
			});
		})
     </script>
//以上是右下角的message，timeout默认是4000 为0时将不会自动关闭，showType的可选项有slide,fade,show，messge的大小随msg的大小自动调整
 
   <script type="text/javascript">
     $(document).ready(function(){
     $.messager.alert('My Title','Here is a message!');
     $.messager.alert('My Title','Here is a error message!','error');
     $.messager.alert('My Title','Here is a info message!','info');
     $.messager.alert('My Title','Here is a question message!','question');
     $.messager.alert('My Title','Here is a warning message!','warning');
//以上是各种模态提示
     $.messager.confirm('My Title', 'Are you confirm this?', function(r){
				if (r){
					alert('confirmed:'+r);
					location.href = 'http://www.google.com';
				}
			});
//模态的确定提示
     $.messager.prompt('My Title', 'Please type something', function(r){
				if (r){
					alert('you type:'+r);
				}
			});
//模态的prompt
     })
     </script>
分享到：
| Ajax扩展控件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    easyUI例子_easyui1.4.4_一套EASYUI的经典后台管理模板_jquery_

    EasyUI 是一个基于 jQuery 的前端框架，主要用于快速构建用户界面，尤其适用于后台管理系统。这个"easyUI例子_easyui1.4.4"压缩包提供了一套使用 EasyUI 1.4.4 版本的经典后台管理模板，适用于开发人员快速搭建功能...

    jQuery EasyUI 1.3.2 离线API简体中文版

    近期由于参与的一个Web系统项目前台使用了EasyUI作为Web解决方案，所以查了一下EasyUI的相关资料，发现离线的中文API不太多，而且版本都比较老，索性自己讲EasyUI官网给扣下来，然后做了翻译，文档是2月份过年的时候...

    jquery-easyui-themes.rar_easyui 主题_easyui主题_html_jquery_jquery-e

    《jQuery EasyUI 主题详解与应用》 jQuery EasyUI 是一款基于 jQuery 的前端框架，它提供了丰富的组件和易于使用的API，极大地简化了Web界面的开发。而其核心魅力之一，便是丰富的主题系统，使得开发者可以轻松定制...

    jquery-easyui.zip_easyui框架_html 框架_jquery-easyui

    EasyUI 是一个基于 jQuery 的轻量级前端框架，它为开发者提供了一系列的组件和插件，使得构建交互式用户界面变得更加便捷。这个压缩包“jquery-easyui.zip”包含了使用 EasyUI 实现的一个HTML框架，它主要用于简化...

    EasyUI InsdepTheme EasyUI的皮肤美化 免费版

    EasyUI InsdepTheme是一款基于EasyUI的皮肤美化版本，它为开发者提供了更加美观且自定义的界面风格。EasyUI是一个轻量级的JavaScript框架，主要用于构建Web应用的用户界面，它基于jQuery，提供了丰富的组件和易用的...

    easyui1000个ico图标

    EasyUI 是一个基于 jQuery 的前端开发框架，专为构建用户界面而设计。它提供了一套完整的组件和样式，包括布局、表格、对话框、菜单、按钮等，使得开发者能够快速地构建出美观且功能丰富的 web 应用。在这个“easyui...

    jquery-easyui-1.4.5_easyuiapi_

    《jQuery EasyUI 1.4.5 API详解》 jQuery EasyUI 是一款基于 jQuery 的前端框架，它提供了丰富的用户界面组件，使得开发者可以快速构建出美观且功能强大的Web应用。在本文中，我们将深入探讨jQuery EasyUI 1.4.5...

    EasyUI textbox事件，EasyUI textbox input events

    在使用UasyUI的时候，在一般的input输入框上添加class="easyui-textbox"属性，则在该输入框上添加的事件将不起作用，但是如果去掉class="easyui-textbox"变成一般的input则起作用。 控件的生成原理，它是把你原有的...

    easyui官方离线文档

    EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，帮助开发者快速构建用户界面。这个"easyui官方离线文档"包含了丰富的资源，包括demo、源码、演示以及针对现代前端框架如Vue、Angular和React的...

    全套EasyUI示例源码

    EasyUI 是一款基于 jQuery 的 UI 组件库，它提供了丰富的界面元素和布局功能，使得开发者能够快速构建出美观且响应式的 web 应用程序。"全套EasyUI示例源码"是一个包含三十多个组件的完整示例集合，可以帮助开发者...

    easyui的入门教程

    EasyUI 是一个基于 jQuery 的前端框架，用于快速构建用户界面。它简化了网页开发过程，提供了丰富的组件和统一的API接口，使得开发者可以更专注于业务逻辑而非页面展示的细节。这个"jQuery_EasyUI_v1.3.5.exe"文件很...

    uimaker分享-免费漂亮easyui主题eayui皮肤easyui组件美化模版黑色+蓝色html后台管理模版

    EasyUI 是一个基于 jQuery 的轻量级前端框架，它提供了丰富的组件和易于使用的主题系统，使得开发者能够快速构建用户界面。本套分享的资源是一组免费且漂亮的 EasyUI 主题，包括黑色和蓝色两种风格，适用于后台管理...

    EasyUI 多层导航框架

    【EasyUI 多层导航框架】是一个基于JavaScript和CSS的前端框架，专为构建具有高效用户体验的Web应用程序而设计。EasyUI提供了一系列组件，包括布局、表格、对话框、菜单、按钮、表单等，而多层导航框架则是其在实际...

    easyui-textbox和easyui-combobox的onchange事件响应实例

    在前端开发中，EasyUI 是一个基于 jQuery 的 UI 框架，它提供了一系列美观、易用的组件，用于构建用户界面。在这个实例中，我们将深入探讨 EasyUI 中的两个重要组件：`easyui-textbox` 和 `easyui-combobox`，以及...

    EasyUI 完整源代码 1.5.0

    EasyUI 是一个基于 jQuery 的前端框架，用于快速开发简洁、美观的Web应用程序界面。这个压缩包包含的是EasyUI 1.5.0的完整源代码，具有官方授权，确保了开发者能够深入理解并自定义其组件，而不受压缩代码的困扰。 ...

    最新EasyUI扁平化

    EasyUI是中国程序员喜爱的一款基于jQuery的前端用户界面框架，它为快速开发Web应用提供了丰富的组件和功能。"最新EasyUI扁平化"标题暗示我们关注的是EasyUI的一个更新版本，可能着重于现代扁平化设计趋势，这在当前...

    easyui视频教程(6)

    EasyUI 是一个基于 jQuery 的轻量级用户界面框架，它为开发者提供了丰富的组件，包括布局、表格、对话框、树形菜单、表单等，帮助快速构建美观且响应式的 web 应用程序。"easyui 视频教程(6)"显然是针对初学者设计的...

    简单的easyui页面

    EasyUI是一种基于JavaScript和CSS的前端框架，专为构建用户界面而设计，尤其适用于后台管理系统。这个名为"简单的easyui页面"的项目提供了一个简化版的EasyUI页面，非常适合用作前台UI界面，以实现简洁、高效的用户...

    EasyUI登录页面.zip

    EasyUI是一种轻量级的前端开发框架，专为简化网页应用和后台管理系统界面设计而创建。这个名为"EasyUI登录页面.zip"的压缩包文件包含了使用EasyUI框架构建的一个登录页面的相关资源。EasyUI框架主要基于jQuery，它...

    easyUI时间控件使用

    在本文中，我们将深入探讨如何在EasyUI框架中有效地使用时间控件，以及如何解决时间格式化的问题。EasyUI是一个基于jQuery的轻量级前端开发框架，它提供了一系列丰富的组件，帮助开发者快速构建用户界面。时间控件是...

Magicbox
Global site tag (gtag.js) - Google Analytics