Home > Developer > Web Develop
Project development experience sharing-beautiful pop-up box effects and Project Development Experience Sharing
In the previous blog, we shared the dynamic page loading experience paging query. Today, we will share with you the UI design experience: the beautiful pop-up box!
Introduction You should have seen such a pop-up box (for example) when using the software. You can double-click the box to achieve the selected effect. You can select one option and select all options, compared with the commonly used one-by-one check method, the style is not only beautiful, but also more convenient: when our project encounters similar functions, such as specifying templates for different course types, you can specify either a single or all, and also cancel a single (or all) designation. In this case, we can learn from this function to provide a higher user experience! Let's take a look at the specific implementation: Ideas1. design the UI style as needed
2. Implement results through js Code
Implementation1. design the UI style and layout as needed:
<Body> <div id = "openClassType" class = "easyui-window" title = "add course type" data-options = "modal: true, closed: true, maximizable: false, minimizable: false, conCls: 'icon-save' "style =" width: pixel PX; height: 480px; padding: 10px; "> <div title =" template name "> template name: <input class =" easyui-combobox "id =" template "name =" template "style =" width: 150px "data-options =" url: 'querytemplate', method: 'get', valueField: 'id', textField: 'templatename', panelHeight: 'auto', panelWidth: '150px '"> </div> <div> ___________________________________________ <br> type of the course to be selected: Type of the selected course: <br> </div> <table style = "width: 100%; padding: 5px; "border =" 0 "cellpadding =" 0 "cellspacing =" 0 "> <tr> <td> <select multiple =" multiple "id =" select1 "style =" width: 150px; height: 300px; float: left; "> <option value =" professional elective course practice "> professional elective course practice </option> <option value =" professional elective course theory "> professional elective course theory </option> <option value = "public course practice"> public course practice </option> <option value = "public course theory"> public course theory </option> <option value = "professional required course practice"> professional required course practice </option> <option value = "professional required course theory"> professional required course theory </option> <option value = "Public required course theory"> Public required course theory </option> <option value = "Public required course practice"> Public required course practice </option> <option value = "Public optional course theory"> Public optional course theory </option> <option value = "Public optional course practice"> public elective course practices </option> </select> <div style = "float: left "style =" padding: 20px; margin-top: 20px; "> <span id =" add1 "style =" width: 420px; height: 480px; padding: 10px; "hidden =" true "> <a type =" button "class =" easyui-linkbutton "value ="> "data-options =" iconCls: 'icon-redo '"> Add </a> </span> <br/> <span id =" add2 "style =" width: 420px; height: 480px; padding: 10px; "hidden =" true "> <a type =" button "class =" easyui-linkbutton "value ="> "data-options =" iconCls: 'icon-redo '"> Add </a> </span> <br/> <span id =" add3 "style =" width: 420px; height: 480px; padding: 10px; "hidden =" true "> <a type =" button "class =" easyui-linkbutton "value ="> "data-options =" iconCls: 'icon-redo '"> add </a> </span> <br/> <span id =" add "style =" width: 420px; height: 480px; padding: 10px; "> <a type =" button "class =" easyui-linkbutton "value ="> "data-options =" iconCls: 'icon-redo '"> Add </a> </span> <br/> <span id =" add_all "style =" padding: 10px; "> <a type =" button "class =" easyui-linkbutton "value ="> "data-options =" iconCls: 'icon-OK '"> select all </a> </span> <br/> <span id =" remove "style =" width: 420px; height: 480px; padding: 10px; "> <a type =" button "class =" easyui-linkbutton "value =" <"data-options =" iconCls: 'icon-undo '"> Delete </a> </span> <br/> <span id =" remove_all "style =" width: 420px; height: 480px; padding: 10px; "> <a type =" button "class =" easyui-linkbutton "value =" <"data-options =" iconCls: 'icon-cancel' "> delete all </a> </span> <br/> <span id =" move_top "style =" width: 420px; height: 480px; padding: 10px; "> <a type =" button "value =" button "class =" easyui-linkbutton "data-options =" iconCls: 'icon-add' "> up </a> </span> <br/> <span id =" move_mutton "style =" width: 420px; height: 480px; padding: 10px; "> <a type =" button "class =" easyui-linkbutton "value =" inline "data-options =" iconCls: 'icon-delete' "> down </a> </span> <br/> <span id =" top "style =" width: 420px; height: 480px; padding: 10px; "hidden =" true "> <input type =" button "class =" easyui-linkbutton "data-options =" iconCls: 'icon-add' "value =" placed on Top "/> </span> <br/> <span id =" buttom "style =" width: 420px; height: 480px; padding: 10px; "hidden =" true "> <input type =" button "class =" easyui-linkbutton "data-options =" iconCls: 'icon-add' "value =" bottom "/> <a href =" ### "> </a> </span> </div> <select multiple = "multiple" id = "select2" style = "width: 150px; height: 300px; float: lfet; "> </select> </div> </td> </tr> </table> <div id =" addone-buttons "style =" width: 160px; margin-left: 110px; "> <a href =" javascript: void (0) "class =" easyui-linkbutton c6 "onclick =" saveTemplate () "style =" width: 60px "> OK </a> <a href =" javascript: void (0) "class =" easyui-linkbutton "onclick =" javascript: $ ('# openClassType '). window ('close') "style =" width: 60px "> cancel </a> </div> </body>2. Add, select, delete, and delete all functions using js Code
<Script type = "text/javascript"> // Add the course type information function saveTemplate () {$ ('# fm '). form ('submit ', {success: function (data) {$ (' # fm '). form ('clear'); $ ('# addone '). window ('close'); $ ('# dg '). datagrid ("reload"); $. messager. alert ('hprompt ', 'added successfully') ;}, error: function (data) {alert ("failed to add ");}}); $ ('# openClassType '). window ('close')} // switch JQuery $ (function () {// move to the right $ ('# add') in the drop-down box '). click (function () {// obtain the selected option, delete it, and append it to the other party $ ('# select1 Option: selected '). appendTo ('# select2') ;}); // move to the left $ ('# delete '). click (function () {$ ('# select2 option: selected '). appendTo ('# select1') ;}); // move all to the right $ ('# add_all '). click (function () {// obtain all options, delete them, and append them to the other party $ ('# select1 option '). appendTo ('# select2') ;}); // move all to the left $ ('# remove_all '). click (function () {$ ('# select2 option '). appendTo ('# select1') ;}); // double-click the option $ ('# select1 '). dblclick (function () {// bind double-click event // obtain all options, Delete and append $ ("option: selected", this) to the other party ). appendTo ('# select2'); // append to peer}); // double-click the option $ ('# select2 '). dblclick (function () {$ ("option: selected", this ). appendTo ('# select1') ;}); // move a row up $ ("# move_top "). click (function () {if (null ==$ ('# select2 '). val () {alert ('select an item'); return false;} var selected = $ ("# select2 option: selected"); if (selected. get (0 ). index! = 0) {selected. each (function () {$ (this ). prev (). before ($ (this) ;}}); // move a row down $ ("# move_mutton "). click (function () {if (null ==$ ('# select2 '). val () {alert ('select an option '); return false;} var allOpts = $ ("# select2 option"); var selected = $ ("# select2 option: selected "); if (selected. get (selected. length-1 ). index! = AllOpts. length-1) {for (I = selected. length-1; I> = 0; I --) {var item = $ (selected. get (I); item. insertAfter (item. next () ;}}); // move to the bottom $ ("# buttom "). click (function () {if (null ==$ ('# select2 '). val () {alert ('select an option '); return false;} var allOpts = $ ("# select2 option"); var selected = $ ("# select2 option: selected "); if (selected. get (selected. length-1 ). index! = AllOpts. length-1) {for (I = selected. length-1; I> = 0; I --) {var item = $ (selected. get (I); var buttom = $ (allOpts. get (length-1); item. insertAfter (buttom) ;}}); // move to the top $ ("# top "). click (function () {if (null ==$ ('# select2 '). val () {alert ('select an option '); return false;} var allOpts = $ ("# select2 option"); var selected = $ ("# select2 option: selected "); if (selected. get (0 ). index! = 0) {for (I = 0; I <selected. length; I ++) {var item = $ (selected. get (I); var top = $ (allOpts. get (0); item. insertBefore (top) ;}}) ;}); // move up function moveUp (selectObj) {var theObjOptions = selectObj. options; // The top one does not need to be moved, so it starts from I = 1 directly for (var I = 1; I <theObjOptions. length; I ++) {if (theObjOptions [I]. selected &&! TheObjOptions [I-1]. selected) {swapOptionProperties (theObjOptions [I], theObjOptions [I-1]); }}// Move Down function moveDown (selectObj) {var theObjOptions = selectObj. options; // move down. The last one does not need to be processed, so it starts directly from the last one for (var I = theObjOptions. length-2; I>-1; I --) {if (theObjOptions [I]. selected &&! TheObjOptions [I + 1]. selected) {swapOptionProperties (theObjOptions [I], theObjOptions [I + 1]) ;}}// move the function swapOptionProperties (option1, option2) up and down) {// switch trilogy var tempStr = option1.value; // option1 is assigned to tempStr option1.value = option2.value; // exchange, option2 is assigned to option1 option2.value = tempStr; // exchange, tempValSource is assigned to tempStrvar tempValSource = option1.valSource; // option1 is assigned to tempValSourceoption1.valSource = option2.valSource; // exchange, and option2 is assigned to option1option2. valSource = tempValSource; // exchange, tempValSource is assigned to option2 // obtain the value tempStr = option1.text; option1.text = option2.text; option2.text = tempStr; tempStr = option1.selected; option1.selected = option2.selected; option2.selected = tempStr;} function onrightClick () {var selected = $ ('# select2 '). text (); alert (selected);} function onleftClick () {var selected = $ ("# select1 "). text (); alert (selected) ;}</script>
Effect
Summary
From the user's point of view, the user-oriented, closer to the user's usage habits, the higher the software affinity, the more popular the software development!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
