金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 弹出式复选框实现代码,扩展jQuery系列之一

弹出式复选框实现代码,扩展jQuery系列之一

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-09-06 05:23

效果图

var publicFunc = {

//jQuery Alert Dialogs Plugin Version 1.0
//插件下载地址:
金沙棋牌官方平台,作者的原方法为:

金沙棋牌官方平台 1

    back : function(num){

复制代码 代码如下:

全套代码

        var _num = num ? num : -1;

// Usage:
// jAlert( message, [title, callback] )
// jConfirm( message, [title, callback] )
// jPrompt( message, [value, title, callback] )
1.新加三个multicheckbox 的国有措施:
// Public methods
multicheckbox : function (message, value, title, callback) {
if (title == null ) title = 'multicheckbox ';
$.alerts._show(title, message, value, 'multicheckbox ', function (result) {
if (callback) callback(result);
});
},

复制代码 代码如下:

        if(navigator.userAgent.indexOf('Android') > -1){

2 .在私有方法_show:function (title, msg, value, type, callback){...} 中扩展对multicheckbox 的调整:
// Private methods
------------------------ 关键部分 ------------------------------
case 'multicheckbox' :
$("#popup_message" ).append(value).after('<div id="popup_panel"> <span id="checkall" style="cursor:pointer;border:1px solid #FFCC35;font-family:宋体;font-weight:bold;background-color:#FFFF99;color:#0000CC;margin:3px;padding:3px 10px 3px 10px;">全选</span>      <span id="popup_ok" style="cursor:pointer;border:1px solid #CF4342;font-family:宋体;font-weight:bold;background-color:#DFF1FF;color:#CF4342;margin:3px;padding:3px 10px 3px 10px;">确定</span> <span id="popup_cancel" style="cursor:pointer;border:1px solid #CF4342;font-family:宋体;font-weight:bold;background-color:#DFF1FF;color:#0000CC;margin:3px;padding:3px 10px 3px 10px;">取消</span></div> ');
var $spanHover = $("#dialog span" );
$spanHover.hover(
function () {$(this ).addClass("spanmousehover" );},
function () {$(this ).removeClass("spanmousehover" );}
);
$("#checkall" ).click(function () {
if ($("#checkall" ).html() == "全选" ) {
$("#dialog input" ).each(function () {$(this ).attr("checked" , true );});
$("#checkall" ).html("撤除全选" );
}
else {
$("#dialog input" ).each(function () {$(this ).attr("checked" , false);});
$("#checkall" ).html("全选" );
}
});
$("#delcheckall" ).click(function () {
$("#dialog input" ).each(function () {$(this ).attr("checked" , false );});
});
$("#popup_ok" ).click(function () {
var getAll = "";
var test = $('#dialog input' ).each(function () {if (this .checked) {getAll = $(this ).val() ',';}});
var valback = getAll.substring(0, getAll.length - 1);//去掉最后一个','号
$.alerts._hide();
$("#ctl00_ContentPlaceHolder_main_TextBox_recever_sel" ).blur();
if (callback) callback(valback);// 在单击明确后将具备入选的剧情回传到输入框中
});
$("#popup_cancel" ).click(function() {
$.alerts._hide();
$("#ctl00_ContentPlaceHolder_main_TextBox_recever_sel" ).blur();
if (callback) callback(null);
});
/ /----------------------------------------------------------------------
在 // Shortuct functions 中追加如下名称:
jMulticheckbox = function (message, value, title, callback) {
$.alerts.multicheckbox(message, value, title, callback);
};
3 .在前段代码的input 输入框(或asp:TextBox )的onfocus 属性中调用如下脚本:
jMulticheckbox('' , '<% = allcheckinfo.ToString() %> ' , '请选取抽取机构' , function (r) {
//定义传入html成分,弹出框主题目,callback结果(即选拔的剧情)
if (r!=null )
$('#ctl00_ContentPlaceHolder_main_TextBox_recever_sel' ).val(r);
});
其 中"allcheckinfo.ToString() "可认为后台从相应的事务逻辑中抽取的结果,如:
StringBuilder allinfo = new StringBuilder ("" );
allinfo.Append("<div id="dialog" style="padding:0; margin:0;height:250px;width:280px;text-align:left;line-height:20px;overflow:auto"> " );
...
while (OracleDataReader.Read())
{
string bumeninfo = oradr[0 ].ToString();
allinfo.Append("<span class="spanmouse"><input name="chk1" type="checkbox" id="c" flag "" value="" bumeninfo "" /><label for="c" flag "">" bumeninfo

/**
* @author xing
*/
(function($){
$.extend({
alert:function(html,callback){
var dialog=new Dialog();
dialog.build('alert',callback,html);
},
confirm:function(html,callback){
var dialog=new Dialog();
dialog.build('confirm',callback,html);
}
});
var Dialog=function(){
var render={
template:' <div class="alertParent"><div class="alertContent"><h2 class="title">系统提示</h2><div class="alertHtml">你的操作出现谬误!</div><div class="btnBar"><input type="button" value="鲜明" id="sure"/></div></div></div>',
templateConfirm:' <div class="alertParent" id="confirmPanel"><div class="alertContent"><h2 class="title">系统指示</h2><div class="alertHtml">你的操作出现错误!</div><div class="btnBar"><input type="button" value="撤销" id="cancel"/><input type="button" value="显明" id="sure"/></div></div></div>',
/**
* 依照须求转变对话框
* @param {Object} type
* @param {Object} callback
* @param {Object} html
*/
renderDialog:function(type,callback,html){
if(type=='alert'){
this.renderAlert(callback,html);
}else{
this.renderConfirm(callback,html);
}
},
/**
* 生成alert
* @param {Object} callback
* @param {Object} html
*/
renderAlert:function(callback,html){
var temp=$(this.template).clone().hide();
temp.find('div.alertHtml').html(html);
$(document.body).append(temp);
this.setPosition(temp);
temp.fadeIn();
this.bindEvents('alert',temp,callback);
},
/**
* 生成confirm
* @param {Object} callback
* @param {Object} html
*/
renderConfirm:function(callback,html){
var temp=$(this.templateConfirm).clone().hide();
temp.find('div.alertHtml').html(html);
$(document.body).append(temp);
this.setPosition(temp);
temp.fadeIn();
this.bindEvents('confirm',temp,callback);
},
/**
* 设定对话框的岗位
* @param {Object} el
*/
setPosition:function(el){
var width=el.width(),
height=el.height(),
pageSize=this.getPageSize();
el.css({
top:(pageSize.h-height)/2,
left:(pageSize.w-width)/2
});
},
/**
* 绑定事件
* @param {Object} type
* @param {Object} el
* @param {Object} callback
*/
bindEvents:function(type,el,callback){
if(type=="alert"){
if($.isFunction(callback)){
$('#sure').click(function(){
callback();
$('div.alertParent').remove();
});
}else{
$('#sure').click(function(){
$('div.alertParent').remove();
});
}
}else{
if($.isFunction(callback)){
$('#sure').click(function(){
callback();
$('div.alertParent').remove();
});
}else{
$('#sure').click(function(){
$('div.alertParent').remove();
});
}
$('#cancel').click(function(){
$('div.alertParent').remove();
});
}
},
/**
* 获取页面尺寸
*/
getPageSize:function(){
return {
w:document.documentElement.clientWidth,
h:document.documentElement.clientHeight
}
}
}
return {
build:function(type,callback,html){
render.renderDialog(type,callback,html);
}
}
}
})(jQuery);

            window.callAndroid.back(_num);

  • "</label></span><br />" );
    }
    ...
    allinfo.Append("</div>" );
    即 将<div>...</div> 再次回到给JS,最终效果如下:
    金沙棋牌官方平台 2 

因为大家的alert,并无需选用器的支撑,所以大家选择$.extend那样表明

        }else{

Alert Dialogs Plugin Version 1.0 //插件下载地址: 自个儿的原方法为: 复制代码 代码如下: // Usage: // jAlert( messa...

复制代码 代码如下:

            if(_num ==1 || _num ==3){

$.extend({
alert:function(html,callback){
},
confirm:function(html,callback){
}
});

                var arr = new Array();

其次大家声多美滋(Dumex)个单体来生成这一个组件到页面,那个单体再次回到一个国有的方法build来创建那个组件

                arr[1] = '/bao/index';

复制代码 代码如下:

                arr[2] = '/task/index';

var Dialog=function(){
return {
build:function(type,callback,html){
render.renderDialog(type,callback,html);
}
}
}

                arr[3] = '/user/index';

接下去大家独家评释组件的HTML字符串

                window.location.href = arr[_num];

复制代码 代码如下:

            }

var render={<BPRADO> template:' <div class="alertParent"><div class="alertContent"><h2 class="title">系统提醒</h2><div class="alertHtml">你的操作出现谬误!
</div><div class="btnBar"><input type="button" value="确定" id="sure"/></div></div></div>',<BR> templateConfirm:' <div class="alertParent"
id="confirmPanel"><div class="alertContent"><h2 class="title">系统提醒</h2><div class="alertHtml">你的操作出现谬误!</div><div class="btnBar"><input type="button" value="撤消"
id="cancel"/><input type="button" value="确定" id="sure"/></div></div></div>'}<BR>

            window.history.go(_num);

向里面填充方法

        }

复制代码 代码如下:

    }

/**
* 依据需求更改对话框
* @param {Object} type
* @param {Object} callback
* @param {Object} html
*/
renderDialog:function(type,callback,html){
if(type=='alert'){
this.renderAlert(callback,html);
}else{
this.renderConfirm(callback,html);
}
},
/**
* 生成alert
* @param {Object} callback
* @param {Object} html
*/
renderAlert:function(callback,html){
var temp=$(this.template).clone().hide();
temp.find('div.alertHtml').html(html);
$(document.body).append(temp);
this.setPosition(temp);
temp.fadeIn();
this.bindEvents('alert',temp,callback);
},
/**
* 生成confirm
* @param {Object} callback
* @param {Object} html
*/
renderConfirm:function(callback,html){
var temp=$(this.templateConfirm).clone().hide();
temp.find('div.alertHtml').html(html);
$(document.body).append(temp);
this.setPosition(temp);
temp.fadeIn();
this.bindEvents('confirm',temp,callback);
},
/**
* 设定对话框的职分
* @param {Object} el
*/
setPosition:function(el){
var width=el.width(),
height=el.height(),
pageSize=this.getPageSize();
el.css({
top:(pageSize.h-height)/2,
left:(pageSize.w-width)/2
});
},
/**
* 绑定事件
* @param {Object} type
* @param {Object} el
* @param {Object} callback
*/
bindEvents:function(type,el,callback){
if(type=="alert"){
if($.isFunction(callback)){
$('#sure').click(function(){
callback();
$('div.alertParent').remove();
});
}else{
$('#sure').click(function(){
$('div.alertParent').remove();
});
}
}else{
if($.isFunction(callback)){
$('#sure').click(function(){
callback();
$('div.alertParent').remove();
});
}else{
$('#sure').click(function(){
$('div.alertParent').remove();
});
}
$('#cancel').click(function(){
$('div.alertParent').remove();
});
}
},
/**
* 获取页面尺寸
*/
getPageSize:function(){
return {
w:document.documentElement.clientWidth,
h:document.documentElement.clientHeight
}
}

};

接下去就是对话框的兑现

jQuery(function ($) {

复制代码 代码如下:

    $("img.lazy").lazyload();

$.extend({
alert:function(html,callback){
var dialog=new Dialog();
dialog.build('alert',callback,html);
},
confirm:function(html,callback){
var dialog=new Dialog();
dialog.build('confirm',callback,html);
}
});

});

调用方法:

 

复制代码 代码如下:

/**

$.confirm('鲜明删除?',function(){
alert('cccc');
});

 * author yangchengsheng@eoemarket.com

金沙棋牌官方平台 3

 * desc 新闻提示

$.alert('作者的计算机');

 * used  $.messageAlert($message)

金沙棋牌官方平台 4

 */

最终就是CSS与HTML 了

jQuery.extend({

复制代码 代码如下:

    messageAlert: function ($message) {

div.alertParent{
padding:6px;
background:#ccc;
background:rgba(201,201,201,0.8);
width:auto;
position:absolute;
-moz-border-radius:3px;
font-size:12px;
top:50px;
left:50px;
}
div.alertContent{
background:#fff;
width:350px;
height:auto;
border:1px solid #999;
}
h2.title{
width:100%;
height:28px;
background:#0698E9;
text-indent:10px;
font-size:12px;
color:#fff;
line-height:28px;
margin:0;
}
div.alertHtml{
background:url(dtips.gif) 0 0 no-repeat;
height:50px;
margin:10px;
margin-left:30px;
text-indent:50px;
line-height:50px;
font-size:14px;
}
div.btnBar{
border-top:1px solid #c6c6c6;
background:#f8f8f8;
height:30px;
}
div.btnBar input{
background:url(sure.png) no-repeat;
border:0;
width:63px;
height:28px;
float:right;
margin-right:5px;
}

        if ($(".message_alert").length < 1) {

html

            var div = $('<div></div>');

复制代码 代码如下:

            div.addClass('message_alert');

<div class="alertParent"><BCRUISER><div class="alertContent"><B普拉多><h2 class="title">系统提示</h2><BRAV4><div class="alertHtml"><BKuga>你的操作出现错误!<B奥迪Q3></div><B昂科拉> <div class="btnBar"><B库罗德> <input
type="button" value="确定"/><BR></div><BR></div><BR> </div><BR>

            div.appendTo('body');

国手勿笑,为了印证实现的方法,笔者并未留意的去完善这段代码,仅仅是在编写的半钟头内写出的,所以有那多少个地方未有去思辨,有不计其数的纰漏,况兼以多少个相比笨的诀窍完结了这几个宪章的alert,可是下一次大家将由此营造Button的措施完结一个组件,会到场遮罩,ajax调用,iframe宽度低度自适应等越来越强劲的功用。

        }

全体代码 复制代码 代码如下: /** * @author xing */ (function($){ $.extend({ alert:function(html,callback){ var dialog=new Dialog(); dialog.build('alert',callbac...

        $(".message_alert").html("<span>"  $message "</span>");

        $(".message_alert").fadeIn();

        setTimeout(function () {

            $(".message_alert").fadeOut();

            $(".message_alert").html("");

        }, 3000)

        return true;

    },

    /**

     * desc 拍照

     * used  $.takePhoto(type,param,callback)

     */

    takePhoto: function (type,param,callback) {

        if ($(".setface_alert").length < 1) {

            var html = '<div class="setface_alert">' 

                '<span id="take_phone_alert">拍照</span>' 

                '<span class="album" id="select_phone_alert">从相册中采用</span>' 

                '<span class="cancel">取消</span></div>' 

                '<div class="shade"></div>';

            $('body').append(html);

            $(".setface_alert .cancel").unbind("click");

            $(".setface_alert .cancel").on("click", function () {

                $(".setface_alert").hide();

                $(".shade").hide();

            });

        };

        $("#take_phone_alert").unbind("click");

        $("#select_phone_alert").unbind("click");

        //调用Android拍照

        $("#take_phone_alert").on("click", function () {

            $(".setface_alert").hide();

            $(".shade").hide();

            $(this).unbind("click");

            window.callAndroid.takePhoto(type, param, callback);

 

        });

        //调用Android相册

        $("#select_phone_alert").on("click", function () {

            $(".setface_alert").hide();

            $(".shade").hide();

            $(this).unbind("click");

            window.callAndroid.selectPhoto(type, param, callback);

        });

        $(".setface_alert").fadeIn();

        $(".shade").show();

    },

    /**

     * 事件总结

     * @param tag

     * @param label

     * @param duration

     */

    onEvent:function (tag, label, duration) {

        prompt("event", JSON.stringify({tag:tag,label:label, duration:duration}));

    }

});

 

jQuery.fn.extend({

    /**

     * desc 分页

     * used  $.(select).pager(url,param)

     */

    pager: function (url, param) {

        var _this = this;

        var _param = param ? param : new Object();

        var _page = _param.page ? _param.page : 2;

        var _limit = _param.limit ? _param.limit : 20;

        var is_load_more = false;

        if (_this.children().size() >= _limit) {

            if ($(".Loading").length < 1) {

                $('body').append('<div class="Loading">正在加载越多...</div>');

            }

            is_load_more = true;

        }

        $(window).scroll(function () {

            if (_page < 51 && is_load_more == true) {

                //拖到页底时,自动AJAX加载新数据

                var pageH = $(document.body).height();

                var winH = $(window).height();//可视区高

                var scrollT = $(window).scrollTop();

                var pageRest = (pageH - winH - scrollT) / winH;

                if (pageRest>0.02) {

                    is_load_more = false;

                    _param.page = _page;

                    _param.limit = _limit;

                    $.get(url, _param, function (data) {

                        if ($.trim(data)) {

                            _page = 1;

                            _this.append(data);

                            is_load_more = true;

                            $("img.lazy").lazyload();

                        } else {

                            $('.Loading').hide();

                        }

                    });

                }

            } else {

                $('.Loading').hide();

            }

        });

    }

});

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:弹出式复选框实现代码,扩展jQuery系列之一

关键词: