知音选拔器V2,V850通用外拍灯柔光罩

发布时间:2019-04-15  栏目:威尼斯人平台  评论:0 Comments

布局参数

  • 适用机型:通用
  • 型号:SB1520
  • 品牌:神牛(Godox)
  • 颜色:黑色
  • 类型:影棚类
  • 尺寸:15*20cm
  • 重量:0.3

查看完整参数>>

布局参数

  • 类型:云台
  • 最大负荷:6kg
  • 3脚架类型:云台
  • 云台:展开中度(分米):85.伍 带有快装板:QS-6陆 旋转:360°
    倾斜:+60°~-90° 水墨画云台移动:二向

查看完整参数>>

布署参数

  • 类型:云台
  • 最大负荷:8kg
  • 3脚架类型:云台
  • 云台:张开中度(毫米):九4.5 带有快装板:QS-66 旋转:360°
    倾斜:+60°~-90° 水墨画云台移动:2向

查看完整参数>>

个人认为好友选拔器是3个相比较复杂的组件,涉及到前者和后端的重组。在此间自个儿根本是介绍端段怎么着促成,后端的数目,笔者用了多少个简易的ASP页面来提供。
威尼斯人平台 1知音选拔器V2,V850通用外拍灯柔光罩。

一.代码品格

        笔者的零件是当做叁个Jquery
的插件来做的。把全部组件做为一个类来处理。那样也有利在3个页面上多少个好友选用器共存而不相互影响。

        全部须要写的参数都在最下边包车型客车giant.ui.friendsuggest.defaults
中给了私下认可值。在未传入参数时,会调用私下认可值。此外,在偏下划线初始的法子,小编预订为个人方法,理论上不容许外部调用它们。

2.Dom结构

     
我的DOM结构未有在JS里面构造出来,而是预先下载xhtml页面里面。首要思索当JS不可用时,至少能确定保证大旨的探寻效果。那也切合“渐进加强”的思想。

<div id=”ui-fs” class=”ui-fs”>
    <div class=”ui-fs-result clearfix”>
    </div>
    <div class=”ui-fs-input”>
        <input type=”text” value=”输入好友姓名(支持全拼输入)”
maxlength=”30″ />
        <a class=”ui-fs-icon” href=”javascript:void(0)”
title=”查看全部好友”>查看全部好友</a>
威尼斯人平台,    </div>
    <div class=”ui-fs-list”>
       数据加载中….
    </div>
    <div class=”ui-fs-all”>
        <div class=”top”>
            <select id=”ui-fs-friendtype”><option
value=”-1″>全体好友</option></select>
            <div class=”close” title=”关闭”>关闭</div>
        </div>
        <div class=”ui-fs-allinner”>
            <div class=”page clearfix”>
                <div
class=”llight1″>还有<b>30</b>人可选</div><div
class=”button”><span class=”prev”>上一页</span><span
class=”next”>下一页</span></div>
            </div>
            <div class=”list clearfix”>
                数据加载中…
            </div>
        </div>
    </div>
</div>       

3.数码格式

呼吁了三种不一致的数据,首先是忘年交种类数据,在刚初步化组件的时候去赚取,JSON
格式,格式为

[{name:’此前的同事’,id:’1′},{name:’未来的同事’,id:’二’}]

下一场是对应好友类别的好友总的数量,用来在点击弹出装有好友时做分页使用。数据格式为Int型,直接出口一个数字就行了。获取数据时使用的参数为typeId,即好友类其余ID,为-1时到手拥有好友的总和。

终极是好友列表数据,也是JSON格式。格式为:

[{fUid:1,friendUserName:’karry’,friendHeadPic:’images/1.jpg’},{fUid:2,friendUserName:’kaliy’,friendHeadPic:’images/2.jpg’}]

数量的获取分两种状态。

一种是输入框中输入字符时获取的数额,用name参数来存放在输入框中输入的剧情。

其次种是点击右边开关现身的具有好友的情事,由于涉及到分页、下拉列表框的过滤等,所以参数相比多,有四个参数:typeId、p、pageSize      
typeId代表当前的花色,p代表当前的页码,pageSize 代表每页展现的人口。

四 作用简要介绍

组件扶助多选和单选两种形式,在初叶化组件时通过传播参数来支配。暗许是多选。在单选方式下得以流传三个回调函数,即当选中某一好友时触发。

1切组件最主旨的有个别是对事件的监听和对数码的异步获取,组件涉及到了focus、blur、click、keyup,change
三个事件。笔者在代码里面是把那五类事件分别放在区别的民用方法里面去绑定的。分别是:
_clickBind();_focusBind();_blurBind(); _keyUpBind(); 
_selectChangeBind();

其间对input举办键盘事件的监听是最复杂的,要考虑到多样情状。通常没输入2个键都要去后台请求2次数据,但须求对左右左右方向键和回车键做差异的处理,大家能够一贯看源代码来询问。

除此以外三个相比较关键的处理正是重复选拔的好友会通过闪动颜色来唤醒。那里重假诺通过setInterval()来贯彻

var i = 0;
var $obj = $($this.opts.resultContainer).find(“[name='” + fUid +
“‘]”);
$obj.css(“background-color”, “#fff”);
//变色
var interval = setInterval(function() {
    //IE和FF颜色输出不等同
    if ($obj.css(“background-color”) == “#ffffff” ||
$obj.css(“background-color”) == “rgb(255, 255, 255)”) {
        $obj.css(“background-color”, “#6699cc”);
        $obj.css(“color”, “#fff”);
    } else {
        $obj.css(“background-color”, “#ffffff”);
        $obj.css(“color”, “#666666”);
    }
    i++;
    if (i == 4) {
        $obj.attr(“style”, “”);
        clearInterval(interval);
    }
}, 300);
 

多选情势下选中的好友能够经过
getResult()方法来获取,重临四个存放好友id的数组。

伍.暗许参数: 

        前边半数以上参数首假若对DOM中对应的开关和容器实行钦点,在豪门不变DOM结构的前提下是不须求转移那些参数的。

     /**
     * 默许参数
     * <pre>
     * totalSelectNum 多选方式下,最多接纳人数,默认为30
     * selectType 采纳方式,默感到多选”multiple”,若为单选,则用single
     * selectCallBack 单选方式下,选中之后的回调函数。
     * </pre>
     * */
    giant.ui.friendsuggest.defaults = {
        btnAll:”#ui-fs .ui-fs-icon”,
        btnCloseAllFriend:”#ui-fs .ui-fs-all .close”,
        btnNextPage:”#ui-fs .ui-fs-all .next”,
        btnPrevPage:”#ui-fs .ui-fs-all .prev”,
        selectFriendType:”#ui-fs-friendtype”,
        allFriendContainer:”#ui-fs .ui-fs-all” ,
        allFriendListContainer:”#ui-fs .ui-fs-all .ui-fs-allinner
div.list”,
        frinedNumberContainer:”#ui-fs .ui-fs-allinner .page b”,
        resultContainer:”#ui-fs .ui-fs-result”,
        input:”#ui-fs .ui-fs-input input”,
        inputContainer:”#ui-fs .ui-fs-input”,
        dropDownListContainer:”#ui-fs .ui-fs-list”,
        inputDefaultTip:”输入好友姓名(协理全拼输入)”,
        noDataTip:”您的相知列表中不设有该好友”,
        ajaxUrl:”ajax.asp”,
        ajaxLoadAllUrl:”ajax.asp”,
        ajaxGetCountUrl:”ajaxcount.asp”,
        ajaxGetFriendTypeUrl:”ajaxFriendType.asp”,
        totalSelectNum:30,
        ajaxBefore:null,
        ajaxError:null,
        selectType:”multiple”,
        selectCallBack:null
    };

陆.调用艺术:

在DOM结构没变的意况下,调用非凡不难。
var test = new giant.ui.friendsuggest();
当然,应该放在$(document).ready(function(){})里面,不然找不到相应的DOM。
假诺急需修改参数,就翻开上边的暗许的参数,哪个须要改,就传来哪个。

知音选取

多选情势:

翻开全数好友)

数量加载中….

装有好友

关闭

还有30人可选

上一页下一页

数码加载中…

单选形式

查阅全数好友)

多少加载中….

怀有好友

关闭

您可以选拔1

上一页下一页

多少加载中…

©playgoogle.com

[Ctrl+A 全选
注:如需引进外部Js需刷新工夫施行]

打包下载

留下评论

网站地图xml地图