Todas as ideias sobre como fazer edição no lugar degradável?

Question

Atualmente estou escrevendo um script de edição no local para MooTools e estou um pouco perplexo de como eu posso fazer isso degradar normalmente sem JavaScript enquanto continua a ter alguma funcionalidade. Eu gostaria de usar melhoria progressiva de alguma forma. Eu não estou olhando para o código, mas mais um conceito de como seria de abordar a situação. Se você tem alguma idéia ou sabe de qualquer script Editar no lugar que degradam graciosamente, entre em ação.

Answer 1

Parece que você pode estar se aproximando esta da direção errada. Ao invés de criar a edição no local e começá-lo degradar bem (o ângulo de degradação suave), você realmente deve ser a criação de uma versão não-Javascript para edição e, em seguida, adicionar a editar no local usando JavaScript após o carregamento da página, reffered para como Progressive Enhancement .

Existem duas opções para isso. Criar a tela como um formulário com um botão que funciona sem Javascript, em seguida, usando Javascript substituir as entradas com algum tipo de etiqueta que executa o lugar de edição no submeter-se. Você deve ser capaz de usar uma combinação de etiquetas e atributos id para escolher as propriedades corretas para a sua aplicação de edição no local para o trabalho. A outra opção se você não quer um formulário para exibir por padrão é exibir os valores com um botão / link para transformá-lo em um formulário usando o processamento do lado do servidor, em seguida, adicionando a edição no Topkapi para isso.

Answer 2

Você não pode fazer edição no lugar em todos, sem JavaScript, degradação tão graciosa para isso consiste em garantir que o usuário ainda pode editar o item em questão quando o JavaScript não está disponível.

Como tal, eu tinha acabado de ter um link para editar todo o item em questão e, em seguida, criar os controles de edição no lugar em JavaScript no carregamento da página, escondendo-se no link editar se você preferir que os usuários usam edit- no local, quando disponível.

Answer 3

Se é conteúdo textual, você pode mostrar o conteúdo editável como um tipo de entrada botão enviar, com a legenda do conteúdo. Quando clicado, ele iria enviar o formulário inteiro, preservando os outros valores, e mostrar uma janela de edição. Depois, os valores do formulário poderia ser restaurada.

Answer 4

Talvez colocar uma entrada em uma div em cada elemento que tem uma edição no local. Quando a página é carregada, usar o JavaScript para esconder as divs. Dessa forma, eles só vai ser útil se o javascript nunca dispara.

Answer 5

Estou asuming o que você está tentando fazer é algo como o seguinte cenário:

<li>
    <span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>

Quando o é um botão que substitui o com um , para que ele possa ser editado. Há um par de maneiras de fazer esta degradar normalmente (ou seja, trabalho sem javascript).

Em teoria:

Usando CSS, fazê-lo com pseudo-seletores. : Ativo é um pouco como um evento onclick, então se você um ninho escondido no

, couros este CSS e mostra o quando o li é clicado

.

li:active #editable {
    display:none;
}
li:active input{
    display:block;
}

Isso pode funcionar no seu navegador favorito, mas você vai, sem dúvida, descobrir que ele quebra no IE.

Na prática:

Use um link. Tem que ser uma ligação efectiva que vai para uma página onde esta entrada / span substituição tem sido do lado do servidor feito. Você furar um manipulador de eventos na que usa MooTools para cancelar o evento clique para pessoas que têm JS, como este:

function make_editable(evt) {
    var evt = new Event(evt);
    evt.preventDefault();
}

Answer 6

Tente usar um texto de entrada com estilo, e após a página carregada torná-lo somente leitura, usando o atributo somente leitura. e quando clicar nele remover o atributo somente leitura e onblur tornando-se somente leitura novamente. ao clicar no botão "Salvar" ou em onblur evento fazer uma solicitação Ajax para salvar os dados no servidor.