动态创建引导按钮

时间:2013-04-01 09:22:53

标签: javascript twitter-bootstrap

是否可以动态创建引导按钮?我有一个文本文件,其中包含一些项目列表,我将使用javascript创建一个数组。这就是我想动态创建引导按钮的地方,这些项目是每个按钮中的文本。如果文本文件中有10个项目,则会创建10个按钮。有人能告诉我它是如何完成的,或者指向我的一些教程。

编辑(现在可以创建,但不能检查是否创建按钮的代码):

createButtons():

$(function() {
  $.ajax({
    url : 'http://localhost:8080/SSAD/type.txt',
    dataType : "text",
    success : function (filecontent) {
      var lines=filecontent.split('\n');
      $.each(lines, function() {
        if (this!='') {
            var word = this;
            word = word.toLowerCase().replace(/(?:_| |\b)(\w)/g, function(str, p1) { return p1.toUpperCase();});
            if ($('button:contains("'+word+'")').length==0) {
                var button='<button type="button" class="btn btn-block btn-inverse active" data-toggle="button tooltip" title="Click this to enable/disable viewing of'+this+'" onclick="toggleVisibility('+"'"+this+"'"+')">'+word+'</button>';
                $(".crisisButtons").append(button);
            }
        }
      });
    }
  });
});

HTML:

<button type="button" class="btn btn-block btn-inverse" onclick="createButtons">Click me!</button>

<div class="crisisButtons"></div>

1 个答案:

答案 0 :(得分:6)

是。这很容易。

textfile.txt

button1
button2
button3
button4
button5
button6
button7
button8
button9
button10

代码

<div id="textfile-buttons"></div>

<script type="text/javascript">
$(document).ready(function() {
  $.ajax({
    url : 'textfile.txt',
    dataType : "text",
    success : function (filecontent) {
      var lines=filecontent.split('\n');
      $.each(lines, function() {
        if (this!='') {
          var button='<button class="btn btn-primary">'+this+'</button>&nbsp;';
          $("#textfile-buttons").append(button);
        }
      });
    }
  });
});
</script>

结果 enter image description here

当然,您需要为按钮分配click - 处理程序,或者如果您使用<a> -tags而不是<button>,则需要指定链接。


<强>更新

如果您想检查已存在具有特定文字的button,请修改$.each循环

$.each(lines, function() {
  if (this!='') {
    //check if a button with "this" text not already exists
    if ($('button:contains("'+this+'")').length==0) {
      var button='<button class="btn btn-primary">'+this+'</button>&nbsp;';
      $("#textfile-buttons").append(button);
    }
  }
});

所以,即使textfile.txt包含 BUTTON1 BUTTON2 BUTTON3 BUTTON3 BUTTON3 BUTTON3 button7 按钮8 按钮9 button10

只会创建一个button3。