6angular1, jquery unlimited forms effect

Others 2019-06-02 22:59:24 views: null 
1. Description of Requirement: (1) page, click a button, sends a request to the background, access to content; (2) the contents have input and select, select default item and there are alternatives, of which the alternatives are not displayed, click the Default entry to the right triangle after the number, display alternatives; (3) each of the alternatives also right triangle number, click to send a request back for acquiring the content; (4) repeat (2) (3) step. 
2, logic is implemented: (1) the request to render the results page, immediately find and select the option to hide the equipment; (2) to bind each triangle number of alternatives click function (recursive, get_options), in order to request background ; (3) to prepare a text for each click option to bind a function to assign to the default entry; text (4) to each item a default bindings click functions to hide or show the alternatives. 
3, code structure. By class, id, event objects, the custom attribute, and the associated correlation data transfer.
<div> 
  <-! following spliced together by traversing div -> 
  <div> <-! SELECT outermost div -> 
    <div> drop-down box label contents </ div> 
    <div> 
      <div > <span> The default item text </ span> <span> triangular number </ span> </ div> 
      <ul> <li> <span> alternatives text </ span> <span> triangular number </ span> < / li> </ ul> 
    </ div> 
    <div> 
      <div> <span> the default item text </ span> <span> triangular number </ span> </ div> 
      <ul> <-! below li by traversing stitching together -> 
        <li> <span> alternatives text </ span> <span> triangular number </ span> </ li> 
        <div> alternatives details </ div> </ ul> 
    </ div > 
  </ div> 
</ div>

　　

<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .add_cust_rule_mask {
      width: 100%;
      height: 100%;
      background: #000;
      position: fixed;
      left: 0;
      top: 0;
      opacity: 0.5;
      z-index: 7;
    }
    .add_cust_rule_alert {
      display: flex;
      justify-content: center;
      /* align-items:center;  */
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      border-radius: 0;
      overflow: auto;
      z-index: 11;
      width: 1000px;
      height: 800px;
      padding: 30px;
    }
    ul li {
      list-style: none;
    }
    .add_cust_rule_alert .before_click {
      margin-left: 20px;
      display: inline-block;
      width: 15px;
      height: 15px;
      background: red;
      /*background: url(../../static/img/guolv-12_6-down.png) no-repeat;*/
      background-size: contain;
      background-position: center center;
      cursor: pointer;
    }
    .add_cust_rule_alert .after_click {
  <div class="add_cust_rule_mask" ng-show='is_show_alert' id="add_cust_rule_mask" ng-click="close_mask()">
  </div>
  <div class="add_cust_rule_alert" ng-show='is_show_alert'>
    <div>
      <div id="add_cust_rule_content">
      </div>
      <div style="display: flex;justify-content: center;margin:40px auto;">
        <input type="button" value="添加自定义规则 已完成，关闭弹窗" ng-click="close_mask()"/>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<Script> 
    / * the "add a custom rule" * /
  app.controller ( 'Ctrl', function ($ scope) {
  var App = angular.module ( 'App', []);
    // this function is recursive logic implemented: (1) a triggering event, obtain data returned back, performing $ scope.insert_form function, inside this function, a will be inserted into the data page, b to each of the alternatives triangle number binding to the right click function; (2) inside the click function to get the background data returned, executed $ scope.insert_form function; achieve recursion.
    Implementing logical functions // recursive present: (1) insertion function, binding click function; (2) execute the click function, insertion function. 
    scope.is_show_alert to false = $; 
    var self_outer_next = 0; // occurs when avoid repeated recursively ID 
    var self_inner_next = 0; // ID avoiding repeated recursively 
    $ scope.cust_data = { 
      'protoContext': { 
        'the FUNC': {/ / interface Label1 
          'default_select': 'Write_Single_Coil', 
          'type': 'SELECT', // to indicate the FUNC SELECT 
          'value': [ 
            { 
              'Write_Single_Coil': {// the SELECT Option 
              'Write_Single_Register': 
                'isFinal': 0, // whether it is the last stage of value? You can continue to click? 
                0: Can Click, 1: You can not click on the 'default_select': 0 // select the default option;
              } 
            }, 
            {  
              'Write_Single_RegisterFUCK':
              } 
            }, { 
              'Write_Single_RegisterFUCKYOU': { 
                'isFinal': 0, 
              } 
            }, 
          ], 
        }, 
        'ADDR': {// interface label2 
          'type': 'input', // ADDR is the INPUT 
          ' range ':' [0, 65535 ] ', // input of the input range limits 
        }, 
        ' BDDR ': {// interface label2 
          ' type ':' iNPUT ', // ADDR to the iNPUT 
          ' range ':' [0 65535] ', // input of the input range limits 
        } 
      } 
    }; 
    $ scope.close_mask = function () {
      $('.single_click').each(function (index, item) {
        $(item).off('click');
        var cust_option = $(this).attr('cust_option');
        $(item).on('click', function (event) {
          $('#' + cust_option).html(event.target.innerHTML);
        });
      });
    };
    $scope.label_width = function () {//label标签右侧对齐
      setTimeout(function () {
        var label_width = 0;
        $('.label_width').each(function (index, item) {
          if (label_width < item.clientWidth) {
            label_width = item.clientWidth;
          }
        });
        . $ ( '. LABEL_WIDTH') each (function (index, Item) { 
           //item.style.width LABEL_WIDTH + = 'PX'; 
            $ (Item) .width (LABEL_WIDTH); 
        }); 
      }); 
    }; 
    $ when scope.options_show = function () {// click on the drop-down box "default box" sign to the right of the triangle, the function triggered. Action: Let drop-down box to show or hide alternatives 
      $ ( 'options_show.') Each (function (index, Item) {. 
        $ (Item) .off ( 'the Click'); 
        var cust_three = $ (the this) .attr ( ' cust_three '); 
        $ (Item) .on (' the Click ', function () { 
          IF ($ (' # ul_div '+ cust_three) .is (': hidden ')) { 
            $ (' # ul_div '+ cust_three). Show (); 
            $ (cust_three + '.') .hide (); 
            $ ( '# Three' + cust_three) .removeClass ( 'before_click'). addClass ( 'after_click');. 
            $ ( 'Three.'
          The else {} 
            $ ( '# ul_div' + cust_three) .hide (); 
            $ ( '# Three' + cust_three) .removeClass ( 'after_click'). AddClass ( 'before_click');. 
          } 
        }); 
      }); 
    }; 
    scope.button_submit function = $ () { 
      . $ ( '. button_submit') each (function (index, Item) { 
        $ (Item) .off ( 'the Click'); 
        var = Self $ (the this) .attr ( 'Self '); 
        $ (Item) .on (' the Click ', function () { 
          the console.log (Self);
        });
      });
    };
    $ scope.three_click = function () {// All drop-down box to "alternatives" triangular number binding to the right click function. Role: After clicking, a request to the back-end data, the data is inserted into the following alternatives as details of the alternatives, and to all the drop-down box "alternatives" triangular number binding on the right side click functions again. 
      . $ ( '. three_click') each (function (index, Item) { 
        $ (Item) .off ( 'the Click'); 
        var cust_attr = $ (the this) .attr ( 'Self'); 
        $ (Item) .on ( 'the Click', function () { 
          IF ($ (Item) .hasClass ( 'after_click')) { 
            $ (Item) .removeClass ( 'after_click'). addClass ( 'before_click');. 
            $ ( 'ID #' + cust_attr) .empty (); 
            return; 
          } 
          $ (Item) .removeClass ( 'before_click'). addClass ( 'after_click');. 
          // here to send a request to the background 
          var default_array = [];
          .each $ ($ scope.cust_data.protoContext, function (key_outer, value) { 
            IF (Value.Type === 'SELECT') { 
              $ .each (value.value, function (index, value) { 
                $ .each ( value, function (Key, value) { 
                  IF (value.default_select === 0) { 
                    default_array.push (Key); 
                  }
                });
              }); 
            } 
          }); 
          $ scope.insert_form ($ scope.cust_data.protoContext, default_array, cust_attr) ; 
        }); 
      }); 
    }; 
    $ scope.insert_form = function (true_data, default_array, cust_attr) {// common functions. Action: inserting the data returned from the back to the lower bound of the alternatives and related functions. 
      cust_attr = cust_attr || '';
      = || default_array default_array []; 
      var STR = ''; 
      var = self_outer_id 'self_outer_id'; 
      var self_outer_index = 0; 
      $ .each (true_data, function (key_outer, value) { 
        IF (Value.Type === 'SELECT' ) { 
          STR + = '<div style = "the display: Flex; margin: Auto 0;">';
          str += '<div style="margin-left:10px;height:40px;line-height:40px;margin-top:10px;text-align:right;display:inline-block;" class="label_width">' + key_outer + '</div>';
          str += '<div>';
          str += '<div style="user-select: none;border-radius:5px;border:1px solid #ccc;height:40px;line-height:40px;margin-left:10px;margin-top:10px;padding-left:10px">';
          str += '<span id="' + self_outer_id + self_outer_next + '">' + default_array[self_outer_index] + '</span>';
          str += '<span class="before_click options_show" cust_three="' + self_outer_id + self_outer_next + '" id="three' + self_outer_id + self_outer_next + '" style="margin-right:10px;"></span>';
          str += '</div>';
          str += '<ul style="border-radius:5px;border:1px solid #ccc;margin-left:10px;padding:10px;" class="ul_options" id="ul_div' + self_outer_id + self_outer_next + '">';
          var self_inner_id = 'self_inner_id';
          $.each(value.value, function (index, value) {
            $.each(value, function (key_inner, value) {
              str += '<li style="height:45px;line-height:45px;">';
              str += '<span style="user-select: none;cursor:pointer" class="single_click" cust_option="' + self_outer_id + self_outer_next + '">' + key_inner + '</span>';
              if (value.isFinal === 0) {
                str += '<span self="' + self_inner_id + self_inner_next + '" class="three_click before_click three' + self_outer_id + self_outer_next + '"></span>';
                str += '</li>';
                str += '<div style="margin-left:20px;" id="id' + self_inner_id + self_inner_next + '" class="' + self_outer_id + self_outer_next + '">  </div>';
              } else {
                str += '</li>';
              }
            });
            self_inner_next += 1;
          });
          str += '</ul>';
          str += '</div>';
          str += '</div>';
          self_outer_next += 1;
          self_outer_index += 1;
        }
        if (value.type === 'input') {
          str += '<div style="display:flex;margin:10px;">';
          str += '<span style="height:40px;line-height:40px;text-align:right;display:inline-block;" class="label_width">' + key_outer + '</span>';
          str += '<input style="border-radius:5px;border:1px solid #ccc;height:40px;line-height:40px;margin-left:10px;padding-left:10px;" type="text" placeholder="' + value.range + '">';
          str += '<input style="text-align:center;cursor:pointer;width:50px;border-radius:5px;border:1px solid #ccc;height:40px;line-height:40px;margin-left:10px;" type="button" class="button_submit" self="' + value.range + '"  value="提交"/>';
          str += '</div>';
        }
      });
      var cust_id = cust_attr == '' ? '#add_cust_rule_content' : '#id' + cust_attr;
      $(cust_id).empty().append(str).show().find('.ul_options').hide();
      $scope.three_click();
      $scope.option_click();
      $scope.button_submit();
      $scope.options_show();
      $scope.label_width();
    };
    $scope.add_cust_rule = function () {
      //此处向后台发送请求并获取数据；
      $scope.is_show_alert = true;
      var default_array = [];// save this request to return the default value of all options drop-down box
      $.each($scope.cust_data.protoContext, function (key_outer, value) {
        if (value.type === 'select') {
          $.each(value.value, function (index, value) {
            $.each(value, function (key, value) {
              if (value.default_select === 0) {
                default_array.push(key);
              }
            });
          }); 
        } 
      }); 
      $ Scope.insert_form ($ scope.cust_data.protoContext, default_array); 
    }; 
    / * above "add a custom rule" * / 
  }); 
</ Script> 
</ body> 
</ HTML>

　　














Guess you like

Origin www.cnblogs.com/gushixianqiancheng/p/10963946.html
Recommended
微软回应中国区AI团队“打包赴美”传闻
Ranking
How to use ChatGPT to write 100,000+ hot articles for public accounts (includes prompt words)
sudo echo command execution Permission denied
ADO: Using Transactions to Operate Oracle Database
[Java] [Class and Object] equals, hashCode, clone methods
Linux virtual host function
Порт управления rabbitmq открыт
on,where
jQuery WeUI
How can there be a weed pilot in Hangzhou?
tcp / ip model four
Daily
More
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)

Code World

© 2018 codetd.com