![属性窗口]( "属性窗口")
本文介绍了设置标题名称，一列只支持一个控件，属性窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 你好朋友 i已创建拖放控件但我想在拖动控件的同时将名称放在标题div和数据div中接受唯一一个控件。如果我点击选定的控件，它将显示属性窗口。请任何人帮助我。这非常紧迫。 < script src = jquery-1.5.min.js type = text / javascript > < / script > < script src = jquery-ui-1.8.9.custom.min.js type = text / javascript > < / script > < style type = text / css > .empty {} .item {背景：灰色; float：left; 填充：5px; 保证金：5px; cursor：move; -webkit-box-shadow：0 1px 2px rgba（0,0,0，.5）; -moz-box-shadow：0 1px 2px rgba（0,0,0，.5）; box-shadow：0 1px 2px rgba（0,0,0，.5）; -webkit-border-radius：.5em; -moz-border-radius：.5em; border-radius：.5em; z-index：5; } .item_container {宽度：610px; 保证金：0自动; margin-top：10px; margin-bottom：10px; } .icart，.icart label { cursor：e-resize; } .divrm { text-align：left; } 。删除 { text-decoration：none; cursor：pointer; font-weight：bold; 字体大小：20px; 头寸：相对; top：-7px; } 。删除：悬停 {颜色：＃999; } .clear { clear：both; } .divDragDropHeader {身高：50px; 宽度：100％; z-index：0; cursor：e-resize; border：solid 1px grey; } .divDragDropData {身高：445px; 宽度：100％; 头寸：相对; 填充：0 0 0 2px; z-index：0; cursor：e-resize; border-width：0 1px; } .back { background：＃e9e9e9; } 。drop-active { background：#ffff99; } 。drop-hover { background：#ffff66; } #navigate {宽度：500; 保证金：0自动; 边框：1px实心灰色; border-top-width：0; -webkit-border-radius：0 0 .5em .5em; -moz-border-radius：0 0 .5em .5em; border-radius：0 0 .5em .5em; 填充：10px; 字体大小：14px; 背景：＃333; font-weight：bold; } < / style > < script 类型 = text / javascript > $（document）.ready（function（）{ $（＃aBAddClnBtn ）.click（function（）{ var new_div =< div style =' border：solid 1px grey; width：15％;' > < div style =' border：solid 1px grey;高度：50px;' > & nbsp; < / div > < div style =' border：solid 1px grey;高度：445像素;' > & nbsp; < / div > < / div > ; $（new_div）。 css（float，left）。appendTo（＃divContent）; return false; }）; }）; $（文件）.ready（function（）{ $（。item）。draggable（{ revert：true }）; $（。divDragDropData）。 draggable（{轴：x}）; $（。divDragDropData）。droppable（{ accept：。item， activeClass ：drop-active， hoverClass：drop-hover， drop：function（event，ui）{ var item = ui.draggable.html（）; var itemid = ui.draggable.attr（id）; var html ='< div class = icart > '; html = html +'< div class = divrm > '; html = html +'< a onclick = remove（this） class = remove'+ itemid +' > & times; < / a > '; html = html +'< div / > '+ item +'< / div > '; $（。divDragDropData）。append（html）; } }）; $（＃btn_clear）。click（function（）{ $（。divDragDropData）。fadeOut（2000，function（）{ $（this）.html （）。fadeIn（fast）。css（{left：0}）; }）; 返回false; }）; }）; function remove（el）{ $（el）.hide（）; $（el）.parent（）。parent（）。effect（highlight，{color：＃ff0000}，1000）; $（el）.parent（）。parent（）。fadeOut（'1000'）; setTimeout（function（）{ $（el）.parent（）。parent（）。remove（）; }，1100）; } < / script > < / head > < body > < form id = form1 runat = 服务器 > < div > < table width = 100％ cellspacing = 5 > < tr > < td style = width：8％;身高：100％; vertical-align：top; > < div id = divFormFields class = item_container style = width：100％; background-color：gray; > < div id = divFieldtitle > 表格字段 < / div > < div id = divFieldDetails > < div class = item id = Empid > EmpId < / div > < div 类 = item id = EmployeeName > EmployeeName < / div > < div class = item id = JobTitle > JobTitle < / div > < div class = item id = 分部 > Division < / div > < div class = item id = 位置 > 位置< / div > < div class = item id = HireDate > HireDate < / div > < div class = item id = PerformanceResults > PerformanceResults < / div > < div class = item id = PerformanceBehaviour > PerformanceBehaviour < / div > < div class = item id = MeritIncrement > MeritIncrement < / div > < div class = item id = PromoJobTitle > PromoJobTitle < / div > < div class = item id = PromoIncrement > PromoIncrement < / div > <％ - < ul> < li class = item id = ' EmpId'>< span> EmpId < / span > < / li > < li class = item id =' EmployeeName' > < span > EmployeeName < / span > < / li > < li class = item id =' JobTitle' > < span > < / span > JobTitle < / li > < li class = item id = ' 分部' > < span > < / span > 分部< / li > < li class = item id =' 位置' > < span > < / span > 位置< / li > < li class = item id =' HireDate' > < span > < / span > HireDate < / li > < li class = item id =' PerformanceResults' > < span > < / span > PerformanceResults < / li > < li 类 = item id =' PerformanceBehaviour' > < span > < / span > PerformanceBehaviour < / li > < li class = item id =' MeritIncrement' > < span > < / span > MeritIncrement < / li > < li class = item id =' PromoJobTitle' > < span > < / span > PromoJobTitle < / li > < li class = item id =' PromoIncrement' > < span > < / span > PromoIncrement < / li > <％ - < li id = ' label'>< span>标签< / span > < / li > < li id =' 输入类型=文字' > < span > TextBox < / span > < / li > < li id =' 选择' > < span > DropDownList < / span > < / li > < li id =' textarea ' > < span > Textarea < / span > < / li > < li id='input type=\"button\" value=\"Add\"'><span>Add</span></li> <li id='input type=\"button\" value=\"Save\"'><span>Save</span></li> <li id='input type=\"button\" value=\"update\"'><span>Update</span></li> </ul>--%> </div> </div> <table> <tr> <td> </td> </tr> </table> <table> <tr> <td> <input type=\"button\" id=\"aBAddClnBtn\" value=\"Add Column\" /> </td> </tr> </table> </td> <td style=\"width: 60%;身高：100％; vertical-align: top;\"> <div id=\"divContent\" class=\"back\" style=\"border: solid 3px gray;身高：500px; width: 100%;\"> <div id=\"divColumn1\" style=\"border: solid 1px gray;宽度：15％; height: 100%;\"> <div class=\"divDragDropHeader\" id=\"divHeader1\"> </div> <div class=\"divDragDropData\" id=\"divData1\"> </div> </div> <%-- <div id=\"divColumn2\" style=\"border: solid 1px gray;宽度：15％; height: 100%;\"> <div class=\"divDragDropHeader\" id=\"divHeader2\"> </div> <div class=\"divDragDropData\" id=\"divData2\"> </div> </div>--%> <div id=\"navigate\"> <div id=\"nav_left\"> <a href=\"\" id=\"btn_clear\">Clear </a> </div> </div> </div> </td> <td id=\"tdPropertyWindow\" style=\"width: 25%;身高：100％; vertical-align: top;\"> <div id=\"lYPropertyWindow\" style=\"width: 100%; background-color: Gray;\"> <table> <tr> <td colspan=\"2\" align=\"center\"> <b>Proper ties</b> </td> </tr> <tr> <td> <b>ControlType</b> </td> <td> <select id=\"lBControlType\" name=\"lBControlType\" style=\"width: 125px;\"> <option value='label'>Label</option> <option value=\"input type='text'\">Textbox</option> <option value='select'>DropDown</option> <option value='textarea'>Textarea</option> <option value='input type=\"button\" value=\"Save\"'>Save Button</option> <option value='input type=\"button\" value=\"Add\"'>Add Button</option> <option value='input type=\"button\" value=\"Update\"'>Update Button</option> <%-- <option value=\"EmpId\">EmpId</option> <option value=\"EmployeeName\">EmployeeName</option> <option value=\"JobTitle\">JobTitle</option> <option value=\"Division\">Division</option> <option value=\"Location\">Location</option> <option value=\"HireDate\">HireDate</option> <option value=\"PerformanceResults\">PerformanceResults</option> <option value=\"PerformanceBehaviour\">PerformanceBehaviour</option> <option value=\"MeritIncrement\">MeritIncrement</option> <option value=\"Lumpsum\">Division</option> <option value=\"PromoJobTitle\">PromoJobTitle</option> <option value=\"PromoIncrement\">PromoIncrement</option>--%> </select> </td> </tr> <tr> <td> <b>DisplayName</b> </td> <td> <input type=\"text\" id=\"txtDispalyName\" name=\"txtDisplayName\" style=\"width: 120px;\" /> </td> </tr> <tr> <td> <b>TableName</b> </td> <td> <input type=\"text\" id=\"txtTableName\" name=\"txtTableName\" style=\"width: 120px;\" /> </td> </tr> <tr> <td> <b>Width</b> </td> <td> <input type=\"text\" id=\"txtWidth\" name=\"txtWidth\" style=\"width: 120px;\" /> </td> </tr> <tr> <td> <b>Height</b> </td> <td> <input type=\"text\" id=\"txtHeight\" name=\"txtHeight\" style=\"width: 120px;\" /> </td> </tr> <tr> <td> <b>Top</b> </td> <td> <input type=\"text\" id=\"txtTop\" name=\"txtTop\" style=\"width: 120px;\" /> </td> </tr> <tr> <td> <b>Left</b> </td> <td> <input type=\"text\" id=\"txtLeft\" name=\"txtLeft\" style=\"width: 120px;\" /> </td> </tr> <tr> <td> <b>ContainerId</b> </td> <td> <input type=\"text\" id=\"txtContainer\" name=\"txtContainer\" style=\"width: 120px\" /> </td> </tr> <tr> <td> <b>Visibility</b> </td> <td> <input type=\"text\" id=\"txtVisible\" name=\"txtVisible\" value=\"True\" style=\"width: 120px;\" /> </td> </tr> <tr> <td> <b>PrimaryKey</b> </td> <td> <select id=\"lBPrimaryKey\" style=\"width: 125px;\"> <option value=\"true\">True</option> <option value=\"false\">False</option> </select> </td> </tr> <tr> <td> <b>Used</b> </td> <td> <select id=\"lBUsed\" style=\"width: 125px;\"> <option value=\"true\">True</option> <option value=\"false\">False</option> </select> </td> </tr> <tr> <td> <b>Editable</b> </td> <td> <select id=\"lBEditable\" style=\"width: 125px;\"> <option value=\"true\">True</option> <option value=\"false\">False</option> </select> </td> </tr> <tr> <td colspan='2' align=\"center\"> <b>Events</b> </td> </tr> <tr> <td> <b>Action</b> </td> <td> <input type=\"text\" id=\"txtAction\" name=\"txtAction\" style=\"width: 120px\" /> </td> </tr> <tr> <td colspan=\"2\" align=\"center\"> <b>Data Type</b> </td> </tr> <tr> <td> <b>Alpha/Num</b> </td> <td> < ;input type=\"text\" id=\"txtAlpha\" name=\"txtAlpha\" style=\"width: 120px;\" /> </td> </tr> <tr> <td> <b>NumberType</b> </td> <td> <input type=\"text\" id=\"txtNumberType\" name=\"txtNumberType\" style=\"width: 120px;\" /> </td> </tr> <tr> <td> <b>Precision</b> </td> <td> <input type=\"text\" id=\"txtPrecision\" name=\"txtPrecision\" style=\"width: 120px;\" /> </td> </tr> <tr align=\"center\"> <td colspan=\"2\"> <inpu t type=\"button\" id=\"aBSaveBtn\" value=\"Save\" /> </td> </tr> </table> </div> </td> </tr> </table> </div> </form> </body> 解决方案 (document).ready(function() {(\"#aBAddClnBtn\").click(function() { var new_div = \"<div style='border: solid 1px gray;宽度：15％; ' > < div style =' border：solid 1px grey;高度：50px;' > & nbsp; < / div > < div style =' border：solid 1px grey; height: 445px;'> </div></div>\";(new_div).css(\"float\", \"left\").appendTo(\"#divContent\"); return false; }); });hello friendsi have created drag and drop the control but i want while drag the control at the same time the name should placed in header div and data div only accept the only one control. if i click the selected control it will show the property window.please can any one help me. its very urgent.<script src="jquery-1.5.min.js" type="text/javascript"></script> <script src="jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script> <style type="text/css"> .empty { } .item { background: gray; float: left; padding: 5px; margin: 5px; cursor: move; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5); box-shadow: 0 1px 2px rgba(0,0,0,.5); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; z-index: 5; } .item_container { width: 610px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; } .icart, .icart label { cursor: e-resize; } .divrm { text-align: left; } .remove { text-decoration: none; cursor: pointer; font-weight: bold; font-size: 20px; position: relative; top: -7px; } .remove:hover { color: #999; } .clear { clear: both; } .divDragDropHeader { height: 50px; width: 100%; z-index: 0; cursor: e-resize; border: solid 1px gray; } .divDragDropData { height: 445px; width: 100%; position: relative; padding: 0 0 0 2px; z-index: 0; cursor: e-resize; border-width: 0 1px; } .back { background: #e9e9e9; } .drop-active { background: #ffff99; } .drop-hover { background: #ffff66; } #navigate { width: 500; margin: 0 auto; border: 1px solid gray; border-top-width: 0; -webkit-border-radius: 0 0 .5em .5em; -moz-border-radius: 0 0 .5em .5em; border-radius: 0 0 .5em .5em; padding: 10px; font-size: 14px; background: #333; font-weight: bold; } </style> <script type="text/javascript"> $(document).ready(function() { $("#aBAddClnBtn").click(function() { var new_div = "<div style='border: solid 1px gray; width: 15%; '><div style='border: solid 1px gray; height: 50px;'> </div> <div style='border: solid 1px gray; height: 445px;'> </div></div>"; $(new_div).css("float", "left").appendTo("#divContent"); return false; }); }); $(document).ready(function() { $(".item").draggable({ revert: true }); $(".divDragDropData").draggable({ axis: "x" }); $(".divDragDropData").droppable({ accept: ".item", activeClass: "drop-active", hoverClass: "drop-hover", drop: function(event, ui) { var item = ui.draggable.html(); var itemid = ui.draggable.attr("id"); var html = '<div class="icart">'; html = html + '<div class="divrm">'; html = html + '<a onclick="remove(this)" class="remove ' + itemid + '">×</a>'; html = html + '<div/>' + item + '</div>'; $(".divDragDropData").append(html); } }); $("#btn_clear").click(function() { $(".divDragDropData").fadeOut("2000", function() { $(this).html("").fadeIn("fast").css({ left: 0 }); }); return false; }); }); function remove(el) { $(el).hide(); $(el).parent().parent().effect("highlight", { color: "#ff0000" }, 1000); $(el).parent().parent().fadeOut('1000'); setTimeout(function() { $(el).parent().parent().remove(); }, 1100); } </script></head><body> <form id="form1" runat="server"> <div> <table width="100%" cellspacing="5"> <tr> <td style="width: 8%; height: 100%; vertical-align: top;"> <div id="divFormFields" class="item_container" style="width: 100%; background-color: gray;"> <div id="divFieldtitle"> Form Fields </div> <div id="divFieldDetails"> <div class="item" id="Empid"> EmpId </div> <div class="item" id="EmployeeName"> EmployeeName</div> <div class="item" id="JobTitle"> JobTitle</div> <div class="item" id="Division"> Division</div> <div class="item" id="Location"> Location</div> <div class="item" id="HireDate"> HireDate</div> <div class="item" id="PerformanceResults"> PerformanceResults</div> <div class="item" id="PerformanceBehaviour"> PerformanceBehaviour</div> <div class="item" id="MeritIncrement"> MeritIncrement</div> <div class="item" id="PromoJobTitle"> PromoJobTitle</div> <div class="item" id="PromoIncrement"> PromoIncrement</div> <%-- <ul> <li class="item" id='EmpId'><span>EmpId</span></li> <li class="item" id='EmployeeName'><span>EmployeeName</span></li> <li class="item" id='JobTitle'><span></span>JobTitle</li> <li class="item" id='Division'><span></span>Division</li> <li class="item" id='Location'><span></span>Location</li> <li class="item" id='HireDate'><span></span>HireDate</li> <li class="item" id='PerformanceResults'><span></span>PerformanceResults</li> <li class="item" id='PerformanceBehaviour'><span></span>PerformanceBehaviour</li> <li class="item" id='MeritIncrement'><span></span>MeritIncrement</li> <li class="item" id='PromoJobTitle'><span></span>PromoJobTitle</li> <li class="item" id='PromoIncrement'><span></span>PromoIncrement</li> <%-- <li id='label'><span>Label</span></li> <li id='input type="text"'><span>TextBox</span></li> <li id='select'><span>DropDownList</span></li> <li id='textarea'><span>Textarea</span></li> <li id='input type="button" value="Add"'><span>Add</span></li> <li id='input type="button" value="Save"'><span>Save</span></li> <li id='input type="button" value="update"'><span>Update</span></li> </ul>--%> </div> </div> <table> <tr> <td> </td> </tr> </table> <table> <tr> <td> <input type="button" id="aBAddClnBtn" value="Add Column" /> </td> </tr> </table> </td> <td style="width: 60%; height: 100%; vertical-align: top;"> <div id="divContent" class="back" style="border: solid 3px gray; height: 500px; width: 100%;"> <div id="divColumn1" style="border: solid 1px gray; width: 15%; height: 100%;"> <div class="divDragDropHeader" id="divHeader1"> </div> <div class="divDragDropData" id="divData1"> </div> </div> <%-- <div id="divColumn2" style="border: solid 1px gray; width: 15%; height: 100%;"> <div class="divDragDropHeader" id="divHeader2"> </div> <div class="divDragDropData" id="divData2"> </div> </div>--%> <div id="navigate"> <div id="nav_left"> <a href="" id="btn_clear">Clear </a> </div> </div> </div> </td> <td id="tdPropertyWindow" style="width: 25%; height: 100%; vertical-align: top;"> <div id="lYPropertyWindow" style="width: 100%; background-color: Gray;"> <table> <tr> <td colspan="2" align="center"> <b>Properties</b> </td> </tr> <tr> <td> <b>ControlType</b> </td> <td> <select id="lBControlType" name="lBControlType" style="width: 125px;"> <option value='label'>Label</option> <option value="input type='text'">Textbox</option> <option value='select'>DropDown</option> <option value='textarea'>Textarea</option> <option value='input type="button" value="Save"'>Save Button</option> <option value='input type="button" value="Add"'>Add Button</option> <option value='input type="button" value="Update"'>Update Button</option> <%-- <option value="EmpId">EmpId</option> <option value="EmployeeName">EmployeeName</option> <option value="JobTitle">JobTitle</option> <option value="Division">Division</option> <option value="Location">Location</option> <option value="HireDate">HireDate</option> <option value="PerformanceResults">PerformanceResults</option> <option value="PerformanceBehaviour">PerformanceBehaviour</option> <option value="MeritIncrement">MeritIncrement</option> <option value="Lumpsum">Division</option> <option value="PromoJobTitle">PromoJobTitle</option> <option value="PromoIncrement">PromoIncrement</option>--%> </select> </td> </tr> <tr> <td> <b>DisplayName</b> </td> <td> <input type="text" id="txtDispalyName" name="txtDisplayName" style="width: 120px;" /> </td> </tr> <tr> <td> <b>TableName</b> </td> <td> <input type="text" id="txtTableName" name="txtTableName" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Width</b> </td> <td> <input type="text" id="txtWidth" name="txtWidth" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Height</b> </td> <td> <input type="text" id="txtHeight" name="txtHeight" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Top</b> </td> <td> <input type="text" id="txtTop" name="txtTop" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Left</b> </td> <td> <input type="text" id="txtLeft" name="txtLeft" style="width: 120px;" /> </td> </tr> <tr> <td> <b>ContainerId</b> </td> <td> <input type="text" id="txtContainer" name="txtContainer" style="width: 120px" /> </td> </tr> <tr> <td> <b>Visibility</b> </td> <td> <input type="text" id="txtVisible" name="txtVisible" value="True" style="width: 120px;" /> </td> </tr> <tr> <td> <b>PrimaryKey</b> </td> <td> <select id="lBPrimaryKey" style="width: 125px;"> <option value="true">True</option> <option value="false">False</option> </select> </td> </tr> <tr> <td> <b>Used</b> </td> <td> <select id="lBUsed" style="width: 125px;"> <option value="true">True</option> <option value="false">False</option> </select> </td> </tr> <tr> <td> <b>Editable</b> </td> <td> <select id="lBEditable" style="width: 125px;"> <option value="true">True</option> <option value="false">False</option> </select> </td> </tr> <tr> <td colspan='2' align="center"> <b>Events</b> </td> </tr> <tr> <td> <b>Action</b> </td> <td> <input type="text" id="txtAction" name="txtAction" style="width: 120px" /> </td> </tr> <tr> <td colspan="2" align="center"> <b>Data Type</b> </td> </tr> <tr> <td> <b>Alpha/Num</b> </td> <td> <input type="text" id="txtAlpha" name="txtAlpha" style="width: 120px;" /> </td> </tr> <tr> <td> <b>NumberType</b> </td> <td> <input type="text" id="txtNumberType" name="txtNumberType" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Precision</b> </td> <td> <input type="text" id="txtPrecision" name="txtPrecision" style="width: 120px;" /> </td> </tr> <tr align="center"> <td colspan="2"> <input type="button" id="aBSaveBtn" value="Save" /> </td> </tr> </table> </div> </td> </tr> </table> </div> </form></body> 解决方案 (document).ready(function() {("#aBAddClnBtn").click(function() { var new_div = "<div style='border: solid 1px gray; width: 15%; '><div style='border: solid 1px gray; height: 50px;'> </div> <div style='border: solid 1px gray; height: 445px;'> </div></div>";(new_div).css("float", "left").appendTo("#divContent"); return false; }); }); 这篇关于设置标题名称，一列只支持一个控件，属性窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 09-13 07:07