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

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



##原因...

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

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

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

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







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

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

js json 字符串的转换.

列表 行转列 方法..

grid 列格式化..

datagrid >>> listview



作者 老哇的爪子 Attilax 艾龙,  EMAIL:1466519819@qq.com

来源: http://blog.csdn.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);

}

paip.提升用户体验--radio图片选择器 easyui 实现..的更多相关文章

  1. paip.提升用户体验---c++ qt自定义窗体(1)---标题栏的绘制

    源地址:http://blog.csdn.net/attilax/article/details/12343625 paip.提升用户体验---c++ qt自定义窗体(1)---标题栏的绘制 效果图: ...

  2. paip.提升用户体验--提升java的热部署热更新能力

    paip.提升用户体验--提升java的热部署热更新能力 想让java做到php那么好的热部署能力  "fix online"/在线修复吗??直接在服务器上修改源码生效,无需重启应 ...

  3. paip.提升用户体验----gcc c++ JIT-debugging 技术

    paip.提升用户体验----gcc  c++ JIT-debugging 技术 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http ...

  4. paip.提升用户体验-----c++ gcc 命令在notepad++扩展中的配置..

    paip.提升用户体验-----c++ gcc 命令在notepad++扩展中的配置.. 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址: ...

  5. paip.提升用户体验---c++ qt 取消gcc编译的警告信息.txt

    paip.提升用户体验---c++ qt 取消gcc编译的警告信息.txt 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http:// ...

  6. paip.提升用户体验---论文本编辑器的色彩方案

    paip.提升用户体验---论文本编辑器的色彩方案 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.ne ...

  7. Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..

    Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid Ap ...

  8. 使用渐进式JPEG来提升用户体验

    今天才认识到原来JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式).两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别 ...

  9. UI设计可供性解析:巧用隐藏的设计力提升用户体验

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 在实际的Web或App界面设计中,设计师们在学习和实践各种专业知识和技能之外,也会不可避免的遇到到各 ...

随机推荐

  1. $使用dom4j可解析 返回&#x等字样的 html转义字符

    如果以GET或POST请求某个系统返回,带有 $#x 那很有可能是axis服务器返回的. <?xml version="1.0" encoding="UTF-8&q ...

  2. 关于git-Git 分支管理和冲突解决

    创建分支 git branch 没有参数,显示本地版本库中所有的本地分支名称. 当前检出分支的前面会有星号. git branch newname 在当前检出分支上新建分支,名叫newname. gi ...

  3. Pig Latin

    function translate(str) { //return str; var list = ['a','e','i','o','u']; if(list.indexOf(str[0]) &g ...

  4. .net获取IP和MAC地址

    获取IP  解决request.UserHostAddress取不到真实IP private string GetClientIP()   {    string result = HttpConte ...

  5. maven学习(4)-本地项目打包发布到私有仓库

    发布本地项目到私服仓库 在前面章节有介绍maven发布本地jar包到私服仓库,这里详细介绍一下步骤. 在项目开发中通常会引用其他的jar,怎样把自己的项目做为一个jar包的形式发布到私服仓库中,主要有 ...

  6. expdp小记

    一.10.2.0.5要求expdp导出a用户b表空间下的数据. expdp \'/ as sysdba\' directory=mydir dumpfile=1.dmp schemas=a exclu ...

  7. Linux/UNIX脚本中 $0,$1,$2的含义

    linux中有三种标准输入输出,分别是STDIN,STDOUT,STDERR,对应的数字是0,1,2.   STDIN就是标准输入,默认从键盘读取信息: STDOUT是标准输出,默认将输出结果输出至终 ...

  8. lab 7 函数超级多的类

    #include<iostream>#include<string>#include<cmath>using namespace std; class Ration ...

  9. 利用PHP执行SQL文件,将SQL文件导入到数据库

    如何利用php自动执行.sql文件.其实很简单,就是获取sql文件中的内容,然后将每一句sql语句一次执行就行啦. 这是代码 //读取文件内容 $_sql = file_get_contents('t ...

  10. LeetCode:Permutations, Permutations II(求全排列)

    Permutations Given a collection of numbers, return all possible permutations. For example, [1,2,3] h ...