`

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扩展控件
评论
发表评论

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

相关推荐

    jQuery EasyUI 1.3.2 离线API简体中文版

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

    easyui1.7 官网示例大全

    easyui\easyui-accordion-demo.zip easyui\easyui-crud-demo.zip easyui\easyui-datagrid10-demo.zip easyui\easyui-datagrid11-demo.zip easyui\easyui-datagrid12-demo.zip easyui\easyui-datagrid13-demo.zip ...

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

    一套EASYUI的经典后台管理模板easyui的后台管理实例运行环境浏览器项目技术(必填)easyui+jquery1.4.4

    【推荐下载】 C# asp.net MVC+EASYUI 视频教程

    本套教程主要讲解了easyUI和mvc结合开发项目的实例，以用户管理为模型，用easyUI做了数据表格的增加，删除，修改 分页，普通查询，组合查询，以及后端参数的接收和响应，导出EXCEL，批量导入数据等。特别是easyUI ...

    C#+EasyUI+ECharts(二)

    2. MVC + easyUI + sqlserver2014 + eCharts 3. 主要功能:新增、修改、删除、分页、导出Excel文件、上传图片、权限设置、图形报表展示 (权限设置只是为了练习easyUI tree的使用,具体项目具体分析) (例子涉及两张表...

    EasyUI tutorial 中文版 chm

    基于EasyUI 官方的帮助。 Application 使用easyUI创建一个CRUD的应用 使用easyUI创建一个CRUD DataGrid 使用easyUI展开行详细编辑form创建CRUD应用 使用jQuery easyUI 创建一个 RSS Feed阅读器 Drag and ...

    完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统(RESTful API+redis).zip

    完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统(RESTful API+redis).zip 完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统(RESTful API+redis).zip 完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统...

    jQuery EasyUI 1.4 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    　时隔4个月之久 EasyUI终于迎来大版本更新了 本次更新内容诸多 除了常规维护外 还新增了3个新组件 都很实用 详细的可以阅读更新说明 里面给了详细的解读 另外 从该版本开始我将会逐步的将EasyUI官方以及第三方较好...

    easyui做的动态菜单+框架

    一​个​利​用​e​a​s​y​u​i​1​.​3​.​5​+​j​q​u​e​r​y​2​.​0​制​作​的​系​统​框​...本程序在疯狂秀才1.2版本基础上，进行了修改，修正了该版本不支持jquery2.0以上、easyui1.3以上的问题。

    EasyUI textbox事件，EasyUI textbox input events

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

    easyui三套精美皮肤

    easyui三套精美皮肤，easyui三套精美皮肤，easyui三套精美皮肤，

    easyui1.7中文api

    easyui1.7中文api

    jQuery EasyUI的api

    jquery EasyUI的API，方便使用easyui查看。。。。。。

    EasyUi图标扩展样式大全（1700个）

    EasyUi图标扩展样式大全（1700个）,在用EasyUI做项目是发现自带的Icon图标太少，而且不是很美观。于是就有了下面的东西，很全的EasyUI图标.

    easyui 日期选择器

    easyui 日期选择器

    easyui入门视频教程

    这是一个easyui入门视频的分享下载地址，网盘下载 ，对于没有easyui基础的同学会很有帮助哦！讲师从一个一个组件慢慢的由浅入深的讲解，浅显易懂。适合初学者。

    超实用的jQuery-EasyUI视频教程（30集）

    教程名称：超实用的jQuery-EasyUI视频教程（30集）课程目录：【】jQuery-EasyUI视频教程（01-02集）【】jQuery-EasyUI视频教程（03-04集）【】jQuery-EasyUI视频教程（05-06集）【】jQuery-EasyUI视频教程（07-08集...

    easyui的入门教程

    工具类，包含easyui的基本操作说明，绿色版本，入门比较好

    easyUI全套文档及案例

    包含easyUI 的api,以及实例代码，基于java，让你轻松学会easyUI

    jQuery EasyUI 1.3.6 离线简体中文API文档

    最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉，由于很多人和我要chm格式的，所以本次API我提供了2种版本的API，一个还是以前的EXE格式，另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...

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