Smarty instance tutorial (original) --- template design part

xiaoxiao2021-03-06  106

Smarty, PHP template engine from: www.phpe.net, what is smarty? Smarty is a template PHP template engine written by PHP, which provides the separation of logic and external content, simple speaking, the purpose is to use The PHP programmer is separated by the US, the logical content of the programmer who uses the program will not affect the artist page design. The art re-modification page will not affect the program logic of the program, which is especially important in multiplayer. . Second, Smarty Advantages: 1. Speed: Programs Writing with Smarty can improve the maximum speed, which is relative to other template engine technology. 2. Compiling: The program written by Smarty is compiled into a non-template-based PHP file. This file uses PHP and HTML mixed mode. When the next access template, the web request is directly converted to this file, No longer performing template recompilation (in the case where the source program is not changed) 3. Cache technology: Smarty selected a cache technology, which can cache the user's final HTML file into a static HTML page, When Smarty's Cache property is True, convert the user's web request directly to this static HTML file during the Cachetime period set by Smarty, which is equivalent to calling a static HTML file. 4. Plugin Technology: Smarty can customize the plugin. The plugin is actually some custom functions. 5. IF / ELSEIF / ELSE / ENDIF can be used in the template. The template file is used to use the judgment statement that can be easily reundrained to the template. Third, not suitable for using Smarty: 1. Real-time update content. For example, a stock display, it needs to be updated frequently, this type of program uses smarty to slow down the template processing speed. 2. Small project. Small projects are quickly and programmers, using Smarty to lose the rapid advantages of PHP development because of the simple projects and programmers and one person. Fourth, install the Smarty class: Install the environment: PHP version 4.06 or later. Installing the smarty method is very simple, download smarty.tar.gz from http://samrty.php.net, decompress the lib directory, create directory CommM in the current site, copy all files in the libm directory, complete the basics Installation. Other advanced installation methods Please see the manual. Five, smarty uses in the template: This section takes a few instances to use Smarty. The Smarty Template is usually used. TPL logo, some people write the extensions directly into .html for the convenience of the United States, and it is possible. This article uses a Smarty standard write: in .tpl to represent a smarty template. Example 1: Let's first look at a simple example.

============================================================================================================================================================================================================= === Index.tpl ================================================= ========= {* Display is the use of the smarty variable identifier * contains text to comment content *} {include file = "header.tpl"} {* page *} Hello, my name {$ name}, welcome everyone to read my smarty learning materials. {include file = "foot.tpl"} The example on the top of the page *} is a TPL template, where: 1. {**} is a comment for the template page, which is not paid when SMARTY parsed the template Output, only template designers are annotated. 2. {include file = "xxx.tpl"} Use this sentence to include a template file to the current page, the example in the example will contain the Head.tpl and FOOT.TPL of the public thing in the website, you can think, Use this sentence to copy all of the contents in XXX.TPL at the current statement. Of course, you can also use this sentence, you can copy the contents of XXX.TPL to the current statement. 3. {$ Name}: Template variable, core composition in Smarty, using the left boundary {with the right boundary} in smarty, is given in the form of a PHP variable, where $ smarty-> assign will be used in the Smarty program ("Name", "Li Xiaojun"); replacing the $ Name in the template into three words of "Li Xiaojun".

The entire example source program is as follows: ================================================ ================= Master Smarty Tutorial </ Title> </ head> <body> ========= ====================== foot.tpl ================================================================================================================================================================================================================================== ====== <hr> <center> CopyRight © by Master Email: Teacherli@163.com </ center> <hr> </ body> </ html> ======= ============================================== ============================================================================================================================== ============================================================================================================================================================================================================= == {* Show is the use of the smarty variable identifier * contains text to comment content *} {include file = "header.tpl"} {* page *} Hello, my name is {$ name}, welcome everyone Read my smarty learning materials.</p> <p>{include file = "foot.tpl"} {* page tail *} ================================== ============== Index.php ================================= =============== <? php / ************************************** **************** file name: index.php * effect: an example routine ** author: big Brother * Email: teacherli@163.com******** ********************************************************* / include_once ("./ Comm / smarty.class. PHP "); // contains smarty file $ smarty = new smarty (); // Established Smarty instance object $ smarty $ smarty-> templates (" ./ Templates "); // Setting template directory $ smarty-> templates_c ( "./Templates_c"); // Set the compilation directory // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ -------------- // Left and right boundary, default is {}, but it is easy to conflict with JavaScript // in practical applications, so it is recommended to set <{}> or other.</p> <p>/ / -------------------------------------------------------------------------------------------- - $ Smarty-> Left_DELIMITER = "{"; $ smarty-> right_delimiter = "}"; $ smarty-> assign ("name", "Li Xiaojun"); // Template variable replacement // compile and display INDEX.TPL Template under ./Templates $ Smarty-> Display ("index.tpl"); "I will display this program as: ================ ================ Execute index.php ================================== == <html> <head> <title> Master Smarty Tutorial </ Title> </ head> <body> Hello, my name is Li Xiaojun, welcome everyone to read my smarty learning materials. <hr> <center> CopyRight © by Master Email: Teacherli@163.com </ center> <hr> </ body> </ html> instance 2: This example is a comprehensive use of Smarty template parameters Example, these parameters are used to control the output of the template, I only select some of them, other parameters you go to see the reference.</p> <p>========================================================= exmple2. TPL ================================================= < HTML> <head> <title> Master Smarty Example 2 </ Title> </ head> <body> 1. The first letter should be capitalized: {$ str1 | Capitalize} <br> 2. Second sentence variable Li Xiaojun: {$ STR2 | Cat: "Li Xiaojun"} <br> 3. Third sentence output current date: {$ str3 | DATE_FORMAT: "% y year% M month% D day"} 4. Fourth sentence .php The program is not processed, it shows the default: {$ str4 | default: "No value!"} 5.</p> <p>The fifty sentence wants to indent the 8 blank alphabets and use "*" to replace these 8 blank characters: <br> {$ STR5 | Indenter: 8: "*"}} <br> 6. Sixth All the sentences turn to lowercase: {$ str6 | lower} <br> 7. The seventh sentence replaces the TEacherli in the variable: Li Xiaojun: {$ str7 | replace: "teacherli": "Li Xiaojun"} <br> 8. The eighth sentence is a combination of variable modifiers: {$ str8 | Capitalize | Cat: "This is a new time:" | DATE_FORMAT: "% y year% M month% D days" | lower} < / body> </ html> ============================================= ==== example2 .php ============================================ ==== <? php / ************************************************** ***** file name: example2.php * role: ** 2 shows an example of the program: big Brother * Email: teacherli@163.com****************** **************************** / include_once ("./ Smarty.class.php"); // Contains Smarty Class File $ SMARTY = new smarty (); // Establish a Smarty instance object $ smarty $ smarty-> templates ("./ Templates"); // Settings template directory $ smarty-> templates_c ("./ Templates_C"); // Set the compilation directory / / -------------------------------------------------------------------------------------------- ---- // Left and right boundary, default is {}, but it is easy to conflict with JavaScript // in practical applications, so it is recommended to set <{}> or other.</p> <p>/ / -------------------------------------------------------------------------------------------- - $ smarty-> left_delimiter = "{"; $ smarty-> right_delimiter = "}"; $ smarty-> assign ("str1", "my name is xiao jun, li."); // Put Str1 Replacement into my name is xiao jun, li. $ Smarty-> assign ("str2", "My name is:"); // Out: My name is: Li Xiaojun $ smarty-> assign ("str3", " AD "); // Output AD AUGM 21 (My Current Time) // $ Smarty-> Assign (" STR4 ","); // When the fourth sentence does not process the default value, if The previous sentence is replaced with "" $ smarty-> assign ("str5", "8 *"); // Fifth sentence output: ******* Front 8 * $ smarty-> Assign ("Str6", "Teacherli@163.com"); // This will output teacherli@163.com $ 4marty-> Assign ("Str7", "this is teacherli"); // Displayed in the template: This is Li Xiaojun $ smarty-> assign ("str8", "here is combining:"); // Compile and display the index.tpl template under ./Templates $ smarty-> display ("eXample2.tpl");? > Final output effect: ============================================== ========= example2.php output effect: ======================================== =================== <html> <head> <title> Master SMARTY Example 2 </ title> </ head> <body> 1. The first sentence Letters to capitalize: my name is xiao jun, li. <br> 2. Second modulation variable Li Xiaojun: My name is: Li Xiaojun <br> 3. The third sentence Output Current Date: AD 21 AD 21 <br></p> <p>4. The fourth sentence is not processed in the PHP program. It shows the default value: no value! <br> 5. The fifter sentence wants to indent 8 blank alphabets, and use "*" to replace these 8 blank characters: <br> ******** 8 * <br> 6. Sixth sentence TEACHERLI@163.com <br> 7. The seventh sentence replaces TEacherli in the variable: Li Xiaojun: This is Li Xiaojun <br> 8. The eighth sentence is combined using variable modification Here is Combining: Here is a new time: August 21, 2004 </ body> </ html> These parameters in the template are called variable modifiers, using these parameters to templates Perform a series of modifications control. Variable modifiers use the "|" and regulator name application modifier, use ":" to separate the modifier parameters. Variable modifiers can be used in combination, as in the eighth sentence, in actual use can be flexible.</p> <p>Example 3. =============================================== === example3.tpl ============================================== ====== <html> <head> <title> Template Some functions </ title> </ head> <body> {* below this paragraph is equivalent to defining a variable UserName *} in the template. Assign var = "username" value = "Master"} A variable inside the template will be displayed: username = {$ usrname} The following line will display 3 checkbox: <br> {html_checkboxes name = "checkbox" VALUES = $ CheckName checked = $ IsChecked output = $ value separator = "<br />"} 3 shown below in the radio line will: <br> {html_radioes name = "RadioBox" values ​​= $ RadioName checked = $ IsChecked output = $ Value Separator = "<br />"} The following shows a month, day, annual selection box: <br> {html_select_date} <hr> <b> CopyRight © by xiaojun, li 2004 <b> {mailto address = "Teacherli @ 163.ccom "text =" Contact the author "} </ body> </ html> ============================== ======================== xiMple3.php ======================== =============</p> <p>================== <? PHP / *********************************** ******************* file name: example3.php * role: ** 3 shows an example of the program: big Brother * Email: teacherli@163.com**** ************************************************** / Require_once ("./comm/ Smarty.class.php "); $ smarty = new f117_smarty; $ smarty-> template_dir = './templates/'. $ $ m >cPILE_DIR =' ./Templates_C/'Dir = './configs / '; $ smarty-> cache_dir =' ./cache/'A ($$$$$$$; // ------------------------ -------------------------------------------------- ------------ // Handle {html_checkboxes name = "checkbox" value = $ checkname checked = $ ischecked output = value sepator = "<br />"} // ----- -------------------------------------------------- ------------------------------- $ smarty-> assign ('checkname ", array (1001 =>' language", 1002 => 'Mathematics', 1003 => 'Foreign Language'); $ Smarty-> Assign ('IsChecked', 1001); // ------------------- -------------------------------------------------- ----------------- // Handle {HTML_RADIOES Name = "Radiobox" Values ​​= $ radioname ch Ecked = $ ischecked Output = $ value separator = "<br />"} // ------------------------------- -------------------------------------------------- ----- $ Smarty-> Assign ('Radioname', Array (1001 => '", 1002 =>' Mathematics', 1003 => 'Foreign Language')); $ Smarty-> Assign ('IsChecked', 1001);</p> <p>/ / -------------------------------------------------------------------------------------------- -------------------------------------- // {HTML_SELECT_DATE} No processing will automatically output // -------------------------------------------------- ------------------------------------ $ Smarty-> Display ("EXAMPLE3.TPL");? > ================================================================================================================================================================= ===== example3.php output: ======================================= ================ <html> <head> <title> Template some functions </ title> </ head> <body> {assign var = "username" value "value" value "Master"} Here will display a variable inside the template: username = The line below will display 3 Checkbox: <INPUT TYPE = "CheckBox" Name = "Checkbox []" value = "1000 "> Chinese <br /> <input type =" checkbox "name =" checkbox [] "value =" 1001 "checked =" checked "> mathematics <br /> <input type =" checkbox "name =" Checkbox [] "Value =" 1002 "> Foreign language <br /> below this line will display 3 Radio: <br> <input type =" Radio "Name =" Radiobox [] "Value =" 1000> Language <br /> <Input Type = "Radio" Name = "Radiobox []" Value = "1001" Checked = "Checked"> Mathematics <br /> <input type = "Radio" Name = "Radiobox []" value = "1002"></p> <p>Foreign language <br /> The following shows a month, day, annual selection box: <br> <select name = "DATE_MONTH"> <option label = "january" value = "01"> january </ option> <option label = " February "value =" 02 "> february </ option> <option Label =" march "value =" 03 "> march </ option> <option label =" april "value =" 04 "> april </ option> < Option label = "May" value = "05"> May </ option> <option label = "june" value = "06"> june </ option> <option label = "july" value = "07"> july < / option> <option Label = "August" value = "08" class> August </ option> <option label = "september" value = "09> september </ option> <option label =" October "value =" 10 "> october </ option> <option label =" november "value =" 11 "> november </ option> <option label =" december "value =" 12 "> decEmber </ option> </ Select> <select name = "DATE_DAY"> <option label = "01" value = "1"> 01 </ option> <option label = "02" value = "2"> 02 </ option> <option label = "03" value = "3"> 03 </ option> <option label = "04" value = "4"> 04 </ option> <option label = "05" value = "5"> 05 </ option> <option label = "06" value = "6"> 06 </ option> <option label = "07" value = "7"> 07 </ option> <option label =</p> <p>"08" value = "8"> 08 </ option> <option label = "09" value = "9"> 09 </ option> <option label = "10" value = "10"> 10 </ option> <option label = "11" value = "11"> 11 </ option> <option label = "12" value = "12"> 12 </ option> <option label = "13" value = "13"> 13 </ option> <option Label = "14" value = "14"> 14 </ option> <option label = "15" value = "15"> 15 </ option> <option label = "16" value = " 16> 16 </ option> <option Label = "17" value = "17"> 17 </ option> <option label = "18" value = "18"> 18 </ option> <option label = "19 "value =" 19 "> 19 </ option> <option label =" 20 "value =" 20 "> 20 </ option> <option label =" 21 "value =" 21 "SELECTED =" SELECTED "> 21 < / option> <option Label = "22" value = "22"> 22 </ option> <option label = "23" value = "23"> 23 </ option> <option label = "24" value = "24 "> 24 </ option> <option label =" 25 "value =" 25 "> 25 </ option> <option label =" 26 "value =" 26 "> 26 </ option> <option label =" 27 " Value = "27"> 27 </ option> <option label = "28" value = "28"> 28 </ option> <option label = "29" value = "29"> 29 </ option> <option label = "30" Value =</p> <p>"30"> 30 </ option> <option label = "31" value = "31"> 31 </ option> </ select> <select name = "date_year"> <option label = "2004" value = "2004 "SELECTED =" SELECTED "> 2004 </ option> </ select> <hr> <b> Copyright © by xiaojun, Li 2004 <b> <a href="mailto :teacherli@163.com"> Contact Author </ A> </ body> </ html> Example 3 Some functions built into the Smarty template, similar functions can be found in the manual, the method is very simple, you can find it yourself. Example 4. Template control (if / elseif / else / Endif) ========================================== ============== ================================ ======================= <html> <head> <Title> Template </ title> <head> <body> <table border = "1"> {assign var = "tbcolor" value = "# D4D0C8"} color: {$ tbcolor} <br> {section = loop loop = $ news} {if $ tbcolor == "# d4d0c8"} <TR BGColor = "{$ TBCOLOR}"> {assign var = "tbcolor" value = "# eeeeee"} {else $ tbcolor == "#eeeeee"} <tr bgcolor = "{$ tbcolor}> {assign var =" TbColor "value =" # D4D0C8 "} {/ if} <td> {$ news [loop] .newsid} </ td></p> <p><td> {$ news [loop] .newstitle} </ td> <tr> {/ section} </ table> </ body> </ html> =============== ========================================= =========================================================================================================================================================================================================================== ==================================================? PHP / ******************************************************************************************************** name: example4.php * role: ** 4 shows an example of the program: big Brother * Email: teacherli@163.com************************ ****************************** / Require_Once ("./public/inc/f117_smarty.php"" $ 4marty = new f117_smarty; $ smarty-> template_dir = './templates/'; $ 4MARTYBPOMPILE_DIR =' ./Templates_C/ '($ Smarty, scoof_dir =' ./configs/'; $ SMARTYBACACHE_DIR = './cache /'; $ smarty-> Caching = false; $ array [] = array ("newsid" => "001", "newstitle" => "Article 1 News"); $ array [] = array ("newsid" => "002", " Newstitle "=>" Article 2 News "); $ array [] = array (" newsid "=>" 003 "," newstitle "=>" Article 3 News "); $ array [] = array (" newsid "=>" 004 "," newstitle "=>" Article 4 News "); $ array [] = array (" newsid "=>" 005 "," newstitle "=>" Article 5 "); $ Array [] =</p> <p>Array ("newsid" => "006", "newstitle" => "Article 6 News"); $ array [] = array ("newsid" => "007", "newstitle" => "Article 7 News "); $ array [] = array (" newsid "=>" 008 "," newstitle "=>" Article 8 News "); $ smarty-> assign (" news ", $ array); $ smarty-> Display ("eXample4.tpl");?> ========================================= =========== example4.php output: ================================== ================= <html> <head> <title> Template </ title> <head> <body> <table border = "1"> <TR BGColor = "# d4d0c8"> <td> 001 </ td> <TD> Article 1 News </ td> </ tr> <tr bgcolor = "#eeeeeee"> <td> 002 <td> <TD> Article 2 News </ td> </ tr> <tr bgcolor = "# d4d0c8> <td> 003 </ td> <td> Article 3 News </ TD> </ TR> <TR BGCOLOR =" # Eeeeee> <TD> 004 </ TD> <TD> Article 4 News </ TD> </ Tr> <TR BGCOLOR = "# D4D0C8> <TD> 005 </ TD> <TD> Article 5 News </ td> </ tr> <</p> <p>Tr bgcolor = "#eeeeee"> <td> 006 <TD> <TD> Article 6 News </ td> </ tr> <tr bgcolor = "# d4d0c8> <td> 007 </ td> <TD > Section 7 News </ TD> </ TR> <tr bgcolor = "#eeeeee"> <td> 008 </ td> <TD> Article 8 News </ td> </ tr> </ table> < / body> </ html> Template file: {if $ tbcolor == "# d4d0c8"} <tr bgcolor = "{$ tbcolor}> {assign var =" tbcolor "value =" # eeeeee "} {Else $ TBCOLOR == "#eeeeee"} <tr bgcolor = "{$ TBCOLOR =" {assign var = "tbcolor" value = "# d4d0c8"} {/ if} This language block for setting up the background color of each row, {assign var = "tbcolor" value = "# D4D0C8"} is also remembering, it is the definition method of setting template internal variables in Example 3, using template built-in flow control statements can greatly improve program control capabilities, The following example is that there is a friend asked in phpx.com, I put it as an instance for everyone to learn. Example 5: Using the template built-in process control statement to make a multi-cell content output, which is visually Smarty records several records: ========================================== ====== example5.tpl ========================================== ======= <html> <head> <title> One line output multiple records </ title> </ head> <body> <table> <tr> {section = loop loop = $ news step = 1 } {If $ smarty.section.loop.index% 4 == 0} </ tr> <TR></p> <p>{/ if} <td> {$ news [loop] .newsid} </ td> <td> {$ news [loop] .newstitle} </ td> {/ section} </ tr> </ table> </ Body> </ html> ============================================================================================================================================================ ======== example5.php ======================================== ============= <? php / ***************************************** ************** file name: example5.php * role: ** 5 shows an example of the program: big Brother * Email: teacherli@163.com********* ********************************************* / Require_once ("./public/inc/f117_smarty.php "); $ smarty = new f117_smarty; $ smarty-> template_dir = './templates/'. $$./templates_dir =' ./Templates_C/'. $ $ m - onfig_dir = './configs/'; $ $ -> cache_dir = './cache/''; $ array [] = array ("newsid" => "001", "newstitle" => Article 1 News "); $ array [] = array ("newsid" => "002", "newstitle" => "Article 2 News"); $ array [] = array ("newsid" => "003", "newstitle" => " 3 news "); $ array [] = array (" newsid "=>" 004 "," newstitle "=>" Article 4 News "); $ array [] = array (" newsid "=>" 005 " "Newstitle" => "Article 5 News");</p> <p>$ array [] = array ("newsid" => "006", "newstitle" => "Article 6 news"); $ array [] = array ("newsid =>" 007 "," newstitle "=> "Article 7 News"); $ array [] = array ("newsid" => "008", "newstitle" => Article 8 News "); $ smarty-> Assign (" news ", $ array) ; $ smarty-> display ("eXample5.tpl");?> ================================================================================================================================================================================================ ================ Example5.php output content: ========================================================================================================================================================================================================== ======================= <html> <head> <title> One line output multiple records </ title> </ head> <body> <table> <Tr> </ TR> <Tr> <TD> 001 <TD> <TD> Article 1 News </ TD> <TD> 002 </ TD> <TD> Article 2 News </ TD> <TD > 003 </ TD> <TD> Article 3 News </ TD> <TD> 004 </ TD> <TD> Article 4 News </ TD> <TD> <TD> <TD> 005 </ TD > <TD> Article 5 News </ TD> <TD> 006 </ TD> <TD> Article 6 News </ TD> <TD> 007 </ TD> <TD> Section 7 News </ TD> <TD> 008 </ TD> <TD> Article 8 News </ TD> </ TD> </ Table> </ body> </ html> Description: Originally optimized, make the first line do not output an empty The <TR> </ TR>, but the learning program is simple, first use it first. Description Here you: {section name = loop loop =</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-124345.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="124345" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.051</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'Su38Zj33H6j310ZGSaDL_2FOxsBDLqj_2FcFzZq456wexsT8aSbumtE1mtl_2FEuRhcrvB3WrmmIPVGP0Taf3DM450Wg_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>