Win8 Metro风格的Web桌面HteOS

Checkbox类:

1.实现checkbox的全选功能

<script type="text/javascript">
//全选checkbox:1、当全选checkbox勾选,子checkbox(name为'ids'的checkbox)自动全部勾选
//		2、当全选checkbox取消勾选,子checkbox自动全部取消勾选
function  checkAll(){
      if($("#checkall")[0].checked){
    	  $("input[type='checkbox'][name='ids']").attr("checked","checked");
      }else{
    	  $("input[type='checkbox'][name='ids']").attr("checked",null);
      }
}
//子checkbox:1、当所有子checkbox全部勾选时,全选checkbox自动勾选
//2、当有一个子checkbox没有勾选时,全选checkbox自动改为未勾选
function changeCheckCount(){
       var count=0;
	   $("input[type='checkbox'][name='ids']").each(function(index,data){
            if(this.checked){
            	count++;
            }
	   });
       if(count== $("input[type='checkbox'][name='ids']").length){
    	   $("#checkall").attr("checked","checked");
       }else{
    	   $("#checkall").attr("checked",null);
       }
}
</script>
<td><!-- 全选checkbox -->
	<s:checkbox name="checkall" id="checkall" value="" cssClass="checkbox" onclick="checkAll()"/>
</td>
<td><!-- 子checkbox -->
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/>
</td>

2.获取checkbox被选中的个数,并将checkbox的值组织成字符串

<script type="text/javascript">
//1、获取checkbox选中的个数:count
//2、将选中的checkbox的值(此例子为id)组织成"id,id,id,..."类型的字符串,方便action获取:ids
function checkbox(){
    var count=0;
    var ids="";
    $("input[type='checkbox'][name='ids']").each(function(index,data){
       if(this.checked){
          count++;
          if(count==1){
              ids=$(this).val();
          }else{
              ids=ids+","+$(this).val();
          }
       }
   });
}

</script> 
<td>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox"  />
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" "/>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" "/>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" "/>
</td>

Select类

1.jQuery实现下拉列表的联动,实现省份和城市的关联

<script type="text/javascript">
//实现省份和城市的二级联动
/*
jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求,[]为可选属性,此例子选了[data],[callback]
参数:
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
*/
function showCity(value){
	//通过action里的showCity函数实现通过省份名字获取对应省份下的城市列表,并返回相应的数据
	//{name:value}:value为省份下拉列表传过来的省份名字
    $.post("${pageContext.request.contextPath}/company_showCity.action",{name:value} ,function(data,textStatuts){
            //alert(data);
            var dataObj=eval("("+data+")");
            //alert(dataObj);

            //先删除之前一次加载的城市
            $("select[name='city'] option[value!='']").remove();

            //将城市封装成option后加到select里,格式如下
            // <select name="city" style="width:90%">
                //<option value="">--------</option>
            //</select>
            for(var i=0;i<dataObj.length;i++){
                  var $option=$("<option></option>");
                  $option.attr("value",dataObj[i].name);
                  $option.text(dataObj[i].name);
                  $("select[name='city']").append($option);
            }
     });
}
</script>
<tr>
	<td>省份:</td>
	<td>
        <s:select list="#provinceList" name="province" id="province"
                listKey="name" listValue="name"
                headerKey="" headerValue="--------"
                cssStyle="width:90%" onchange="showCity(this.value)">
        </s:select>
	</td>
	<td>城市:</td>
	<td>
	    <s:select list="{}" name="city" id="city"
	               headerKey="" headerValue="--------" cssStyle="width:90%" >
	    </s:select>
	</td>
</tr>

company.action中的showCity函数

/**	通过省份显示对应城市
 * @throws IOException **/
public String showCity() throws IOException{
	//拿到jsp中省份的名字
	String name=request.getParameter("name");
	if(StringUtils.isNotBlank(name)){
		//通过省份名字拿到对应省份实体(下面查询城市时,用来拿省份id)
		Province province=provinceService.findProvinceByName(name);
		//通过省份id查询该省份下的所有城市
		List<City> cityList=cityService.findCityByPid(province.getId());

		//New一个JsonConfig
		JsonConfig config=new JsonConfig();
		//设置不要获取的属性列,只取city表里的name属性,根据自己定义的city表进行定义,
		config.setExcludes(new String[]{"id","pycode","pid","postcode","areacode"});
		//将List转换为jsonArray
		JSONArray jsonArray=JSONArray.fromObject(cityList,config);
		response.setCharacterEncoding("utf-8");
		//将jsonArray转成字符串后发送给jsp页面
		response.getWriter().print(jsonArray.toString());
	}
	return null;
}

Win8 Metro风格的Web桌面HteOS

时间: 2024-10-11 23:21:22

Win8 Metro风格的Web桌面HteOS的相关文章

HteOS - Win8 Metro UI 风格的Web桌面

HteOS是一款Win8 Metro UI风格的Web桌面应用开发框架 现代的.简约的界面,丰富的组件.功能,全新的Web桌面 全新的Web桌面应用开发框架 全新设计 全新的Web桌面设计,告别古板与生硬 Win8 Metro风格界面,动态磁贴灵动轻巧 二次开发 应用场景广泛,能够适用各种项目兼容IE8+浏览器,快速进行二次开发 应用部署 没有环境限制,可以在任何平台进行部署不需要进行额外的部署设置,即插即用 不拘泥于平庸的Web桌面设计 卡片布局 Metro风格的卡片布局,不再是审美疲劳的树状

windows8开发-关于wp7应用迁移到win8 metro风格

虽然微软说,wp7应用移植到win8上面是比较简单,只需要修改部分API和设计原则上的细节,同时它也提供了一份比较简洁的参考文档: 而实际上这种移植的工作量还是不小的,尤其当应用引用了较多底层的API的时候. 下面是移植应用过程中需要考虑的几个问题: (1)UI: 基本所有的UI页面都会有所改动,主要是一个引用库的变迁,某些wp7上的控件在win8上面是不支持的,例如PhoneApplicationPage. (2)数据库: 目前win8没有源生数据库,不过可以使用sqlite来实现数据存储;w

Metro 风格页面设计

    微软推出的metro风格,已经帅到无朋友了.Metro UI包含了所有的现代web设计的特点,包括了,简化,基于网格的界面,并且富有连续性 百度了一下,发现实现metro风格设计的插件还真不少,到底选择哪一款呢?

RESTful风格的Web服务框架:Swagger

Swagger与SpringMVC项目整合 为了方便的管理项目中API接口,在网上找了好多关于API接口管理的资料,感觉目前最流行的莫过于Swagger了,功能强大,UI界面漂亮,并且支持在线测试等等,所以本人仔细研究了下Swagger的使用,下面就如何将Swagger与个人的SpringMVC项目进行整合做详细说明: 最终API管理界面:  详细步骤: Step1:项目中引入相关jar包: <properties> <project.build.sourceEncoding>UT

Android Metro风格的Launcher开发系列第二篇

前言: 各位小伙伴们请原谅我隔了这么久才开始写这一系列的第二篇博客,没办法忙新产品发布,好了废话不说了,先回顾一下:在我的上一篇博客Android Metro风格的Launcher开发系列第一篇写了如何配置Android开发环境,只是用文字和图片展示了开发Metro风格Launcher的初步设计和产品要求,这一篇文章将会从代码上讲解如何实现对应的UI效果,好了,评书开讲! Launcher主体框架实现: Launcher主体框架我选用的是大家所熟悉的ViewPager控件,因为ViewPager

win8 metro 调用摄像头拍摄照片并将照片保存在相应的位置

刚刚做过这类开发,所以就先献丑了,当然所贴上的源码都是经过验证过的,已经运行成功了,希望可以给大家一些借鉴: 下面是metro UI代码: <Page x:Class="Camera.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

搭建一个RESTFUL风格的Web Service (Maven版本)

[该教程翻译自Spring官方,并进行适当删减.] 你将搭建的 你将搭建一个可以接受Http Get 请求的web service, http://localhost:8080/greeting 并将以JSON字符串的形式返回问候, {"id":1,"content":"Hello, World!"} 工具 一个文本编辑器,JDK1.6及以上,Maven 3.0+或者Gradle 1.11+.(本文将使用Maven) 下面是pom.xml文件的清

Web桌面应用框架2:著名的WEB桌面应用分析

前一篇文章里,分析了包括NW.js和electron这种纯JS框架在内的几种Web桌面应用开发方式,实际上还有一种最古老的方式,那就是嵌入WebView的方式. 嵌入WebView的方式和整个程序都是WEB窗口不同,仅在窗口的部分子窗口使用WebView,和原生UI或DirectUI结合的方式. 这种在C/C++程序里嵌入WebView的方式,由于没有一种公认.通用的框架或方法,基本是最困难和最原始的方式蛮干,或者自研平台,难以公开.但是也有很多效果很棒,很著名的软件.那么下面我们来细数一下这些

【转载】Android Metro风格的Launcher开发系列第二篇

前言: 各位小伙伴们请原谅我隔了这么久才开始写这一系列的第二篇博客,没办法忙新产品发布,好了废话不说了,先回顾一下:在我的上一篇博客Android Metro风格的Launcher开发系列第一篇写了如何配置Android开发环境,只是用文字和图片展示了开发Metro风格Launcher的初步设计和产品要求,这一篇文章将会从代码上讲解如何实现对应的UI效果,好了,评书开讲! Launcher主体框架实现: Launcher主体框架我选用的是大家所熟悉的ViewPager控件,因为ViewPager