paip.提升用户体验--radio图片选择器 easyui 实现..

#paip.提升用户体验--radio图片选择器 easyui 实现..

===================================



##原因...

--------------------

首先,寻找这个控件,但是没有..

只好自己实现,使用Listview..

但是多少framework都没lv,只好使用datagrid来的做..







##.keyword,subtitle关键字,子标题

-------------------------

js json 字符串的转换.

列表 行转列 方法..

grid 列格式化..

datagrid >>> listview



作者 老哇的爪子 Attilax 艾龙，  EMAIL:[e-mail]

来源： http://blog.****.net/attilax





##pseudo code伪码 处理流程

--------------------------



首先,捕获all json obj list

分页,5

line>> column..

绑定到个grid..(column 定义格式化到图片src)

设置图片边框,2px,normal:dot,color:gray   ,,,选择的:slot,color:red

设置mouse over,out event

获得值,,,一个是呈交的时候儿从slectpics pics 根据class..这个麻烦的..

一个是clieck的时候儿不个值放得个input里面,这个easy..











##actual code 实际代码如下

----------------

###捕获all json obj list

function getAjaxData()

{

var urlo4="data/defIcons.json";

  $.ajax({

            url:urlo4,

            dataType:"json",

            success:function(data){

             // $("#resText").html(date);

            // alert(data);

            //  alert(data[0]);

                //  var obj = eval(data);

                var obj=data;

                  logx("src::"+data[0].src);

                      var data2=Line2Col(data);

                    logx("line2col after:"+data2);

                    //return;

                //    var dataObjFmt=eval(data2);

                   addDataToGrid(data2);

                  

            }

       });

###

function Line2Col(data)

{

    var arrayObj = new Array();

    logx("dataarr.length:"+data.length);

    var arr = eval(data);  

    //arr=data;

    logx("<arr.length:"+arr.length);

for(var i=0;i<arr.length;i++){  

          var obj=arr[i];

          var s=obj.id+","+obj.src;

        

          arrayObj.push(s);

          if(i>=4)

              break;

   }  

    // arrayObj.push("testxxx");

     logx("arrayObjLeng:"+arrayObj.length);

     var s_r="";

     for(j=0;j<arrayObj.length;j++)

     {

         var s=arrayObj[j];

          var tmp=' "item@index": "@str"';

          tmp=tmp.replace("@index",j+1).replace("@str",s);

         s_r+=tmp+",";

        

     }

     s_r=s_r.substr(0,s_r.length-1);

      logx("s_r::"+s_r);

      s_r="[{"+s_r+"}]";

   return eval(s_r);

    

    

}



###bind to grid

function   addDataToGrid(data)

{$('#dg').datagrid({

            data: data,

            showHeader: false

            });

}



<table id="dg"  class="easyui-datagrid"    data-options="singleSelect:false" style="height:121px" >

    <thead>

    <tr>

      

 

   <th data-options="field:'item1' ,width:100,formatter:formatItem"  >item1</th>

     <th data-options="field:'item2' ,width:100,formatter:formatItem"  >部门名称</th>

       <th data-options="field:'item3' ,width:100,formatter:formatItem"  >部门名称</th>

         <th data-options="field:'item4' ,width:100,formatter:formatItem"  >部门名称</th>

           <th data-options="field:'item5' ,width:100,formatter:formatItem"  >item5</th>

 



    </tr>

    </thead>

    

</table>



 

function formatItem(val,row)

{

    var itemval=val;

    try{

    var a=val.split(",");

    var id=a[0];

    var src=a[1];

    }catch(e){}

    return '<div ><img id="icon_divO4_'+id+'"  class="img_def" onmouseover="over_event(this.id)" onmouseout="mouseout_event(this.id)" src="'+src+'" onclick="selectIcon('+id+')" /></div>';

    

}    

###set mouseout_event mouseover event

 <style type="text/css">

 

.img_def {

    

    border: 2px dotted #CCC;

}

 .over {

    border: 2px solid #F30;

}

.img_over {

    

    border: 2px solid #F30;

}

</style>



function mouseout_event(id)

{

$("#"+id).attr("class","img_def");    

}

function over_event(id)

{

$("#"+id).attr("class","img_over");    

}



### set click event

function selectIcon(id)

{

//alert(id);    

logx("slctIconId:"+id);

$("#selctIconId").attr("value",id);

}