Форум

emptyindorill · #11 (**permalink**) 19.07.2017, 14:59

Сообщение от laimas

А первая что будет имитировать? Вы же понимаете, что клон, это 100% близнец (о событиях и прочем опустим), кнопкой вторая ссылка не станет автоматически, и нафиг она нужна вообще, можно и имеющуюся ссылку превратить в кнопку.

Первая ничего не будет имитировать, первая заголовок, h4, ссылка внутри которого будет неактивна (pointer-event: none

, событий никаких и не надо, нужен именно клон ссылки заголовка что бы на основе его сделать то, чего изначально в системе нет.

А имеющуюся ссылку кнопкой сделать нельзя, для неё у "дизайнера" другое исполнение.

Увидев макет я сказал сразу - нет в функционале кнопки читать далее, и она и не нужна, потому что заголовок ссылка.
Мне ответили - директор хочет так, и никак иначе. Заголовок не ссылкой и что бы было читать далее.

Сам не рад что так приходится изгаляться.

laimas · #12 (**permalink**) 19.07.2017, 15:05

Сообщение от emptyindorill

Первая ничего не будет имитировать, первая заголовок, h4

Вторая при клонировании тоже будет заголовком-ссылкой, это что до сих пор не понятно? Если требуется создать кнопку-ссылку, то нужно не клонировать блок со ссылкой-заголовком, а брать у этих ссылок только href, который указывать добавляемой (не клонируемой) ссылке, кнопкой которую можно превратить и в CSS.

emptyindorill · #13 (**permalink**) 19.07.2017, 15:24

Сообщение от laimas

Вторая при клонировании тоже будет заголовком-ссылкой, это что до сих пор не понятно? Если требуется создать кнопку-ссылку, то нужно не клонировать блок со ссылкой-заголовком, а брать у этих ссылок только href, который указывать добавляемой (не клонируемой) ссылке, кнопкой которую можно превратить и в CSS.

Точно... Я понял что вы имеете ввиду)

То что клон тоже является ссылкой из-заголовка то я понимаю.

Я как то не подумал что можно просто взять href, в нужное место блока новости вставить .html() и в этот html вставить href из ссылки-заголовка)

Но в принципе меня и нынешний вариант тоже устраивает.
Строчка jquery, 2 строчки css и всё - желаемый результат достигнут.

laimas · #14 (**permalink**) 19.07.2017, 15:31

Сообщение от emptyindorill

Но в принципе меня и нынешний вариант тоже устраивает

Думать надо, а не ..., клонирование здесь не к месту:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.btn-link {
    display: inline-block;
    padding: 0 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #eee;
    color: #aaa;
    text-decoration: none;
}

.btn-link:hover {
    color: #777;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
    $('div.parent').append(function() {
        return $('<a>', {'href': $(this).find('a')[0].href, 'class': 'btn-link', 'text': 'Читать далее'}) 
    })
});
</script>
</head>
<body>
<div class="parent">
    <div class="link"><a href="/page1.php" class="child">page1</a></div>
    <div class="inner">Content</div>
</div>
<div class="parent">
    <div class="link"><a href="/page2.php" class="child">page2</a></div>
    <div class="inner">Content</div>
</div>
<div class="parent">
    <div class="link"><a href="/page3.php" class="child">page3</a></div>
    <div class="inner">Content</div>
</div>
</body>
</html>

emptyindorill · #15 (**permalink**) 19.07.2017, 15:37

Сообщение от laimas

Думать надо, а не ..., клонирование здесь не к месту:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.btn-link {
    display: inline-block;
    padding: 0 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #eee;
    color: #aaa;
    text-decoration: none;
}

.btn-link:hover {
    color: #777;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
    $('div.parent').append(function() {
        return $('<a>', {'href': $(this).find('a')[0].href, 'class': 'btn-link', 'text': 'Читать далее'}) 
    })
});
</script>
</head>
<body>
<div class="parent">
    <div class="link"><a href="/page1.php" class="child">page1</a></div>
    <div class="inner">Content</div>
</div>
<div class="parent">
    <div class="link"><a href="/page2.php" class="child">page2</a></div>
    <div class="inner">Content</div>
</div>
<div class="parent">
    <div class="link"><a href="/page3.php" class="child">page3</a></div>
    <div class="inner">Content</div>
</div>
</body>
</html>

Понял Вас.

Спасибо за наставление)

laimas · #16 (**permalink**) 19.07.2017, 15:41

Сообщение от emptyindorill

Понял Вас

Это хорошо, но не повод цитировать все, зачем создавать портянки.

Форум

Справочник

Discord чат

Курсы javascript