使用Smarty进行编码时，Jquery Chosen插件在Internet Explorer中无法正确显示

时间：2014-03-18 12:01:07

标签： internet-explorer smarty jquery-chosen

我一直在试用Harvest的Chosen插件http://harvesthq.github.io/chosen/，这会创建一个很酷的选择框。它适用于大多数浏览器，包括8+。但是，当我在Smarty中使用代码时，它不适用于Internet Explorer。更奇怪的是，当我使用生成的HTML源代码而不是Smarty时，它的工作原理。有人可以告诉我我做错了吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta charset="utf-8">
  <title>{$site_title|escape}{if $page_title} - {$page_title|escape}{/if}</title>
  <link rel="stylesheet" href="Javascript/docsupport/prism.css">
  <link rel="stylesheet" href="Javascript/chosen.css">
{literal}
  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script src="Javascript/chosen.jquery.js" type="text/javascript"></script>
  <script src="Javascript/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
{/literal}
</head>
<body>
   <form>
    <div id="wrap">
      <div id="main">

         <select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="1">
            <option value=""></option>
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
            <option value="American Samoa">American Samoa</option>
            <option value="Andorra">Andorra</option>
            <option value="Angola">Angola</option>
            <option value="Anguilla">Anguilla</option>
            <option value="Antarctica">Antarctica</option>
            <option value="Antigua and Barbuda">Antigua and Barbuda</option>
            <option value="Argentina">Argentina</option>
            <option value="Armenia">Armenia</option>
            <option value="Aruba">Aruba</option>
            <option value="Australia">Australia</option>
            <option value="Austria">Austria</option>
            <option value="Azerbaijan">Azerbaijan</option>
            <option value="Bahamas">Bahamas</option>
            <option value="Bahrain">Bahrain</option>
            <option value="Bangladesh">Bangladesh</option>
            <option value="Barbados">Barbados</option>
            <option value="Belarus">Belarus</option>
            <option value="Belgium">Belgium</option>
            <option value="Belize">Belize</option>
            <option value="Benin">Benin</option>
            <option value="Bermuda">Bermuda</option>
            <option value="Bhutan">Bhutan</option>
          </select>
     {literal}

                <script type="text/javascript">
                      var config = {
                           '.chosen-select'           : {},
                           '.chosen-select-deselect'  : {allow_single_deselect:true},
                           '.chosen-select-no-single' : {disable_search_threshold:10},
                           '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
                           '.chosen-select-width'     : {width:"95%"}
                                    }
                       for (var selector in config) {
                                $(selector).chosen(config[selector]);
                                                    }
                  </script>

      {/literal}
     </div>
   </div>
  </form>
</body>
</html>

这会生成以下HTML，它在所有浏览器中都能正常工作...... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta charset="utf-8">
  <title>{$site_title|escape}{if $page_title} - {$page_title|escape}{/if}</title>
  <link rel="stylesheet" href="Javascript/docsupport/prism.css">
  <link rel="stylesheet" href="Javascript/chosen.css">

  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script src="Javascript/chosen.jquery.js" type="text/javascript"></script>
  <script src="Javascript/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>

    </head>
    <body>
       <form>
        <div id="wrap">
          <div id="main">
              <select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="1">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
                <option value="American Samoa">American Samoa</option>
                <option value="Andorra">Andorra</option>
                <option value="Angola">Angola</option>
                <option value="Anguilla">Anguilla</option>
                <option value="Antarctica">Antarctica</option>
                <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                <option value="Argentina">Argentina</option>
                <option value="Armenia">Armenia</option>
                <option value="Aruba">Aruba</option>
                <option value="Australia">Australia</option>
                <option value="Austria">Austria</option>
                <option value="Azerbaijan">Azerbaijan</option>
                <option value="Bahamas">Bahamas</option>
                <option value="Bahrain">Bahrain</option>
                <option value="Bangladesh">Bangladesh</option>
                <option value="Barbados">Barbados</option>
                <option value="Belarus">Belarus</option>
                <option value="Belgium">Belgium</option>
                <option value="Belize">Belize</option>
                <option value="Benin">Benin</option>
                <option value="Bermuda">Bermuda</option>
                <option value="Bhutan">Bhutan</option>
              </select>



                    <script type="text/javascript">
                          var config = {
                               '.chosen-select'           : {},
                               '.chosen-select-deselect'  : {allow_single_deselect:true},
                               '.chosen-select-no-single' : {disable_search_threshold:10},
                               '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
                               '.chosen-select-width'     : {width:"95%"}
                                        }
                           for (var selector in config) {
                                    $(selector).chosen(config[selector]);
                                                        }
                      </script>

               </div>
            </div>
          </form>
       </body>
    </html>

3月25日回复我的回复，我在这里展示了我的网站Looknf.co.uk的Smarty代码，这也说明了Chosen在Internet Explorer中不起作用。 First Index.tpl 

{assign var="meta_description" value=$app->setting->site_description}
{if $smarty.session.magnify}{assign var="scripts" value='/tjpzoom.js'}{/if}
{include file='header.inc.tpl'}

      <div id="main">

          <div id="div-leftcol">
               <form id="myForm">
                 <span style="position:relative;left:9px;top:5px">
                     <b> Town:</b>
                     <select id="grid" data-placeholder="Select your town" class="chosen-select" style="width:200px;" tabindex="1" onchange="document.location.href='?grid=' + this.options[this.options.selectedIndex].value">
                    {html_options options=$categories selected=$grid}
                    </select>
                </span>
                <span style="position:relative;left:9px;top:10px">
                     <b> Business Type:</b>
                     <select name="regions_category_id" id="selectR" data-placeholder="Type what you're looking for..." class="chosen-select" style="width:200px;" tabindex="2" onchange="return findURL(this.options[this.options.selectedIndex].value,$grid)">
                     {html_options style="font-size:16px" options=$regions selected=$regions_category_id}
                     </select>
                </span>
               </form>

               <span style="position:relative;top:15px;left:15px;">
                <a href="#" id="try-1" class="try sprited">3 Simple Steps to Success...</a> 
               </span>

               <span style="position:relative;top:30px;left:0px">
                   <a href="{url|escape href='/newsletter_signup.php'}"><img src="images/Newsletter-220.png" title="" alt="Newsletter"></a>
               </span>

               <span style="float:left;position:relative;top:45px;left:20px;">
                   <a href="#" id="try-2">Why Look No Further?</a> 
               </span>

               <span style="position:relative;top:60px;left:34px;">  
                   <a href="{url|escape href='/get_pixels.php'}"><img src="images/Advertiser-Offer13.gif" style="width:150px;outline:grey solid thin;" id="qs_1" name="qs_1" title="" alt="Offer"></a>
               </span>

          </div>


          <div id="div-gridmain">
             {foreach item=grids from=$rows}
               {foreach item=grid from=$grids}
                  <map name="grid_{$grid->id}">{$grid->map()}</map>
                  <img src="{$grid->url()|escape}" usemap="#grid_{$grid->id}" width="{$grid->width|escape}" height="{$grid->height|escape}" alt="" border="0" />
               {/foreach}
             {/foreach}
          </div>

          {include file='footer.tpl'}

        </div>



         {literal}
          <!-- floating page sharers Start -->
           <!--[if !IE]> -->
           <style>
            #pageshare {position:fixed; bottom:15%; margin-left:1220px; float:right; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#E0E2DC;padding:0 0 2px 0;z-index:5000;}
           </style>
           <![endif]-->
           <!--[if IE]>
           <style>
            #pageshare {position:fixed; bottom:15%; margin-left:1205px; float:right; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#E0E2DC;padding:0 0 2px 0;z-index:5000;}
           </style>
           <![endif]-->
           <style>
            #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;z-index:5000;}
.fb_share_count_top {width:48px !important;z-index:5000;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;z-index:5000;}
            .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;z-index:5000;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;z-index:5000;}
          </style>


          <div id='pageshare'>
              <div style="clear:both;font-size: 16px;font-weight:bold;text-align:center;color: #000000;z-index:5000;">
Share
              </div>
              <div class='sbutton' id='fb'>
                   <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
                   <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
              </div>
              <div class='sbutton' id='tweet'>
                   <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://looknf.co.uk/" data-counturl="http://looknf.co.uk" data-lang="en" data-count="vertical">Tweet</a>
                   <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
              </div>
              <div class='sbutton' id='gplusone'>
                   <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
                   <g:plusone size="tall" href="http://www.looknf.co.uk"></g:plusone>
              </div>
              <div class='sbutton' id='friend'>
                   <a href='/tell_a_friend.php'><img src="images/email_friend.png" outline="none" border-style="none"></a>
              </div>
          </div>



          <script type="text/javascript">
                  var config = {
                     '.chosen-select'           : {},
                     '.chosen-select-deselect'  : {allow_single_deselect:true},
                     '.chosen-select-no-single' : {disable_search_threshold:10},
                     '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
      '               .chosen-select-width'     : {width:"100%"}
                 }
                   for (var selector in config) {
                      $(selector).chosen(config[selector]);
                 }
          </script>
          {/literal}



          </div>

{include file='wz_tooltip.inc.tpl'}
{include file='footer.inc.tpl'}

现在header.inc.tpl 

{assign var='stylesheets' value='/styleNEW.css'}
{include file='html.inc.tpl'}
<body{$body_attr}>
<div id="wrap">
{include file='our.logo.tpl'}

我不会在这里添加所有内容，但这里是html.inc.tpl 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$language_code|escape|default:'en'}" lang="{$language_code|escape|default:'en'}">
<head>
  <link rel="icon" href="http://www.looknf.co.uk/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="http://www.looknf.co.uk/favicon.ico" type="image/x-icon" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{if trim($meta_description)}
  <meta name="description" content="{$meta_description|escape}" />
{else}
  <meta name="description" content="{$app->settings->meta_tags->description|escape|default:"Michael Mallick"}" />
{/if}
{if $meta_robots}
  <meta name="robots" content="{$meta_robots|escape}" />
{else}
  <meta name="robots" content="{$app->meta_tags->robots|escape|default:"index, follow"}" />
{/if}
  <meta name="copyright" content="{$app->meta_tags->copyright|escape|default:"Look No Further"}" />
  <meta name="author" content="{$app->meta_tags->author|escape|default:"Michael Mallick"}" />
  <meta name="keywords" content="{$app->meta_tags->keywords|escape|default:"look no further"}" />
  <link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light&subset=latin' rel='stylesheet' type='text/css' />
  {foreach item=stylesheet from=$stylesheets}
     <link rel="stylesheet" type="text/css" href="{url|escape href=$stylesheet}" />
  {/foreach} 
  {foreach item=script from=$scripts}
     <script type="text/javascript" src="{url|escape href=$script}"></script>
  {/foreach}
  <title>{$site_title|escape}{if $page_title} - {$page_title|escape}{/if}</title>

  {literal}

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script src="Javascript/jsRollover.js" type="text/javascript"></script>

  <link rel="stylesheet" href="Javascript/docsupport/prism.css">
  <link rel="stylesheet" href="Javascript/chosen.css">
  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script src="Javascript/chosen.jquery.js" type="text/javascript"></script>
  <script src="Javascript/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>

<!-- <script type="text/javascript">
    var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
      '.chosen-select-width'     : {width:"95%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }
  </script> -->

  <script>
    $(function() {
    $("#selectR").change(function () {
       var str = "";
       var reg = $(this).val();
       var grid = $("#grid").val();
       findURL(reg,grid);
          });
       });
  </script>

  <script src="Javascript/findURL.js"></script>


  {/literal}
</head>

0 个答案:

没有答案
相关问题
最新问题