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

#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
           });
}

</tr>
</thead>

</table>

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 实现..相关推荐

paip.提升用户体验--提升java的热部署热更新能力
paip.提升用户体验--提升java的热部署热更新能力想让java做到php那么好的热部署能力 "fix online"/在线修复吗??直接在服务器上修改源码生效,无需重启应 ...
前端项目之--提升用户体验，提升前端性能
提升用户体验影响用户体验主要有两个方面,接口数据返回慢.渲染慢性能监控 performance API 控制台输入window.performance查看 ✨针对数据返回慢的解决方案数据过大 1 ...
使用渐进式JPEG来提升用户体验
今天才认识到原来JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式).两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别 ...
客户体验是什么？如何提升用户体验从而提高产品成单率？必读！
近年来,"客户体验"成了一个很常用的词,但实际上很多人都无法给到一明确定义,尽管许多企业都将改进客户体验视为一项差异化的竞争优势.可是,如果连某种东西的定义都说不清楚,又如何谈得上 ...
海外虚拟主机空间：如何使用CDN加速提升用户体验？
随着互联网的迅速发展和全球化的趋势,越来越多的企业和个人选择海外虚拟主机空间.然而,由于服务器的地理位置和网络延迟等原因,这些网站在国内访问时可能会遇到较慢的加载速度和不稳定的用户体验.为了解决这一问 ...
描点链接元素的优化提升用户体验
用一些大网站的时候,发现有一个很细节的共同点:点击链接元素的时候,链接元素会产生一个明显的边框,而且这个边框的颜色和#f27b04很接近,我觉得既然很多大网站都这么做,这其中肯定有一些用户体验方面的东 ...
网络营销外包——网络营销外包专员浅析提升用户体验从哪入手？
众所周知,在网站运营期间,网站跳出率的高低直接反映出用户对网站喜爱与否,也是检测网站性能是否丝滑的关键点,如果网站跳出率越高就证明用户体验越差,搜索引擎也不会更加注重抓取该网站.那么如果提高用户体验, ...
纯前端表格控件SpreadJS V12.1 隆重登场，专注易用性，提升用户体验
一款优秀的开发工具,在更新迭代中,除了要满足不同场景的业务需求,也需不断优化已有功能,尤其是细节方面,要能为用户带来使用体验和开发效率的提升. 作为一款备受业界专家和开发者认可的纯前端类Excel ...
android 6.0适应的机型,提升用户体验可升Android 6.0机型盘点
原标题:提升用户体验可升Android 6.0机型盘点 [手机中国导购]2009年Android系统正式发布,由此加速手机走向智能化进度.如今,随着Android系统日渐成熟,众多手机厂商都在此基 ...
electron加载html加载不起来,Electron 预加载远程页面提升用户体验
使用场景 Electron 内置 Chromium 和 Node.js,为了提升用户体验,通常 Electron 封装的前端静态文件存储在客户端本地.但总有一些特殊情况,会使用到部分远程页面. 比如微 ...

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

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

最新文章

热门文章