<%@ Page Language="C#" MasterPageFile="~/Admin/MasterPage.master" AutoEventWireup="true"
    CodeBehind="CreateHtmlSingle.aspx.cs" Inherits="PowerEasy.Module.General.WebSite.Admin.Contents.CreateHtmlSingle"
    Title="生成单页节点" %>

<asp:Content ID="Content1" ContentPlaceHolderID="CphNavigation" runat="server">
    <pe:ExtendedSiteMapPath ID="SmpNavigator" SiteMapProvider="AdminMapProvider" runat="server" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CphContent" runat="server">
    <style>
        /*搜索*/
        .clear {
            clear: both;
        }
        .Create_Search {
            margin-bottom: 2px;
            position: relative;
            width: 200px;
            float: left;
            clear: both;
        }
        .Create_Search #search-tip {
            position: absolute;
            top: 2px;
            left: 5px;
            color: #555;
        }
        
        .Create_Searchb, .Create_Searcha {
            background-image: url(../../Admin/Images/SearchN.gif);
            background-repeat: no-repeat;
            cursor: pointer;
            width: 15px;
            height: 15px;
            z-index: 9999;
            position: absolute;
            right: 1px;
            top: 3px;
        }
        .Create_Searcha {
            background-image: url(../../Admin/Images/SearchX.gif);
        }
        .Create_Search_UpAndDown {
            position: absolute;
            top: -24px;
            left: 10px;
            z-index: 999;
            display: none;
        }
        #SinglePage {
            float: left;
            clear: both;
            display: inline;
        }
        #Search {
            width: 100%;
            padding-left: 28%;
            margin-bottom: 10px;
        }
        
        
        .optgroups {
            border: solid 1px #ABADB3;
            max-height: 360px;
            overflow: auto;
        }
        /* 解决受到tdbg li干扰的问题*/
        .tdbg .optgroups li {
            margin-left: 0px !important;
        }
        .optgroups ul {
            list-style-type: none;
            padding-left: 1em;
            text-align: left;
        }
        
        .optgroups .ui-selecting {
            background: #3399FF;
        }
        
        
        
        .optgroups ul .optgroups_group {
            font-weight: bold;
            color: #888;
        }
        
        
        .optgroups ul li {
            line-height: 15px;
            padding-left: 15px;
        }
        
        .optgroups ul {
            background: url(../../Admin/Images/Node/line_conn.gif) 0 0 repeat-y;
        }
        .optgroups ul li {
            background: url(../../Admin/Images/Node/options_lin2.gif);
            background-repeat: no-repeat;
            background-position-x: -2px;
        }
        
        .optgroups ul li.optgroups_section {
            /*padding-left:1em;*/
            font-weight: normal;
            color: Black;
        }
        
        .optgroups ul li.optgroups_section label {
            cursor: pointer;
        }
        
        .optgroups ul li input {
            display: none;
        }
        .optgroups ul li.ui-selected {
            background: #3399FF;
            color: white;
        }
    </style>
    <table style="width: 100%; margin: 0 auto;" cellpadding="2" cellspacing="1" class="border">
        <tr align="center">
            <td class="spacingtitle">
                生成单页节点
            </td>
        </tr>
        <tr class="tdbg">
            <td class="tdbg" align="center">
                <div id="Search">
                    <div class="Create_Search">
                        <input id="Create_Search" class="inputtext" style="width: 198px;" />
                        <label id="search-tip" for="Create_Search">
                            快速搜索</label>
                        <a id="Searchb" class="Create_Searchb"></a>
                        <div id="Create_Search_UpAndDown" class="Create_Search_UpAndDown">
                            <input id="Button4" value="上一个" type="button" onclick="searchpre()" />
                            <input id="Button3" value="下一个" type="button" onclick="searchnext()" />
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                    <div id="SinglePage">
                        <%--   <asp:ListBox ID="LstSinglePage" runat="server" Width="500px" Height="400px" SelectionMode="Multiple"
                    ToolTip="按住“Ctrl”或“Shift”键可以多选，按住“Ctrl”可取消选择" />
                                <br />
                <br />--%>
                        <div class="optgroups">
                            <%
                                RenderNode(this.doc.SelectSingleNode("Root") as System.Xml.XmlElement);
                            %>
                        </div>
                        <asp:Button ID="CreateSinglePage" runat="server" Text="生成选定单页节点" OnCommand="CreateSinglePage_Click"
                            CommandName="Selected" />
                        &nbsp;&nbsp;
                        <asp:Button ID="CreateAllSinglePage" runat="server" Text="生成所有单页节点" OnCommand="CreateSinglePage_Click"
                            CommandName="All" />
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <asp:HiddenField ID="HdnAllSingle" runat="server" />
    <script src="../../Admin/JS/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var list = $('.optgroups>ul'),
            searcher = $('#Create_Search'),
            searchTip = $('#search-tip'),
            selectItems = list.find('li.optgroups_section'),
            selectItemCheckbox = list.find(':checkbox');

            list.selectable({
                filter: "li.optgroups_section",
                selected: function (event, ui) {
                    var self = $(ui.selected);
                    var checkbox = self.find('input:checkbox'),
                    nameLabel = self.find('label');

                    checkbox.prop("checked", true);

                }
                , unselected: function (event, ui) {
                    var self = $(ui.unselected);
                    var checkbox = self.find('input:checkbox'),
                    nameLabel = self.find('label');

                    checkbox.prop("checked", false);
                }
            });
            searcher.keyup(function (event) {
                if (searcher.val()) {
                    searchTip.hide();

                    var selected = list.find(".optgroups_section:contains('" + searcher.val() + "')").first();
                    if (selected.length > 0) {
                        selectItemCheckbox.prop('checked', false);
                        selectItems.removeClass('ui-selected');
                        selected.addClass('ui-selected');
                        selected.find('input:checkbox').prop('checked', true);
                    }

                } else {
                    searchTip.show();
                }


            }).blur(function (event) {
                if (searcher.val()) {
                    searchTip.hide();

                    var selected = list.find(".optgroups_section:contains('" + searcher.val() + "')").first();
                    if (selected.length > 0) {
                        selectItemCheckbox.prop('checked', false);
                        selectItems.removeClass('ui-selected');
                        selected.addClass('ui-selected');
                        selected.find('input:checkbox').prop('checked', true);
                    }
                } else {
                    searchTip.show();
                }
            }).focus(function (event) {
                searchTip.hide();
            });

        });
    
    </script>
</asp:Content>
