Question

我来了一个页面管理插件，即jQuery UI Layout。我想在我正在开发的应用程序中使用它。

我正在尝试创建一个包含3个面板的页面。在西方，我需要添加一个占据页面全高的面板。我还需要添加一个北面板，它将从＆＃34; west panel＆＃34;结束，一直到屏幕的东侧。最后，我想在西面板的中间添加一个面板，它将占据页面的剩余部分。

换句话说，我正在尝试使用jQuery UI Layout进行以下布局。

这就是我所做的

＆＃13;

	$(function () {
		$('body').layout({
			applyDefaultStyles: true,
			west__size: 200
		});
	});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://layout.jquery-dev.com/lib/js/jquery.layout-latest.js"></script>

<link href="http://layout.jquery-dev.com/lib/css/layout-default-latest.css" rel="stylesheet"/>

<div class="ui-layout-north ui-layout-pane ui-layout-pane-north">
		NORTH
	</div>
	<div class="ui-layout-west">
		WEST
	</div>
	<div class="ui-layout-center">
		MIDDLE
	</div>

＆＃13;

但是，这使得北面板跨越了整个页面和西面板。

如何修复它并获得我上面的外观？

Answer 1

当你询问“内部北面板”时，你有点回答了自己的问题。你需要的是一个只包含西面和中间窗格的外部布局。然后在该中心窗格内添加一个仅包含北窗和中间窗格的内部布局。那会给你你想要的......

<div class="ui-layout-west"> WEST </div>
<div class="ui-layout-center">
    <div class="ui-layout-north"> NORTH </div>
    <div class="ui-layout-center"> CENTER </div>
</div>

Answer 2

我终于找到了问题所在。要做到这一点，我必须给中心div一个新的ID并创建一个layout的新实例，所以我有一个在另一个内部的2个单独的实例

这就是诀窍

<script>
    $(function () {
        $('#mainContainer').layout({
            applyDefaultStyles: true,
            west__size: 300
        });

        $('#innderContainer').layout({
            applyDefaultStyles: true
        });

    });
</script>

<div id="mainContainer" class="ui-layout-center">

    <div class="ui-layout-west">
        West
    </div>

    <div class="ui-layout-center" id="innderContainer">

        <div class="ui-layout-pane-south">
            SOUTH
        </div>

        <div class="ui-layout-north">
            North
        </div>

        <div id="centerInnerCenterPane" class="ui-layout-center">
            Center
        </div>

    </div>

</div>

Answer 3

是的，你还需要 init 内部布局。因为我以为你知道，我以前没有显示过这些代码。但是，有很多方法可以不需要添加元素ID，例如......

布局接受任何 jQuery选择器，所以你可以这样做：

// change the global default to avoid repeating
$.layout.defaults.panes.applyDemoStyles = true;

$('body').layout({
    west__size: 300
}).panes.center.layout();

或者您可以通过返回的布局对象访问外部布局窗格：

$('body').layout({
    applyDemoStyles: true,
    west__size: 300,
    center__children: {
        applyDemoStyles: true,
        north__size: 150
    }
});

或者使用＆＃34;孩子＆＃34;用于指定嵌套布局的选项：

public static void sql_Reader_To_Type(Type t, SqlDataReader r)
    {

        List<object> ret = new List<object>();
        while (r.Read())
        {

            FieldInfo[] f = t.GetFields();
            object o = Activator.CreateInstance(t);
            for (int i = 0; i < f.Length; i++)
            {
                string thisType = f[i].FieldType.ToString();
                switch (thisType)
                {
                    case "System.String":

                        f[i].SetValue(o, Convert.ToString(r[f[i].Name]));
                        break;
                    case "System.Int16":
                        f[i].SetValue(o, Convert.ToInt16(r[f[i].Name]));
                        break;
                    case "System.Int32":
                        f[i].SetValue(o, Convert.ToInt32(r[f[i].Name]));
                        break;
                    case "System.Int64":
                        f[i].SetValue(o, Convert.ToInt64(r[f[i].Name]));
                        break;
                    case "System.Double":
                        // Console.WriteLine("converting " + f[i].Name + " to double");
                        double th;
                        if (r[f[i].Name] == null)
                        {
                            th = 0;
                        }
                        else
                        {
                            if (r[f[i].Name].GetType() == typeof(DBNull))
                            {
                                th = 0;
                            }
                            else
                            {
                                th = Convert.ToDouble(r[f[i].Name]);
                            }
                        }
                         f[i].SetValue(o, th); 
                        break;
                    case "System.Boolean":
                        f[i].SetValue(o, Convert.ToInt32(r[f[i].Name]) == 1 ? true : false);
                        break;
                    case "System.DateTime":
                        f[i].SetValue(o, Convert.ToDateTime(r[f[i].Name]));
                        break;
                    default:
                        throw new Exception("Missed data type in sql select in getClassMembers class line 73");

                }
            }
            ret.Add(o);
            if (ret.Count == 50000)
            {
                //process data
                ret.Clear();
            }

        }
        if (ret.Count > 0)
        {
            //processdata
        }


    }

Create Table (firstName varchar(25), lastName varchar(50), birthday date)

class person{public string firstName; public string lastName; public DateTime birthday}

sql_Reader_To_Type(typeof(person), com.ExecuteReader());

还有更多方法，例如在容器元素上添加布局选项作为数据布局属性;但上面的例子已经足够了！

我建议在专用论坛中询问布局问题。您可能会得到更快的答案，而您的问题可能会帮助处理类似情况的其他人。

如何使用jQuery Layout UI添加内部North面板？

3 个答案: