button group - Control Bootstrap con múltiples "alternar datos"




buttons responsive (9)

Solo para complementar la respuesta de @Roman Holzner ...

En mi caso, tengo un botón que muestra la información sobre herramientas y debe permanecer desactivado hasta más acciones. Usando su enfoque, el modal funciona incluso si el botón está desactivado, porque su llamada está fuera del botón: estoy en un archivo blade Laravel, solo para ser claro :)

<span data-toggle="modal" data-target="#confirm-delete" data-href="{{ $e->id }}">
    <button name="delete" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

Por lo tanto, si desea mostrar el modal solo cuando el botón está activo, debe cambiar el orden de las etiquetas:

<span data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
    <button name="delete" class="btn btn-default" data-href="{{ $e->id }}" data-toggle="modal" data-target="#confirm-delete" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

Si desea probarlo, cambie el atributo con un código JQuery:

$('button[name=delete]').attr('disabled', false);

¿Hay alguna manera de asignar más de un evento a un control de arranque a través de "datos-alternar". Por ejemplo, digamos que quiero un botón que tenga un "tooltip" y un "botón" alternar asignado a él.
Intentó data-toggle = "botón de información sobre herramientas", pero solo la información sobre herramientas funcionó.

EDITAR:

Esto es fácil de "solucionar" con

$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");

Cuando abres modal en una etiqueta y quieres mostrar la información sobre herramientas, y si implementas tooltip inside tag, se mostrará la etiqueta emergente tooltip cercana. Me gusta esto

Sugeriré que use div fuera de una etiqueta y use "display: inline-block;"

<div data-toggle="tooltip" title="" data-original-title="Add" style=" display inline-block;">
    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="setSelectedRoleId(6)">
     <span class="fa fa-plus"></span>
    </a>
</div>


Como la información sobre herramientas no se inicializa automáticamente, puede realizar cambios en la inicialización de la información sobre herramientas. Hice la mía así:

$(document).ready(function() {
    $('body').tooltip({
        selector: "[data-tooltip=tooltip]",
        container: "body"
    });
});

con este marcado:

<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>

Observe la data-tooltip .

Actualizar

O simplemente,

$('[data-tooltip="tooltip"]').tooltip();

Si desea agregar un modal y una información sobre herramientas sin agregar javascript ni alterar la función de información sobre herramientas, también puede simplemente envolver un elemento alrededor de él:

<span data-toggle="modal" data-target="#id">
    <a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>
</span>

Esta es la mejor solución que acabo de implementar:

HTML

<a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a>

JAVASCRIPT que de todos modos debe incluir, independientemente del método que use.

$('[rel="tooltip"]').tooltip(); 

Aún no. Sin embargo, se ha sugerido que alguien agregue esta característica un día.

El siguiente problema bootstrap de Github muestra un ejemplo perfecto de lo que estás deseando. Es posible, pero no sin escribir su propio código de solución en esta etapa.

Echale un vistazo... :-)

https://github.com/twitter/bootstrap/issues/7011


Utilizo href para cargar el modal y dejo la información-alternar para la información sobre herramientas:

<a 
    data-toggle="tooltip"
    data-placement="top"
    title="My Tooltip text!"
    href="javascript:$('#id').modal('show');"
>
+
</a>

Logré resolver este problema sin la necesidad de cambiar ningún marcado con la siguiente parte de jQuery. Tuve un problema similar cuando quería una información sobre herramientas en un botón que ya estaba usando data-toggle para un modal. Todo lo que deberá hacer aquí es agregar el título al botón.

$('[data-toggle="modal"][title]').tooltip();

Puedes evitar hacer doble clic usando este código:

Me.btnSave.Attributes.Add("onclick", "this.disabled=true;")
Me.btnSave.UseSubmitBehavior = False

Así que puedes usar btnSave_Click para llamar a tu API.

Por lo general, tengo muchos Validators en mi Page : configuración Validator.SetFocusOnError = True Puedo ejecutar este código para volver a habilitar el botón de guardar si falla una validación.

Me.YourControl.Attributes.Add("onfocus", Me.btnSave.ClientID & ".removeAttribute('disabled');")




button twitter-bootstrap binding