JQuery UI----初次学习（添加关于添加UI包的顺序与dialog属性设置）

项目之前大部分均为表单提报，填写表单，提交表单等操作，未涉及到UI部分，此次由于业务需求，初次加入UI dialog（实际上之前有很多部分需要提醒用户的都用了alert提醒框，而非友好的dialog）。

当项目中未涉及UI框架时，初次使用一定要记得导入jquery.ui.js！
一定要记得导入jquery.ui.js!
一定要记得导入jquery.ui.js!

只导入jquery.js是无法实现UI的！！

---

更新于2017.7.17

导入包的顺序也是非常重要的，直接影响着框架能否正常使用。我在项目中导入的顺序如下所示。

 <link rel="stylesheet" href="~/Scripts/jquery-ui-1.10.4/themes/base/jquery-ui.css">

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Plugins/AdminLTE/plugins/timepicker/bootstrap-timepicker.min.js"></script>
    <script src="~/Scripts/jquery.form.js"></script>

    <script src="~/Scripts/jquery-ui-1.10.4/ui/jquery-ui.js"></script>

    <script src="~/Scripts/jquery-ui-1.10.4/ui/jquery-ui.core.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.4/ui/jquery-ui.widget.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.4/ui/jquery-ui.mouse.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.4/ui/jquery-ui.button.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.4/ui/jquery-ui.draggable.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.4/ui/jquery-ui.position.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.4/ui/jquery-ui.dialog.js"></script>

1、注意路径的正确性，因除了jquery，项目还运用了bootstrap等框架。

2、如果没有关联样式（Link css）的话（该样式在下载的JQUERY UI中是包含的），是不会出现官网所示的对话框的样式的。

3、关于.dialog的一些样式，有常用的比如autoOpen:true/false，表示是否自动打开。因一般情况下，包括官网的例子均是在 $(function)(){}、或者$(document).ready(function(){} 或者window.onload = function(){}中添加.dialog方法，这样即在页面加载时便会打开会话框（autoOpen为打开状态），如果是需要在页面加载完毕后点击按钮或者其他事件来进行触发.dialog的话，这里autoOpen需要设置成:false

  $("#dialog_bdz").dialog({
   autoOpen: false,
   modal: true,
   position: { my: "center", at: "left+650px top+40px ", of: window },
   buttons: {
  "确定": function () {
  var input_byhand = document.getElementById("input_bdz").value;

  $("#Bdz_select").append("<option value='" + input_byhand + "'>" + input_byhand + "</option>");

  $("#Bdz_select").val("" + input_byhand + "");
  $(this).dialog("close");
     },
   "取消": function () {
      $(this).dialog("close");
   }
} });

<div id="dialog_bdz" title="请手动输入变电站名称">
   <textarea class="form-control" rows="3" id="input_bdz"></textarea>
   </div>

4、modal：true，打开状态下表示在dialog会话框弹出时会是页面背景变暗，突出会话框。

5、positon。表示会话框弹出的位置。因为默认的弹出框好像是在窗口的中间，然而并不符合需求，于是添加此属性。其中of: window表示相对窗口。

6、关于对话框设置，即上文的id=”dialog_bdz”的div，它的位置是没有要求的。

7、button。确定后执行的操作为项目中业务需求，用法仅供参考，如若复杂不严谨请指正。另外，关于两个按钮“确定”“取消”的位置暂时没有找到方法来进行设置。感觉官方给出的.css样式中没有关于此处的设定。如果大家有方法烦请提示下博主，多谢。