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" οnclick="select()">Select</a>
		<a href="#" class="easyui-linkbutton" οnclick="add()">Add</a>
		<a href="#" class="easyui-linkbutton" οnclick="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)" οnclick="addTab()">add tab</a>
	<a class="easyui-linkbutton" href="javascript:void(0)" οnclick="getSelected()">getSelected</a>
	<a class="easyui-linkbutton" href="javascript:void(0)" οnclick="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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值