0

この素晴らしいプラグインを使用できるようにするために: Jquery iphone contact

既存のマークアップ (通常のリスト) を更新する必要があります。

<div id="iphone-scrollcontainer">
   <ul id="iphone-search">
       <li><a href="#A" title="A">A</a></li>
        <li><a href="#B" title="B">B</a></li>
        <li><a href="#C" title="C">C</a></li>
        <li><a href="#D" title="D">D</a></li>
        <li><a href="#E" title="E">E</a></li>
        <!-- More characters here -->
    </ul>
   <ul id="iphone-scroll">
            <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Amsterdam"><strong>Amsterdam</strong>747,290</a></li>
             <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Barcelona"><strong>Barcelona</strong>747,290</a></li>
             <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Sevilla"><strong>Sevilla</strong>747,290</a></li>
             <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Cadiz"><strong>Cadiz</strong>747,290</a></li>
   </ul>
</div>

に (ナビゲーション インジケーターを追加):

<div id="iphone-scrollcontainer">
   <ul id="iphone-search">
       <li><a href="#A" title="A">A</a></li>
        <li><a href="#B" title="B">B</a></li>
        <li><a href="#C" title="C">C</a></li>
        <li><a href="#D" title="D">D</a></li>
        <li><a href="#E" title="E">E</a></li>
        <!-- More characters here -->
    </ul>
   <ul id="iphone-scroll">
      <li>
        <div id="nav-indicator-fixed"></div>
        <a name="A"></a>
      <div class="nav-indicator" id="nav-a">A</div>
         <ul>
            <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Amsterdam"><strong>Amsterdam</strong>747,290</a></li>
            <li><a href="http://en.wikipedia.org/wiki/Arnhem" title="Arnhem"><strong>Arnhem</strong>144,101</a></li>
            <!-- More info here -->
         </ul>
      </li>
      <li>
        <a name="B"></a>
      <div class="nav-indicator" id="nav-b">B</div>
         <ul>
            <li><a href="http://en.wikipedia.org/wiki/Bolsward" title="Bolsward"><strong>Bolsward</strong>9,607</a></li>
            <li><a href="http://en.wikipedia.org/wiki/Buren" title="Buren"><strong>Buren</strong>25,644</a></li>
            <!-- More info here -->
         </ul>   
      </li>
   </ul>
</div>

だから私はしなければならない

追加：

 <div id="nav-indicator-fixed"></div>
            <a name="A"></a>
          <div class="nav-indicator" id="nav-a">A</div>
          <ul>

Aアイテムの前と

</li></ul>A 項目の後 (および既存の各最初の文字と同じ)、私は正しいですか?

jqueryを使用してフロントエンドで実行する方法がわからない場合、またはphpを使用してサーバーで実行できるかどうかがわからないときです

私は簡単なクエリでマークアップを生成します: 'select name from citys order by name desc'

どこで、どのようにしますか？

（実際にはプラグインに機能があるべきではありません¿）

-編集-

php コードが要求されました:

function nube_ingredientes($limit = 50){
    $query = "SELECT count(*) as num, nombre FROM ciudades WHERE GROUP BY nombre ORDER BY num DESC LIMIT $limit";

    $result = mysql_query($query);
        $html .= '<div class="content">';

            $html .=    '<ul>';
                while($taginfo = mysql_fetch_row($result)){
                     $numtags = $taginfo[0];
                     $tagname = $taginfo[1];
                     $tagurl = urlencode($tagname);
                     $tagsize = 9 + intval($numtags)*2;
                     $bla = 'get_items("'.str_replace(' ','-',$tagname).'")';
                     $tagname = str_replace('-', ' ', $tagname);
                      $html.= "<li><a href='#router' onclick='$bla' c='$numtags'>$tagname</a></li> "."\n";

                }
        $html .=    '</ul>
                  </div>';

        echo $html;
 }
4

2 に答える 2

2

私はこれをテストしていないので、疑似コードと考えてください。ただし、良い出発点になるはずです。各行の最初の文字をチェックし、それが前の行の最初の文字と異なる場合は、新しい HTML コードを発行するという考え方です。可能な限り final に近い HTML コードを発行することが常に最善です。したがって、このソリューションでは、フロント エンドに必要な複雑な変更はありません。 

function nube_ingredientes($limit = 50){
$query = "SELECT count(*) as num, nombre FROM ciudades WHERE GROUP BY nombre ORDER BY num DESC LIMIT $limit";

$result = mysql_query($query);
    $html .= '<div class="content">';
        $html .=    '<ul>';
            while($taginfo = mysql_fetch_row($result)){
                 $numtags = $taginfo[0];
                 $tagname = $taginfo[1];
                 $tagurl = urlencode($tagname);
                 $tagsize = 9 + intval($numtags)*2;
                 $bla = 'get_items("'.str_replace(' ','-',$tagname).'")';
                 $tagname = str_replace('-', ' ', $tagname);
                 $thisChar = strtoupper(substr($tagname, 0, 1)); //Added by msigman
                 if($lastChar != $thisChar);//Added by msigman
                 {
                    $html .= "<li><div id='nav-indicator-fixed'></div>
                    <a name='$thisChar'></a>
                    <div class='nav-indicator' id='nav-$thisChar'>$thisChar</div>
                    <ul>"; //Added by msigman
                  }
                 $html.= "<li><a href='#router' onclick='$bla' c='$numtags'>$tagname</a></li> "."\n";
                 if($lastChar != $thisChar); //Added by msigman
                 {
                    $lastChar = $thisChar; //Added by msigman
                    $html .= "</li></ul>"; //Added by msigman
                 }
            }
    $html .=    '</ul></div>';
    echo $html;

}

于 2012-03-18T15:22:28.173 に答える
0

PHP でマークアップを生成せずに基本データをクライアントに渡したい場合、次のようにできます。

  1. サーバーがコンパクトな形式でデータを配信するようにしてください。あなたが言ったように、データにはSQLクエリが付属しています。PHPで簡単にダンプできると思います。これによりencode_json($results)、次のようなものが提供されます。
// title, wiki-link, x-coord, y-coord
var data =
  [["Amsterdam", "Amsterdam", 747, 290],
   ["Barcelona", "Barcelona", 747, 290],
   ...
  ]

タイトルではない場合に備えて、wikiリンクを追加しました;）

jQuery とunderscore.jsを使用すると、数行のコードでコンテンツを生成できます。

// group your data by the first letter of the title
var grouped = _.groupBy(data, function(row) { 
  // row[0] is the title
  return row[0].substring(0, 1)
})
// generate the header
var letters = _.keys(grouped)
var header = $('<ul>', { id: 'iphone-search' })
_.each(letters, function(letter) {
  $('<a>', { href: '#' + letter, title: letter }).html(letter).appendTo(header)
})

// the scroll body
var scrollBody = $('<ul>', { id: 'iphone-scroll' })
_.each(letters, function(letter) {
  var li = $('<li>')
  // create the navigational anchor
  $('<a>', { name: letter }).appendTo(li)

  // create the div to put the ul/li... on
  var div = $('<div>', { 
    'class': 'nav-indicator',
    'id': 'nav-' + letter.toLowerCase()
  }).appendTo(li)
  var ul = $('<ul>').appendTo(div)
  _.each(grouped[letter], function(group) {
    // now, for each element within the group
    // create the <li><a>...</a></li> content
    $('<li>').append(
      $('<a>', {
        title: group[0],
        href: 'http://en.wikipedia.org/wiki/' + group[1] // the wiki-link
      }).append(
        $('<strong>').html(group[0])
      ).append(
        $('<span>').html(group[2] + ', ' + group[3])
      )
    ).appendTo(ul)
  })      
})

// now you can join them in the container
var container = 
  $('<div>', { id: 'iphone-scrollcontainer'}).append(header).append(scrollBody)

必要な html が生成されるはずです ;) 最後の部分は少し乱雑に見えますが、すべての要素が jQuery によってのみ生成されるため、少なくとも同じスタイルです。

于 2012-03-18T15:17:19.040 に答える