`

YUI样式的一点心得

    博客分类：
  • js
YUIYahoojsonJSPHTML 
阅读更多
<%@ page language="java" import="java.util.Date" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>  
<%@include file="/public/jsp/init.jsp"%>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/public/ui/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/public/ui/yui/connection/connection-min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<title>小姐维护</title>
<p:jsLib>
{<c:out escapeXml="false" value="${uiLibs}"/>,
components:['PORTAL.widget.form',
'PORTAL.widget.datatable',
'PORTAL.widget.button',
'PORTAL.widget.container','connection']}
</p:jsLib>
<Script language="javaScript">
PORTAL.namespace("page");
var D = PORTAL.widget.DialogFactory;

//页面初始化
YAHOO.util.Event.onDOMReady(function(){
});

//外部接口
(function(){
PORTAL.page.interface = {
hiddenDialog:function(){
D.get('dialog1').hide();
},
//tmpObj,用于记录iframe 中的dataTable 对象
tmpObj:{},
setItemValue:function(rs){
var obj = PORTAL.page.interface.tmpObj;
obj.datatable.updateCell(obj.record,"itemName",rs.getData("name"));
        obj.datatable.updateCell(obj.record,"itemVersion",rs.getData("ecn"));
        D.get('vendorItemDialog').hide();
}
};

})();

//页面业务类
(function(){
PORTAL.page.bussiness={
//处理返回成功的函数
handleSuccess:function(o) {
if (o.responseText !== undefined) {
var result=eval("("+o.responseText+")");
alert(o.responseText);
}
},
handleFailure:function(o) {
//处理失败的函数
if (o.responseText !== undefined) {
alert("HTTP状态: " + o.status);
alert("HTTP状态代码的信息: " + o.statusText);
}
},
doSave:function(){//新增保存方法

alert('提交');
//回调函数
var callback = {
success:function(o){
var status = YAHOO.lang.JSON.parse(o.responseText);
        if(!status.status){        
        alert("×错误！(请选择正确选项)");
        YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("succeMes"),"display","none");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("errorMes"),"display","none");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("excepMes"),"display","block");
window.setTimeout(function(){
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("errorMes"),"display","none");
},3000);
        }else{
alert("√保存成功！");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("succeMes"),"display","block");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("errorMes"),"display","none");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("excepMes"),"display","none");
window.setTimeout(function(){
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("succeMes"),"display","none");
},3000);
}
},failure: function(o) {
            alert(o.responseText);
            YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("succeMes"),"display","none");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("errorMes"),"display","block");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("excepMes"),"display","none");
window.setTimeout(function(){
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("excepMes"),"display","none");
},3000);
            }
};
var id = document.getElementById("Pid").value;
var no = document.getElementById("vendorNo").value;
var name = document.getElementById("vendorname").value;
var canBeConsumed = document.getElementById("canBeConsumed").checked;
var canBeReceived = document.getElementById("canBeReceived").checked;
var desc = document.getElementById("desc").value;
var sUrl= PORTAL.constant.CONTEXT_PATH +"/views/masterData/vendor/vendorMaintenanceAction!doSave.action";
var postData="Pid="+id+"&vendorNo="+no+"&vendorname="+name+"&canBeConsumed="+canBeConsumed+"&canBeReceived="+canBeReceived+"&desc="+desc;
alert(postData);
var request = YAHOO.util.Connect.asyncRequest("POST",sUrl,callback, postData);
},
canBeConsumedValue:function (){// 可接受人员 alert("select");
var obj = document.getElementById("selectCanBeConsumed");
var index = obj.selectedIndex; // 选中索引
var value = obj.options[index].value; // 选中值
if(value!=null){
document.getElementById("canBeConsumed").value=value;
}else{
document.getElementById("canBeConsumed").value=" ";
}
},
canBeReceivedValue:function (){//可消人员 alert("select1");
var obj = document.getElementById("selectCanBeReceived");
alert(obj);
var index = obj.selectedIndex; // 选中索引
alert(index);
var value = obj.options[index].value; // 选中值
if(value!=null){
document.getElementById("canBeReceived").value=value;
}else{
document.getElementById("canBeReceived").value=" ";
}
},
getVendorDetail:function (){//得到单个客户
//回调函数
var callback = {
success:function(o){
var status = YAHOO.lang.JSON.parse(o.responseText);
        if(!status.status){        
        alert("×错误！(改小姐不存在！请重新输入！)");
        YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("succeMes"),"display","none");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("errorMes"),"display","block");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("excepMes"),"display","none");
window.setTimeout(function(){
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("errorMes"),"display","none");
},3000);
        }else{
        YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("succeMes"),"display","block");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("errorMes"),"display","none");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("excepMes"),"display","none");
window.setTimeout(function(){
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("succeMes"),"display","none");
},3000);
        YAHOO.util.Dom.get("vendorNo").value=status.result.no;
YAHOO.util.Dom.get("vendorname").value=status.result.name;
YAHOO.util.Dom.get("canBeConsumed").value=status.result.canBeConsumed;
YAHOO.util.Dom.get("canBeReceived").value=status.result.canBeReceived;
YAHOO.util.Dom.get("desc").value=status.result.desc;
YAHOO.util.Dom.get("createUser").value=status.result.createUser.id;
YAHOO.util.Dom.get("createDate").value=status.result.createDate;
YAHOO.util.Dom.get("modifyUser").value=status.result.modifyUser.id;
YAHOO.util.Dom.get("modifyDate").value=status.result.modifyDate;
}
},failure: function(o) {
            alert(o.responseText);
            } //处理成功对应的函数
};
alert("fdsfdsfsfds");
var no = document.getElementById("vendorNo").value;
alert("jagdjhfjsdhgf");
var postData = "vendorNO="+no;
alert("====================="+no);
var sUrl= PORTAL.constant.CONTEXT_PATH +"/views/masterData/vendor/vendorMaintenance/vendorMaintenanceAction!getVendorDetail.action";
alert(sUrl);

try{
var request = YAHOO.util.Connect.asyncRequest("POST",sUrl,callback, postData);
}catch(ex){alert(ex.message);}
},
find:function(){//模糊查询
//回调函数
var callback = {
success:function(o){
var status = YAHOO.lang.JSON.parse(o.responseText);
        if(!status.status){        
        alert("×错误！(请选择正确选项)");
        }else{
alert("√查询成功！");
}
},failure: function(o) {
            alert(o.responseText);
            } //处理成功对应的函数
};
var vendorName = document.getElementById("vendorname").value;
var vendorNo = document.getElementById("vendorNo").value;
var postData = "vendorname="+vendorName+"&vendorNo="+vendorNo;
alert("fddddddd");
var path= PORTAL.constant.CONTEXT_PATH+"/views/masterData/vendor/vendorMaintenance/vendorList.jsp?vendorNo="+vendorNo+"&vendorname="+vendorName;
var panel = D.show("dialog1", 
            { fixedcenter : true,
              visible : true, 
              constraintoviewport : true,
              header:"供应商列表",
              body:"<iframe frameborder=0 width='500px' height='350px' src='"+path+"'></iframe>",
              buttons : [ 
                          { text:"取消", handler:function(){
this.hide();
}}]
             } );
},
setFormValue:function(obj){//给表单赋值
YAHOO.util.Dom.get("vendorNo").value=obj.getData("no");
alert(YAHOO.util.Dom.get("vendorNo").value);
YAHOO.util.Dom.get("vendorname").value=obj.getData("name");
YAHOO.util.Dom.get("desc").value=obj.getData("desc");
YAHOO.util.Dom.get("canBeConsumed ").value=obj.getData("canBeConsumed");
YAHOO.util.Dom.get("canBeReceived").value=obj.getData("canBeReceived");
YAHOO.util.Dom.get("createUser").value=obj.getData("createUser").id;
YAHOO.util.Dom.get("createDate").value=obj.getData("createDate");
YAHOO.util.Dom.get("modifyUser").value=obj.getData("modifyUser").id;
YAHOO.util.Dom.get("modifyDate").value=obj.getData("modifyDate");
YAHOO.util.Dom.get("Pid").value=obj.getData("Pid");
},
showAddItemWin:function(){

var path= PORTAL.constant.CONTEXT_PATH+"/views/masterData/vendor/vendorMaintenance/item.jsp";
var panel2 = D.show("dialog2", 
            { fixedcenter : true,
              visible : true, 
              constraintoviewport : true,
              header:"物料明细",
              body:"<iframe frameborder=0 width='500px' height='350px' src='"+path+"'></iframe>",
              buttons : [ 
                          { text:"取消", handler:function(){
this.hide();
}}]
             } );
}
};
})();

</Script>
</head>


<body onload="setTab('two',2,7 ,'jt',1,2)" class="yui-skin-sam">
<div  class="cncom_bg">
<div class="con_bg">
<jsp:include page="/views/fragment/top.jsp"/>  
<jsp:include page="/views/fragment/nav.jsp"/>           
    <div class="cncom_main">
    <div class="comm_left">
        <div class="comm_left_box">            
           <div class="comm_left_tx_vo">
<div class="comcn_teb_h2_vo">
                <span class="h2_lead">供应商维护</span>
                <span class="float_right"></span>
</div>
<table id="mytable_vo" class="ccn_tab_vo" cellspacing="0" summary="">
<%session.setAttribute("site","BYD-mes");%>
  <tr>
    <th scope="row"  class="spec">地点 ：</th>
    <td><%=session.getAttribute("site") %></td>
    <td>用户登录地点</td>
  </tr>
  <tr>
    <th scope="row"   class="specalt">小姐编号 ：</th>
    <td class="alt"><input class="cc_inp_a" tabIndex="2"  type="text"  name="no" id="vendorNo"/>
<input class="icon_select" type="button" name="select" title="查询"   value=""
onclick="PORTAL.page.bussiness.find()" />
<input class="sear_but_vo" name="ss" type="button" value="检索" onclick="PORTAL.page.bussiness.getVendorDetail()"/>
<input class="sear_but_vo"

value="清空" name="abc" type="reset" />
</td>
  </tr>  
</table>
            </div>
<!--
<div class="bydit_success">√查询成功！</div>
<div class="bydit_exceptional" >×异常！(请选择正确选项)</div>            
<div class="bydit_error" >×错误！(请选择正确选项)</div>   
-->
<div class="x_con_coom">
<div class="table_middle_h2_xx_bg">
<div class="table_middle_h2_xx">
<div class="table_middle_b_q_textx">
<ul>
    <li class="hover" id="jt1" onClick="setTab('jt',1,2)">基本信息</li>
    <li id="jt2" onClick="setTab('jt',2,2)">明细</li>
</ul>
</div>
</div>
</div>
</div>
<div class="xcon_cont">

<div class="jt_con_a"  id="con_jt_1">
<%session.setAttribute("user","超级赛亚人");%>
<table id="mytable" class="ccn_tab_vo" cellspacing="0" summary="">
<tr>
<th colspan="2" class="nobg" scope="col">&nbsp;</th>
</tr>
<tr>
<th scope="row" class="spec">建档人 ：</th>
<td>${user }</td>
</tr>
<tr>
<th scope="row" class="specalt">修改人 ：</th>
<td class="alt">${user}</td>
</tr>
<tr>
<th scope="row" class="spec">建档时间 ：</th>
<td><%="2010-10-26 09:39:23"%></td>
</tr>
<tr>
<th scope="row" class="specalt">修改时间 ：</th>
<td class="alt"><%="2010-10-26 09:39:23"%></td>
</tr>

</table>
<form  action="${pageContext.request.contextPath}/views/masterData/vendor/vendorMaintenanceAction.action" method="post">
<table id="mytable" class="ccn_tab" cellspacing="0" summary="">
<caption>详细信息</caption>
   <tr>
    <th colspan="2" class="nobg" scope="col"  >&nbsp;</th>
  </tr>
  <tr>
    <th scope="row"  class="spec">供应商名称 ：</th>
    <td>
<input class="cc_inp_a" tabIndex="2" type="text"  name="vv" id="vendorname"/>
</td>
  </tr>
  <tr>
    <th scope="row"  class="spec">供应商详细 ：</th>
    <td>
<input class="cc_inp_a" tabIndex="2" type="text"   name="hh" id="desc"/>
</td>
  </tr>
  <tr>
    <th scope="row"   class="specalt">可接受物料 ：</th>
    <td class="alt">
<input name="canBeConsumed" id="canBeConsumed" type="checkbox" />
    </td>
  </tr>
  <tr>
    <th scope="row"  class="spec">可消耗物料 ：</th>
    <td>
<input name="canBeReceived" id="canBeReceived" type="checkbox"  />
</td>
  </tr>
<tr>
<th class="yesbg" scope="col"></th>
<th class="yesbg" scope="col"><input class="button_ll"
value="保存" name="" type="button"
onclick="PORTAL.page.bussiness.doSave()" /> <input class="button_ll"
value="清空" name="" type="reset" /></th>
</tr>

   
 
</table>
   <input type="hidden" name="pid" id="Pid" >
</form>
</div>



<div class="jt_con_b" id="con_jt_2" style="display: none">
<div class="cncom_main">
<div class="comm_left">
        <div class="comm_left_box">
          <div class="comcn_teble">           
             <iframe frameborder=0 width="100%" height="100%" marginheight=0 marginwidth=0 src="vendorItem.jsp" ></iframe>
          </div>
        </div>
  </div>
</div>
</div>  
   
</div>   
         
        </div>
    </div>      
<jsp:include page="/views/fragment/right.jsp"/>      
      <!--comm_right-->
    </div> 
<jsp:include page="/views/fragment/footer.jsp"/>
</div>
</div>
</body>
</html>
分享到：
| onload事件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    yui3-master.zip

    《深入理解YUI3：基于yui3-master.zip的探讨》 YUI（Yahoo! User Interface Library）是由雅虎公司开发的一套开源JavaScript库，它为Web开发者提供了丰富的功能和工具，以创建交互性强、性能优秀的网页应用。YUI3是...

    yui.rar 例子

    《深入理解YUI：基于“yui.rar 例子”的解析》 YUI，全称Yahoo! User Interface Library，是雅虎公司推出的一款开源JavaScript库，旨在帮助开发者构建高性能、易于维护的网页应用。本篇文章将结合“yui.rar 例子”...

    yui 资源包

    《深入理解YUI 3.9.0 r2：界面设计与资源优化》 YUI，全称为Yahoo! User Interface Library，是由雅虎公司开发的一个开源JavaScript库，它旨在简化Web应用程序的构建，特别是对于界面设计和交互效果的实现。在3.9.0...

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

    YUI3.6文档及示例

    4. **样式与动画**：YUI3.6包含了CSS类操作和动画效果的实现，可以轻松实现复杂的页面过渡和动画效果。 5. **数据管理**：提供了数据存储和模型层管理，方便在客户端进行数据操作和同步。 6. **用户界面组件**：...

    【YUI组件】基于YUI的表单验证器

    通常，这样的组件会有一个主JS文件（如`yui-form-validator.js`），可能还有一个CSS文件（如`yui-form-validator.css`）来处理样式，以及一些示例或测试用例文件。 **相关知识点：** 1. **YUI库**：了解YUI的基本...

    《YUI使用文档》汉语版的yui学习材料

    《YUI使用文档》汉语版是一份详细的YUI学习材料，它涵盖了这个JavaScript库的核心功能和使用方法。YUI，全称Yahoo! User Interface Library，是Yahoo开发的一个开放源代码的JavaScript库，旨在帮助开发者创建交互式...

    yui_2.6.0r2

    YUI 2.6.0r2版本在当时的JavaScript社区中占有重要地位，它提供了大量的可重用模块，涵盖了DOM操作、事件处理、动画效果、Ajax交互、CSS样式管理、数据处理等多个领域。这个版本修复了之前的一些已知问题，增强了...

    YUI-EXT使用详解

    6. **工具提示（Tooltips）**：YUI-EXT还提供了强大的工具提示功能，允许自定义内容、样式和行为，使用户能够获取更多关于界面上元素的信息。 7. **可扩展性（Extensibility）**：YUI-EXT的组件和类系统设计得非常...

    YUI3.7.3 最新版本 带API

    3. **CSS样式工具**：YUI3包含了一套CSS工具，如样式类名管理器（YUI.addClass, YUI.removeClass等），这有助于在JavaScript中动态控制元素的样式。 4. **DOM操作**：YUI3提供了丰富的DOM操作接口，如查找元素（YUI...

    yui_3.8.1.zip

    3. **CSS样式和布局**：YUI包含一套响应式设计的CSS框架，如Grids布局系统，帮助开发者快速创建响应式的网页布局。 4. **数据管理**：YUI提供了Model、ModelList和Store等组件，用于数据的存储、管理和同步，与...

    YUI2 库与例子都有了

    3. **样式（CSS）**：YUI2包含了一套完整的CSS框架，提供栅格系统、布局模板和模块化样式，便于创建响应式和一致的设计。 4. **组件（Components）**：YUI2提供了多种组件，如按钮、表格、日历、菜单、滑块等，这些...

    从YUI2到YUI3看前端的演变 pdf

    个人以为在现阶段，这种方式有一点激进，否能为广大用户所接受并发扬光大，还需要时间检验。YUI是个“学院派”的框架，以性能和严谨著称，易用性相对而言弱了一些。它能否在已经拉开的 JavaScript 框架大战中胜出，...

    yui js压缩工具

    这有助于减少CSS文件的大小，加快页面样式加载速度。 **使用方法** 使用YUI Compressor非常简单，你可以通过命令行界面或集成到构建系统中。在命令行下，只需指定输入文件和输出文件，YUI Compressor就会自动处理...

    yui_2.9.0前端UI

    YUI 库，全称Yahoo! UI Library。是一组工具和控件，用JavaScript写成, 为的是用DOM 脚本，DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议，对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...

    YUI.rar_html_javascript YUI_yui_yui javascript

    5. **CSS样式框架**：YUI提供了一套可自定义的CSS样式，帮助开发者快速创建一致的界面风格。 6. **DOM操作**：YUI提供了强大的DOM操作接口，包括选择元素、修改属性、插入和删除节点等。 7. **AJAX**：YUI的AJAX组件...

    一些关于YUI的资源

    6. **CSS样式和布局**：YUI还提供了一些预定义的CSS样式和响应式布局工具，帮助开发者快速创建符合现代Web标准的界面。 7. **国际化与本地化**：YUI支持多语言环境，提供了丰富的本地化资源，使开发者能够轻松构建...

    yuitest YUI测试工具

    YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as ...

    高效WEB前端开发之路：YUI3.15

    　本书作者便是在此背景下，以国外最优秀的JavaScript框架之一——Yahoo User Interface Library（简称YUI）的最新版本YUI 3.15为基础编写而成。本书通过通俗易懂的语言和大量丰富的实例，帮助读者解决实际生产环境...

    yui3.10.3最新版

    YUI 3的核心组件包括事件处理、DOM操作、动画效果、CSS样式管理、AJAX请求、数据存储以及各种用户界面组件等。 ### 版本3.10.3的特性 - **性能优化**：YUI 3.10.3版本在性能方面做了许多改进，包括更快的脚本执行...

Magicbox
Global site tag (gtag.js) - Google Analytics