【澳门威尼斯赌场】SB1520机顶柔光箱V860,好友选择器V2

by admin on 2019年3月16日

配置参数

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

翻开完整参数>>

布署参数

  • 类型:云台
  • 最大负荷:6kg
  • 三脚架类型:云台
  • 云台:舒张中度(毫米):85.5 带有快装板:QS-66 旋转:360°
    倾斜:+60°~-90° 摄影云台移动:2向

翻看完整参数>>

配置参数

  • 类型:云台
  • 最大负荷:8kg
  • 三脚架类型:云台
  • 云台:展开中度(分米):94.5 带有快装板:QS-66 旋转:360°
    倾斜:+60°~-90° 版画云台移动:2向

翻看完整参数>>

个人觉得好友接纳器是五个相比复杂的零部件,涉及到前端和后端的结合。在那边自个儿重点是介绍端段如何贯彻,后端的多寡,笔者用了多少个大致的ASP页面来提供。
澳门威尼斯赌场 1

1.代码品格

        小编的零部件是用作1个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″ />
【澳门威尼斯赌场】SB1520机顶柔光箱V860,好友选择器V2。        <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.多少格式

恳请了3种区别的多少,首先是好友连串数据,在刚伊始化组件的时候去获取,JSON
格式,格式为

[{name:’在此之前的同事’,id:’1′},{name:’今后的同事’,id:’2′}]

然后是对应好友类其余好友总数,用来在点击弹出全部好友时做分页使用。数据格式为Int型,直接出口3个数字就行了。获取数据时行使的参数为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 代表每页突显的人口。

4 成效简介

零件援助多选和单选二种情势,在初叶化组件时经过传播参数来决定。默许是多选。在单选格局下得以流传贰个回调函数,即当选中某一好友时触发。

漫天组件最主旨的一对是对事件的监听和对数据的异步获取,组件涉及到了focus、blur、click、keyup,change
八个事件。小编在代码里面是把那五类事件分别放在分化的个体方法里面去绑定的。分别是:
_clickBind();_focusBind();_blurBind(); _keyUpBind(); 
_selectChangeBind();

其间对input进行键盘事件的监听是最复杂的,要考虑到多样场所。平日没输入三个键都要去后台请求二回数据,但必要对上下左右方向键和回车键做差别的处理,咱们能够一直看源代码来打听。

其它3个比较重庆大学的拍卖就是重新选用的好友会通过闪动颜色来唤起。那里根本是经过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的数组。

5.暗中同意参数: 

        前边半数以上参数首如若对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
    };

6.调用艺术:

在DOM结构没变的景观下,调用十分不难。
var test = new giant.ui.friendsuggest();
本来,应该放在$(document).ready(function(){})里面,不然找不到相应的DOM。
如若必要修改参数,就翻开下边包车型客车默许的参数,哪个须要改,就盛传哪个。

知音接纳

多选形式:

查阅全数好友)

多少加载中….

有着好友

关闭

还有30人可选

上一页下一页

多少加载中…

单选形式

查看全部好友)

数据加载中….

具备好友

关闭

你能够挑选1

上一页下一页

数码加载中…

©playgoogle.com

[Ctrl+A 全选
注:如需引入外部Js需刷新才能举行]

打包下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图