* Langitem: code for task #84531

module/dev/css/langitem.css

@@ -1,14 +1,16 @@
 .flex {display: flex;}
 .h-32 {height: 32px;}
 .py-6 {padding: 6px 0;}
-.my-6 {margin: 6px 0;}
+.my-12 {margin: 12px 0;}
 .title {font-size: 13px; color: #313C52; font-weight: 700; height: 40px; text-align: center;}
 
 /* side-left */
 .main-content > .side-left {flex: 0 0 160px; margin-left: 64px; width: 160px;}
-.label-list > .input-label {display: flex; align-items: center; justify-content: center;}
+.label-list {background: #F8F8F8; padding: 5px 0;}
+.label-list > .input-label {display: flex; align-items: center; cursor: pointer; padding-left: 40px;}
 
 /* side-right */
 .main-content > .side-right {margin-left: 50px;}
+.main-content > .side-right > .input-list {padding: 5px 0;}
 .main-content > .side-right > .input-list > .input-control {position: relative;}
-.main-content > .side-right > .input-list > .input-control > i.icon {position: absolute; font-size: 25px; left: -60px; top: 8px;}
+.main-content > .side-right > .input-list > .input-control > i.icon {position: absolute; font-size: 25px; left: -40px; top: 3px;}

module/dev/js/langitem.js

@@ -0,0 +1,35 @@
+$(function()
+{ 
+    $(".input-list").on("click", 'input', function(event) 
+    {
+        addActive(event.target.id);
+    });
+    $(".input-list").on("blur", 'input', function(event) 
+    {
+	removeActive(event.target.id);
+    });
+    $('.label-list').on('click', '.input-label', function(e)
+    {
+	var clearId = $('.label-list > .text-primary').attr('labelid');
+        var clickId = $(e.target).attr('labelid');
+	if (clearId && clearId != clickId)
+	{
+            removeActive(clearId);
+	}
+	if (clickId && clickId != clearId)
+	{
+            addActive(clickId);
+	    $('#' + clickId).focus();
+	}
+    });
+    function addActive(id)
+    {
+        $('[labelid=' + id + ']').addClass('text-primary');
+        $('[iconid=' + id + ']').removeClass('hidden');
+    };
+    function removeActive(id)
+    {
+        $('[labelid=' + id + ']').removeClass('text-primary');
+        $('[iconid=' + id + ']').addClass('hidden');
+    };
+})

module/dev/view/langitem.html.php

@@ -24,15 +24,20 @@
   <div class="side-left">
     <div class="title">默认值</div>
     <div class="label-list">
-      <div class="input-label h-32 my-6">项目集</div>
+      <div labelId="123456Input" class="input-label h-32 my-12">项目集</div>
+      <div labelId="223456Input" class="input-label h-32 my-12">产品</div>
     </div>
   </div>
   <div class="side-right">
     <div class="title">修改值</div>
     <div class="input-list">
-     <div class="input-control h-32 py-6">
-       <i class="icon icon-angle-right text-primary"></i>
-       <input class="form-control" placeholder="项目集"></input>
+     <div class="input-control h-32 my-12">
+       <input id="123456Input" class="form-control shadow-primary-hover" placeholder="项目集"></input>
+       <i iconId="123456Input" class="icon icon-angle-right text-primary hidden"></i>
+     </div>
+     <div class="input-control h-32 my-12">
+       <input id="223456Input" class="form-control shadow-primary-hover" placeholder="产品"></input>
+       <i iconId="223456Input" class="icon icon-angle-right text-primary hidden"></i>
      </div>
     </div>
   </div>