A custom Placeholder attribute plug-in implemented by jQuery, jqueryplaceholder

A custom Placeholder attribute plug-in implemented by jQuery, jqueryplaceholder

The new placeholder attribute of the text box in HTML5 is a very useful attribute, but it is not supported by the IE series until IE9, which makes everyone hesitate when using this attribute. I have written many similar widgets, but none of them are very common. Here I will share a jQuery plug-in with a progressive enhancement of the custom placeholder. It is easy to use. You can also make improvements based on your own needs. JQuery plug-ins are rarely written. Considering that there are many jQuery users, we have written them here in the form of jQuery plug-ins.

Here we will briefly introduce the Implementation ideas.

1. The performance is similar to that of the native placeholder of html5.
2. progressive enhancement is not applicable to browsers that support placeholder.

I. First, there are several tools and methods:

1. supportProperty (nodeType, property) to obtain whether the browser supports a certain property of a control
2. getPositionInDoc (target, parent) to get the object's position in the document
3. $ c: A method for quickly creating Dom objects

These tools and methods are common and common methods. If you have your own or more suitable tools, you can replace them by yourself.

Ii. Subject: CustomPlaceholder object.This object is mainly used to maintain the information of each text box, including its location, prompt information to be displayed, and other methods such as creating prompt information and locating, as well as corresponding events of the object.

Events are mainly handled in the initEvents function. Here, you must pay special attention to the handling of prompt information events. When the prompt information is clicked, the focus should be repositioned to the text box. The text box must handle the focus and blur events.

Copy codeThe Code is as follows:
$ (Self. hint). bind ('click', function (e ){
Self. input. focus ();
});

$ (Self. input). bind ('focal ', function (e ){
Self. hint. style. display = 'none ';
});

$ (Self. input). bind ('blur', function (e ){
If (this. value = ''){
Self. hint. style. display = 'inline ';
}
});

The two main methods of the CustomPlacehodler object are createHintLabel (text, position) and position (). CreateHintLabel is a DOM object used to create the prompt information, locate it, and return this object. The position method is used to force the prompt message to be relocated. It is mainly used for page size changes. The functions and implementations of these two methods are relatively simple.

Iii. Functions of the plug-in.The jQuery plug-in implementation method is not much said. Here we first perform the capability detection. If the native supports placeholder, it will return directly.
Copy codeThe Code is as follows:
If (suppproperty property ('input', 'placeholder ')){
Return;
}

Next, generate the corresponding CustomPlaceholder object based on the selected input object, save it in the array, and obtain the DOM object for each object's prompt information, and add it to the container, finally, the container is appended to the body object.
Copy codeThe Code is as follows:
Var customPlaceholders = [];
If (this. length> 0 ){
Var box = $ c ('div ', 'dk _ placeholderfixed_box ');
For (var I = 0, len = this. length; I <len; I ++ ){
Var input = this [I];
CustomPlaceholders. push (new CustomPlaceholder (box, input, option ));
}

Document. body. appendChild (box );
}

Finally, it is important to bind the resize event to the window object. When the window object triggers the resize event, all customPlacehoder objects are located again.
Copy codeThe Code is as follows:
$ (Window). bind ('resize', function (e ){
For (var I = 0, len = customPlaceholders. length; I <len; I ++ ){
Var customPlaceholder = customPlaceholders [I];
CustomPlaceholder. position ();
}

});

This simple small plug-in has been written here.

Plug-in source code:

(function($){var eles = {div: document.createElement('div'),ul: document.createElement('ul'),li: document.createElement('li'),span: document.createElement('span'),p: document.createElement('p'),a: document.createElement('a'),fragment: document.createDocumentFragment(),input: document.createElement('input')}var supportProperty = function(nodeType, property){switch(arguments.length){case 0:return false;case 1:var property = nodeType, nodeType = 'div';property = property.split('.');if(property.length == 1){return typeof eles[nodeType][property[0]] !== 'undefined';}else if(property.length == 2){return typeof eles[nodeType][property[0]][property[1]] !== 'undefined';}case 2:property = property.split('.');if(property.length == 1){return typeof eles[nodeType][property[0]] !== 'undefined';}else if(property.length == 2){return typeof eles[nodeType][property[0]][property[1]] !== 'undefined';}return false;default:return false;}};var getPositionInDoc = function(target, parent) {if (!target) {return null;}var left = 0,top = 0;do {left += target.offsetLeft || 0;top += target.offsetTop || 0;target = target.offsetParent;if(parent && target == parent){break;}} while (target);return {left: left,top: top};}var $c = function(tagName, id, className){var ele = null;if(!eles[tagName]){ele = eles[tagName] = document.createElement(tagName);}else{ele = eles[tagName].cloneNode(true);}if(id){ele.id = id;}if(className){ele.className = className;}return ele;};var CustomPlaceholder = function(box, input, option){var self = this;var position = getPositionInDoc(input);self.input = input;self.option = {xOffset:0, yOffset:0};for(var item in option){self.option[item] = option[item];}self.hint = self.createHintLabel(input.getAttribute('placeholder'), position);box.appendChild(self.hint);self.initEvents = function(){$(self.hint).bind( 'click', function(e){self.input.focus();});$(self.input).bind( 'focus', function(e){self.hint.style.display = 'none';});$(self.input).bind( 'blur', function(e){if(this.value == ''){self.hint.style.display = 'inline';}});};self.initEvents();};CustomPlaceholder.prototype = {createHintLabel: function(text, position){var hint = $c('label');hint.style.cusor = 'text';hint.style.position = 'absolute';hint.style.left = position.left + this.option.xOffset + 'px';hint.style.top = position.top + this.option.yOffset + 'px';hint.innerHTML = text;hint.style.zIndex = '9999';return hint;},position: function(){var position = getPositionInDoc(this.input);this.hint.style.left = position.left + this.option.xOffset + 'px';this.hint.style.top = position.top + this.option.yOffset + 'px';}};$.fn.placeholder = function(option){if(supportProperty('input', 'placeholder')){return;}var customPlaceholders = [];if(this.length > 0){var box = $c('div', 'dk_placeholderfixed_box');for(var i = 0, len = this.length; i < len; i++){var input = this[i];if($(input).is(':visible')){customPlaceholders.push(new CustomPlaceholder(box, input, option));}}document.body.appendChild(box);}$(window).bind( 'resize', function(e){for(var i = 0, len = customPlaceholders.length; i < len; i++){var customPlaceholder = customPlaceholders[i];customPlaceholder.position();}});};})(jQuery);

How can jquery obtain the custom attribute of the label clicked by the mouse and assign this attribute to a variable?

$ ("Div [key * =''] "). click (function (){
Var keyval = $ (this). attr ("key ");
$ ("# X" 2.16.html (keyval );
})
<Div key = "1">
<Div key = "2">
<Div key = "3">

How to traverse the same property control dynamically added in PlaceHolder

Using System;
Using System. Collections;
Using System. Collections. Generic;
Using System. Configuration;
Using System. Data;
Using System. Web;
Using System. Web. Security;
Using System. Web. UI;
Using System. Web. UI. HtmlControls;
Using System. Web. UI. WebControls;
Using System. Web. UI. WebControls. WebParts;

Namespace SantGo. Bunli. Web
{

Public partial class Site1: System. Web. UI. MasterPage
{
Protected void Page_Load (object sender, EventArgs e)
{
If (! IsPostBack)
{
List <Control> checkBoxList = new List <Control> ();

FindSubControls (ContentPlaceHolder1, checkBoxList, new ControlMatchHander (CheckBoxMatchFunc ));

Foreach (CheckBox checkBox in checkBoxList)
{
DivDebug. InnerHtml + = string. Format ("{0 },{ 1} <br/> ",
CheckBox. ID,
CheckBox. ClientID );
}

}

}

Protected delegate bool ControlMatchHander (Control control Control );

Protected void FindSubControls (Control control, IList <Control> saveCollection, ControlMatchHander matchFunc)
{
If (control. HasControls ())
{
Foreach (Control subControl in control. Controls)
{
FindSubControls (subControl, saveCollection, matchFunc );
}
}
Else
{
... The remaining full text>