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
});
}
<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 实现..的更多相关文章
- paip.提升用户体验---c++ qt自定义窗体(1)---标题栏的绘制
源地址:http://blog.csdn.net/attilax/article/details/12343625 paip.提升用户体验---c++ qt自定义窗体(1)---标题栏的绘制 效果图: ...
- paip.提升用户体验--提升java的热部署热更新能力
paip.提升用户体验--提升java的热部署热更新能力 想让java做到php那么好的热部署能力 "fix online"/在线修复吗??直接在服务器上修改源码生效,无需重启应 ...
- paip.提升用户体验----gcc c++ JIT-debugging 技术
paip.提升用户体验----gcc c++ JIT-debugging 技术 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http ...
- paip.提升用户体验-----c++ gcc 命令在notepad++扩展中的配置..
paip.提升用户体验-----c++ gcc 命令在notepad++扩展中的配置.. 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址: ...
- paip.提升用户体验---c++ qt 取消gcc编译的警告信息.txt
paip.提升用户体验---c++ qt 取消gcc编译的警告信息.txt 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...
- paip.提升用户体验---论文本编辑器的色彩方案
paip.提升用户体验---论文本编辑器的色彩方案 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.ne ...
- Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..
Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid Ap ...
- 使用渐进式JPEG来提升用户体验
今天才认识到原来JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式).两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别 ...
- UI设计可供性解析:巧用隐藏的设计力提升用户体验
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 在实际的Web或App界面设计中,设计师们在学习和实践各种专业知识和技能之外,也会不可避免的遇到到各 ...
随机推荐
- $使用dom4j可解析 返回&#x等字样的 html转义字符
如果以GET或POST请求某个系统返回,带有 $#x 那很有可能是axis服务器返回的. <?xml version="1.0" encoding="UTF-8&q ...
- 关于git-Git 分支管理和冲突解决
创建分支 git branch 没有参数,显示本地版本库中所有的本地分支名称. 当前检出分支的前面会有星号. git branch newname 在当前检出分支上新建分支,名叫newname. gi ...
- Pig Latin
function translate(str) { //return str; var list = ['a','e','i','o','u']; if(list.indexOf(str[0]) &g ...
- .net获取IP和MAC地址
获取IP 解决request.UserHostAddress取不到真实IP private string GetClientIP() { string result = HttpConte ...
- maven学习(4)-本地项目打包发布到私有仓库
发布本地项目到私服仓库 在前面章节有介绍maven发布本地jar包到私服仓库,这里详细介绍一下步骤. 在项目开发中通常会引用其他的jar,怎样把自己的项目做为一个jar包的形式发布到私服仓库中,主要有 ...
- expdp小记
一.10.2.0.5要求expdp导出a用户b表空间下的数据. expdp \'/ as sysdba\' directory=mydir dumpfile=1.dmp schemas=a exclu ...
- Linux/UNIX脚本中 $0,$1,$2的含义
linux中有三种标准输入输出,分别是STDIN,STDOUT,STDERR,对应的数字是0,1,2. STDIN就是标准输入,默认从键盘读取信息: STDOUT是标准输出,默认将输出结果输出至终 ...
- lab 7 函数超级多的类
#include<iostream>#include<string>#include<cmath>using namespace std; class Ration ...
- 利用PHP执行SQL文件,将SQL文件导入到数据库
如何利用php自动执行.sql文件.其实很简单,就是获取sql文件中的内容,然后将每一句sql语句一次执行就行啦. 这是代码 //读取文件内容 $_sql = file_get_contents('t ...
- LeetCode:Permutations, Permutations II(求全排列)
Permutations Given a collection of numbers, return all possible permutations. For example, [1,2,3] h ...