Home > Developer > JavaScript
First look at a normal list that has not been modified
A list like this occupies a lot of space on the page, and the length of the list item is uneven. Other parts of the page layout must be arranged according to the list width, and cannot be flexibly laid out.
JQuery controls the width of the list in two ways.
Method 1: extract text content to control the width of the List
Principle: truncate the same length for all list items. In this way, the width of the intercepted list items is the same. This solution is based on the character width, such as Chinese characters. However, if it is an English character, this solution is not satisfactory. This solution uses jQuery's ready (), each (), text (), and Javascript's substr () functions.
1. ready () function-events of document loading completion. After the function is ready, add special effects or dynamic events. Syntax format:
$ (Document). ready (function)
$ (). Ready (function)
$ (Function)
The Function parameter is a required parameter, indicating the Function definition. Define the function to run after the document is loaded.
2. each () function-traverses the jQuery object. This function traverses the jQuery object and executes the function for each matching element.
Each (function) # execute a function using each matching element as the context.
Each (object, function) # traverse objects and Arrays
$ (Selector). each (function (index, element ))
3. text () function-the content of all matching elements. This function can obtain and set the text that is composed of all matching texts. The syntax format is as follows:
Text ([val | function]) # val indicates the text content, and function indicates the function that generates the text.
4. The substr () method extracts the specified number of characters starting with the start subscript from the string. Syntax format:
StringObject. substr (start, length) # start, required. The starting subscript of the substring to be extracted. Length, optional. The number of characters in the substring.
Example:
<Script type = "text/javascript">
$ (Document). ready (
Function (){
$ (". List"). each (
Function (){
Var inText = $ (this). text ();
If (inText. length> 10 ){
$ (This). text (inText. substr (0, 10) + "...");
}
}); <! -- En>
}
);
</Script>
<Body>
<Div>
<Ul>
<Li> <span class = "list"> jQuery is a Javascript library </span> </li>
<Li> <span class = "list"> jQuery greatly simplifies Javascript programming </span> </li>
<Li> <span class = "list"> jQuery is easy to learn </span> </li>
<Li> <span class = "list"> jQuery has a variety of functions (methods) for AJAX development </span> </li>
</Ul>
</Div>
</Body>
Display Effect:
Method 2: Modify the layer width to control the list width
Principle: You can set the layer where all list items are located to the same length. In this way, the width of the intercepted list items is the same. This solution is independent of the character width, so the different character width does not affect the width of the list item.
Example:
Create a list (list element is not used at all ,)
Add the following in the page header:
<Style type = "text/css">
. List
{
Font-size: 14px;
Width: 150px;
}
. Subone
{
Float: left;
Overflow: hidden;
}
. Subtwo
{
Float: left;
Color: blue;
}
</Style>
Html code:
<Body>
<Div>
<Div class = "list">
<Div class = "subone"> jQuery is a Javascript library </div>
<Div class = "subtwo"> & nbsp; Overview </div>
</Div>
<Div class = "list">
<Div class = "subone"> jQuery greatly simplifies Javascript programming </div>
<Div class = "subtwo"> & nbsp; Overview </div>
</Div>
<Div class = "list">
<Div class = "subone"> jQuery is easy to learn </div>
<Div class = "subtwo"> & nbsp; Overview </div>
</Div>
<Div class = "list">
<Div class = "subone"> jQuery has a variety of functions (methods) for AJAX development </div>
<Div class = "subtwo"> & nbsp; Overview </div>
</Div>
</Div>
</Body>
Display Effect:
Function implementation steps:
1. Use the ready () function of jQuery to implement special effects after loading.
2. Use the each () function to traverse the list within function ().
3. Determine whether the overall length of each list item is greater than the predefined width.
4. If the value is greater than, calculate the length required for the first part and set it (the second part is determined)
5. Adjust the height of the list items as appropriate
<Script src = "jslib/jquery-1.8.3.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
Var linelen = 120; # width of the predefined list item
$. Each ($ (". list "),
Function (I) {www.2cto.com
If ($ (". subone: eq ("+ I + ")"). width () + $ (". subtwo: eq ("+ I + ")"). width ()> linelen)
{
Var length = linelen-$ (". subtwo: eq (" + I + ")"). width (); # Calculate the height required for the first part of the list item.
$ (". Subone: eq (" + I + ")" ).css ("width", length + "px"); # Set the width
$ (". Subone: eq (" + I + ")" ).css ("height", 65 + "px"); # Set the height
} <! -- End of if -->
}); <! -- End of each -->
});
</Script>
Final effect:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
