1. 后台finder JS运用


2. finderJS 运用

创建时间:2015年12月29日

2.1.1. Finder 按钮操作区域

如图Finder区域

按钮操作区域 按钮submit表示要选译finder数据才会请求,href则直接请求。

对选择Finder数据的操作,需在按钮上绑定属性submit指定提交地址,通过按钮上的target属性和confirm属性判断处理类型.

常用处理类型:

1.Dialog (弹出对话框) 类型有参数则用两个冒号(::)隔开 如:

target="dialog::{title:'<{t}>编辑<{/t}>',width:.7,height:.8}";

2.Confirm (选择提示框)

3._blank (弹出新页面)

4.Wpage (Ajax请求)

5.refresh (刷新finder)

1.按钮区域中选择列表数据后弹出Dialog,将url地址绑定到submit属性中,

<{assign var="node_id" value=$item.node_id}><span class="opt lnk" onClick="new Dialog('?app=syscontent&ctl=admin_node&act=add&node_id=<{$item.node_id}>', {title:'<{t}>添加文章子类目<{/t}>', height:470})"><{img src="bundle/addcate.gif" border="0" alt=$___syscontent="添加文章子类目"|t:'syscontent'  app='desktop'}>
<{t}>添加文章子类目<{/t}>
</span>

2.选择列表数据刷新finder时target='refresh'

<a target="refresh" submit="index.php" icon="download.gif" label="商品上架" href="javascript:void(0);">
<span>商品上架</span></a>

选择列表判断提示操作加选择提示框

<a href="javascript:void(0);" submit="index.php?" confirm="确定删除选中项?删除后可进入回收站恢复" icon="del.gif" label="删除"><span>删除</span></a>

1.后台所有请求,后台系统会将标有href属性的标签拦截成ajax请求

如请求要弹出dialog:

<a target="dialog::{width:300,title:'配置列表项'}" href="index.php" title="列表项配置" class="lnk-operation"><span>列表项配置</span></a>

finder常用操作 a.刷新finder

finderGroup[finderID],refresh();   //finderID需PHP后台抛出

b.在新页面刷新finder

opener.finderGroup[finderID],refresh();  /finderID需PHP后台抛出

c.关闭dialog 获取dialog页面中的任意一个元素如element,

element.getParent('.dialog').retrieve('instance').close();

或者为某个元素添加isCloseDialogBtn属性如:

<span isCloseDialogBtn=true>取消</span >

d.提交dialog中的表单关闭dialog并刷新finder. 先获得dialog中的from元素,如_from;

_from.store('target',{onComplete:function(response){
    _from.getParent('.dialog').retrieve('instance').close();     //此处可加入提交成功任何处理代码
finderGroup[finderID],refresh();
}});

或在dialog中的from元素中加入属性isCloseDialog,如要刷新finder则在返回中返回

JSON( {finder_id:'eff564'} );

3. AJAX框架Wpage运用

3.1.1. PHP与AJAX配合机制

后台AJAX提交,form提交与js框架wpage配合,php程序需指明响应头为text/jcmd则后台程序需返回JSON格式,

1.如操作成功时的情况:第一个success成功信息,第二redirest是成功后页面跳转url,第三任意需要的数据。

header('Content-Type:text/jcmd; charset=utf-8');
echo '{success:"'.app::get('b2c')->_("订单号传递.").'",redirest:'',order_id:"0021244"}';

2.失败的情况:第一个error失败的信息,第二个redirect失败跳转的页面url,第三个为任意参数,

{error:"xxxxx'",”redirect”:””,_:null}.

注:如没第二或第三个参数可不填写

3.1.2. PHP中begin end方法与AJAX配合使用

php中begin方法第二个参数变化比较多,一般有三种形式

1.url

2.javascript,例如javascript:finderGroup[“122222”].refresh();

3.forward,将参数提交到另外一个页面

配合后台的begin的第一个参数(url_params)使用,end的第三个参数(url_params)使用.

注:end里面的参数会覆盖begin相应的第一个参数的内容.此处第二参数为空则说明成功后不需要跳转。


4. 前端验证与其它常用组件说明

创建时间:2015年12月29日

4.1.1. JS验证框架

1.针对form中的所需要验证数据元素加上vtype属性指明验证的类型,同一元素验证多个类型则需用&&符号间隔开.

<input type="text"  vtype="email" size="20" name="contact[email]" class="x-input " />

<input type="text"  vtype="required&&email" size="20" name="contact[email]" class="x-input " />

后台框架默认的vtype验证类型有限,如无法满足需求可自定义vtype类型,如:

<script>
validatorMap.set('baguo', ['<{t}>字数应该在5-200个字之内<{/t}>', function(element, v) {
    //参数说明 element是vtype为sendcomments的元素,v为此元素对应的值
    if ($(element).getValue() == '' || $(element).getValue().length < 5 || $(element).getValue().length >= 200){
        return false;
    }else{
        return true;
    }
}]);
</script>

自定义验证的运用如:

<input vtype="baguo" name="goods_text"/>

4.1.2. Autocompleter组件自动搜索

<input type="text" vtype="text" ac_options="{relative:false}" autocompleter="b2c_autocomplete_member:login_name" name="order" autocomplete="off">

4.1.3. Dialog

1.弹出框基本使用.

new Dialog(url,{width:222,height:400,onShow:function(){});

在Dialog中装提交按钮固定在最底部,用<{area}>标签包住html标签指定插入到元素位置。

<{area inject='.mainFoot'}><button >提交</button><{/area}>

5. smart标签常用组件说明

创建时间: 2015年12月29日

5.1.1. smart标签常用组件

1.在Dialog中装提交按钮固定在最底部,用<{area}>标签包住html标签指定插入到元素位置。

<{area inject='.mainFoot'}><button >提交</button><{/area}>

2.图片:app指定图片在哪个app目录下,app

<{img app='desktop' src="bundle/page_edit.gif"}>

3.图片按钮label按钮显示内容|t:'site'指明是哪个app下使用(方便语言包),app指明按钮图片在哪个app目录下,icon指明图片路径。

<{button type="button" label=""|t:'site' id='swf-uploader-btn' app='desktop'  icon='image_new.gif'}>

4.图片选择组件

<{input type="image" value=$data.params.tag_image name="params[tag_image]"}>

5.日期控件

<{input type="date" vtype="date" name="time_from" value=$time_from}>

6.颜色选择器

<{input type='color' name='tag_color' value=$data.tag_bgcolor|default:'#cccccc'}>

7.html编辑器

<{input type="html" name="goods[description]"  value=$goods.description includeBase=true}>

results matching ""

    No results matching ""